Tables with no styling may be difficult to read. For example, the last two entries in Row 3 of the table below run together.
The CSS style sheet
http://www.d.umn.edu/~gshute/common/table.css is designed
to facilitate easy styling of tables.
The styling could be done by putting style classes on each <th>
and <td> tag, but that gets quite tedious for large tables.
With the table.css style sheet you can adjust the following
table style attributes just by adding classes to the <table> tag:
In addition, tables can be styled so that multiple tables can be displayed in-line.
Most of the alignment and font styles set style attributes uniformly on all entries in a table. The exception is the "numeric" alignment class which sets left alignment on the first column (row headers) and right alignment on the remaining columns (numeric entries).
The "Column Styling" section of this web page describes a general technique for styling individual columns of a table by using a special kind of style rule selectors for its <th> and <td> tags. The same technique can be applied to its <tr> tags to style individual rows.
Tables with no styling may be difficult to read. For example, the last two entries in Row 3 of the table below run together. The next example shows the table with the "padded" class, which clears the problem with entries running together.
For larger tables putting borders around cells helps the viewer follow along a row or column. The third example shows the table with the "bordered" class, which adds cell borders. The last example shows the table with both the "bordered" class and the "padded" class. The rest of the examples in this web page will all use this combination along with other classes for text alignment and font.
By default, header cell text in a table is center aligned but normal cell text is left aligned. This is shown in the first example below, most conspicuously in Column 2. The next three examples use the "left", "center", or "right" classes to make text uniformly left-, center-, or right-aligned. The last example uses the "numeric" class to make text left-aligned in the first column and right-aligned in the remaining columns.
The table style sheet has two kinds classes for modifying the font used in tables:
The font family used in text is configurable by the user in most browsers. The first example below shows a table with default font. The remaining examples use one of the "serif" "sans-serif" or "monospaced" classes to control the font family.
Table text without a text style class has plain style as shown in the first example below. The remaining examples show the effects of the "bold" and "italic" classes.
For easier reading, it is nice to use alternating colors on the table
rows.
This can be accomplished by adding extra style rules with a
tr:nth-child selector.
These rules have the following general form:
table.class-name tr:nth-child(r) {
/* styling for elements in row r of tables with class class-name */
}
The argument r can either be a row number or an expression
of the form an+b, where a and
b are integer literals.
For example, :nth-child(3n+2) refers to every third row
starting with the second.
Often most of the columns in a table require the same styling but a few
columns require special styling.
This can be accomplished by adding extra style rules with
th:nth-child and td:nth-child selectors.
These rules have the following general form:
table.class-name th:nth-child(c), table.class-name td:nth-child(c) {
/* styling for elements in column c of tables with class class-name */
}
The argument for :nth-child can either be a column number,
as shown above, or an expression of the form an+b,
where a and b are integer literals.
For example, :nth-child(3n+2) refers to every third column
starting with the second.
This presentation uses the following files.