In the preceding page, we looked at the basics of tables structure and markup in html. Here, we start to consider formatting and appearance. Some of the tools available to control the look of a table are rooted in earlier versions of HTML. With the advent of CSS, many of these tools have been replaced and supplemented. This allows much greater power and flexibility in controlling the appearance of tables, while retaining a relatively simpe structure in the HTML markup that simplifies editing the actual content.
This TABLE uses the related elements THEAD, TR, TH, TBODY, TD and CAPTION in its construction, and uses only html TABLE attributes to define its visual appearance. These are summaraized within the example table itself – note that some of these are deprecated, meaning that their use in HTML 4 is discouraged and that authors should use CSS to achieve the same results:
| Attribute | Details | Values | Comment |
|---|---|---|---|
| summary | short explanation | any text string | – |
| align | table alignment within document | left, center, right | deprecated – use CSS styling instead |
| width | width of table in available horizontal space | integer number of pixels or % of available space | – |
| border | width of frame around table | integer number of pixels | effect may be overidden by other attribute values |
| frame | which parts of frame to render | void, above, below, hsides, lhs, rhs, vsides, box, border | frame="box" overides border="2" in Safari 5
but not FireFox 3 |
| rules | ruled lines between table parts | none, groups, rows, cols, all | overides border in both FireFox 3 and Safari 5 |
| cellspacing | spacing between cell border and table or adjoining cells | integer number of pixels or % of available space | – |
| cellpadding | spacing between cell border and cell contents | integer number of pixels or % of available space | – |
| bgcolor | background colour | a colour name or #xxxxxx value | deprecated – use CSS styling instead |
<table summary="summary of html table attribtues" align="center" width="80%"
border="4" frame="box" rules="all" cellspacing="3" cellpadding="5"
bgcolor="#EEEEEE" id="table1" title="table using html only">
<caption align="bottom">Example using html 4 TABLE attributes only</caption>
<thead>
...
A few things to note regarding the above example:
align attribute to (a) centre the
dashes in the otherwise empty cells and (b) position the caption at the bottom
of the table instead of the topSo how do we use CSS to replace the deprecated elements? Replacing bgcolor
is fairly obvious, in that CSS defines
the properties color and background-color that can apply to
any elements. Similarly, the HTML border and width
have CSS equivalents that define the appearance of the
borders and
width of elements,
either as a definite size (in a variety of units) or as a percentage of the
available horizontal space. For example, here is the exact same HTML of
Example 4 from the previous page, but styled
with CSS:
| Column Headings | ||
|---|---|---|
| Row # | Column 1 | Column 2 |
| 1 | Cell 1 | Cell 2 |
| 2 | Cell 3 | Cell 4 |
<table class="simpleTable">
<caption>Example table ... </caption>
<thead>
...
table.simpleTable {
border: 1px solid #000099;
width: 20em;
}
table.simpleTable th {
background-color: #FFCC99;
color: #000099;
}
table.simpleTable tbody th {
background-color: #FFFFCC;
}
Note that the only addition to the html markup is the class
attribute in the the opening <table> tag; everything
else remains the same.
The first CSS selector apples the specified border and width to any table of class simpleTable.
The second applies the specified background and forground colours to all
th cells contained within (that are descendants of) a table
of class simpleTable.
The third selector overides this background colour for any TH cells which occur in the body of the table.
If you look at the above example carefully, you will notice
white gaps around each TH cell; this is due to the default spacing between cells
which, in HTML, can be set using the cellspacing attribute. Using
CSS, we can either set this gap using the equivalent border-spacing
property, or we can eliminate it altogether by setting the border-collapse
property to collapse.
Another thing to note is that we set a border around the outside of the table
(equivalent to the HTML frame="box") using the CSS shorthand
property, border. We can apply borders in the same way to all sides
of all cells, or to specific sides of cells, or to all rows or specific rows, in
order to emulate the HTML rules attribute. In fact, CSS provides
a bewildering yet powerful array of options for defining just borders!
This means that we can actually define borders differently between, say, the
headings and body of the table, or between certain rows compared to other rows,
albeit at the expense of requiring more CSS selection rules.
Just as we have increased flexibility with borders and border spacing, so we
have much greater flexibility over spacing between those borders and the actual
contents of the cell. Thus, the HTML cellpadding attribute is
replaced by the general CSS
padding properties
that can be applied to a wide variety of elements. To illustrate, here is a table
summarising what we have discussed so far, styled using the corresponding CSS properties
and extending the selection rules from the previous example:
| HTML Attribute | CSS Property | Comments |
|---|---|---|
| width | width | Can apply to table, td, th – use % or specify units (px, em, etc.) |
| border | border, border-color, border-style, border-width, border-top, border-left, etc. | Use % or specify units (px, em, etc.) |
| frame | Apply to table and use % or specify units | |
| rules | Apply to thead, th, td, tr and use % or specify units | |
| cellspacing | border-collapse, border-spacing | Interacts with border-style and border-width |
| cellpadding | padding, padding-top, padding-left, etc. | Can apply to table, td, th – use % or specify units (px, em, etc.) |
<table class="simpleTable" id="extended">
<caption>Comparison of ... </caption>
<thead>
...
table#extended.simpleTable {
width: 90%;
border-collapse: collapse;
border-style: double;
border-width: 3px;
padding: 0;
}
table#extended.simpleTable th,
table#extended.simpleTable td {
border: 1px solid #000099;
padding: 5px 3px;
}
table#extended.simpleTable thead {
border-bottom: 2px solid #000099;
}
Using the id attribute allows us to replace and expand
on the existing simpleTable selection rules;
we could also have simply declared a new class of extendedTable. The
only other change in markup is the use of <td rowspan="3">
to vertically merge the “CSS Property” cells corresponding
to the “border”, “frame”, and “rules”
HTML attributes.
The first selector allows us to overide the width from simpleTable,
and sets a double-lined border around the whole table. It also eliminates
any space between this outer border and the cell borders, and between
the borders of adjacent cells within the table.
The second selector puts a single 1px-wide solid line around every cell within the table, and offsets the cell contents from the border by 5px top and bottom and 3px left and right. Note that it does this for both TH and TD cells, although we could have separated these into two separate rules to create different behaviour
The background and foreground colours in the table heading cells have not been overidden, so still apply here
The third selector makes the border between the heading and the body of the table 2px wide, in the same colour as the other borders
In the next page, we look at the issue of aligning tables, captions, and text.