Tables
The Table element encloses a table grid. The cells may be separated by border lines, using the Border attribute. A number of pixels value may be applied, such as '3' pixels, and a value of '0' indicates no border and no space for a border (which is different from the effect of not including the attribute). Alternatively, the tag may simply include the word 'border', which can be considered the same as a border value of '1':
<TABLE> no borders, space for them remains <TABLE BORDER="0"> no borders, no space for them <TABLE BORDER> same as 'border=1' using 'dummy' <TABLE BORDER="10"> very thick border lines
The space between cells can be adjusted. The Cellspacing attribute takes a numeric value that states how much space there is between cells (including their borders). If a value of zero is used, the border lines overlap each other. It has a default value of '2':
<TABLE BORDER> | <TABLE BORDER CELLSPACING=8> |
|
|
The space between the cell contents and the borders of the cell can also be adjusted using the Cellpadding attribute, which takes a numeric value. The default value is '1':
<TABLE BORDER> | <TABLE BORDER CELLPADDING=8>
|
|
|
The width and height of the table are often left under the control of the browser, which composes the table within the restrictions of the available window area. The Width attribute may be used to 'encourage' the browser to take into account the wishes of the document author. This attribute takes a numeric value that dictates how many pixels wide the table should be, or what percentage of the available screen width it should occupy. A pure number is interpreted as a pixel value. A percentage symbol indicates a proportion of the screen dimensions.
<TABLE BORDER WIDTH=800>
The table may have a title, which is contained within a Caption element. This element is placed within the Table element but before the elements described later. The content is by default displayed above the main table grid, but it may be explicitly displayed below the table using the Align attribute, with a value of 'bottom':
<TABLE>
<CAPTION ALIGN="bottom">Title Below</CAPTION> ...
</TABLE>
The table structure is row-oriented, which means that the grid is built by first defining each row and then separating each cell within a row. Each row of data is enclosed in a Table Row element (Tr), and each cell is enclosed in either a Table Header element (Th) or a Table Data element (Td), the only difference being one of emphasis – the Th element content is usually displayed in bold (and centred). Th and Td elements may be mixed within the same row, possibly to create side headings:
<TR><TH>Colour<TH>Status<TH>Level</TR> <TR><TH>Red<TD>Danger<TD>1</TR> <TR><TH>Green<TD>Normal<TD>3</TR>
As shown above, a cell may directly contain text. But it may also contain any document body elements, including a complete embedded table. The Line Break element is particularly useful for formatting text within the cell. If a cell is empty, no border lines are drawn.
The width and height of a cell can be 'suggested' in the Td and Th elements, using the Width and Height attributes. The browser is not however required to obey these instructions.
The content of individual cells, or all the cells in a row, may be aligned horizontally and vertically in various ways. The default horizontal alignment is 'left' in Td elements, and 'center' in Th elements, as shown in the example above. The default vertical alignment is 'middle' for both types of cell. The Align attribute allows horizontal alignment to be set to 'left', 'right' or 'center'. The Valign attribute allows vertical alignment to be set to 'top', 'middle', 'bottom' or 'baseline' (where all cells in the row are horizontally aligned by last line, after the cell with the most lines is aligned to 'top'). An alignment set in the Tr element provides a default for all cells in the row, but individual cells may override this setting.
By default each cell occupies an area dissected by one column and one row, forming a simple position within the table grid, but may be expanded across or down using the Colspan and Rowspan attributes. These attributes take numeric values, and have implied values of '1' (zero is not a legal option). Higher values than '1' stretch the cell over adjoining areas:
<TR><TH>Colour<TH>Status<TH>Level</TR> <TR><TH>Red<TD>Danger<TD>1</TR> <TR><TH>Blue<TD COLSPAN=2>No Priority<TD>2</TR> <TR><TH>Brown</TH><!-- NO CELL --><TD>3</TD></TR>
Note that the final row in the example above has only two cell elements, containing 'Brown' and '3', because the middle cell has effectively been replaced by the cell above it.
The content of a cell is normally formatted by the browser as it is composed to fit the available screen width. The Nowrap attribute may be used in the Th and Td elements to prevent lines being split. This is another example of a minimized attribute with a single possible value, in this case 'nowrap':
<TD NOWRAP>This line must not be broken</TD>
When presenting tables on paper, it is useful to be able to identify header rows, so that the pagination engine can repeat the headings at the top of each page. Similarly, footer rows can be repeated at the base of each page containing a reference to a footnote. When presenting to a scrollable window, a large table body may be collapsed to just a few scrollable rows, sandwiched between fixed, permanently visible headers and footers. The new elements Table Head (Thead), Table Body (Tbody) and Table Footer (Tfoot) enclose rows of each kind.
Only the Tbody element is required, and for backward compatibility both its start-tag and end-tag may be absent (its presence then being implied). The Thead and Tfoot elements are optional because not all tables have rows that fall into these categories. When present, the Thead element must occur first, as would be expected, but the Tfoot element must also precede the body. The reason for this unusual arrangement is that it allows the rendering package to collect the content of a footer and then place it at the base of each page, without needing to process the table twice:
<TABLE> <THEAD>...</THEAD> <TFOOT>...</TFOOT> <TBODY>...</TBODY> </TABLE>
In addition to the usual array of core, event and language attributes, these three elements also contain the Align and Valign attributes, so introducing another level of cell content alignment overriding, above the row level. In a table containing mostly currency values, it may be suitable to state that all header cells are centred, that all body cells are aligned on full-point, and that all footer cells are left-aligned.
It is not uncommon to find tables where all the cells in a particular column are aligned in the same way. For example, a price table in a catalogue may have two columns, the first being a description of each product, with the text left-aligned, and the second being the price of that item, aligned on a decimal point. Using the table model described in the previous section, each Td element would need to contain an Align attribute:
<TR> <TD ALIGN="left">Red coat</TD> <TD ALIGN="char" char=".">12.4</TD> </TR> <TR> <TD ALIGN="left">Green coat</TD> <TD ALIGN="char" CHAR=".">12.6</TD> </TR>
Clearly, when many rows are involved, this is very time-consuming to produce, and also wasteful of memory and bandwidth. It is now possible to define a style for all cells in a column, using the Column element (Col). In the example below, the first Col element specifies an alignment of 'left' for the first column, and the second Col element specifies an alignment on the decimal point for the second column, so removing the need to specify these alignments in individual entries:
<COL ALIGN="left"> <COL ALIGN="char" char="."> <TR> <TD>Red coat</TD> <TD>12.4</TD> </TR> <TR> <TD>Green coat</TD> <TD>12.6</TD> </TR> ...
For horizontal alignments, the Col element overrides the Tr element, though individual Entry element styles are still the most significant:
As indicated above, the first Col element is deemed to apply to the first column, the second applies to the next column, and so on. When several columns in a group have the same settings, only one Col element is required, and the Span attribute is used to specify how many columns are affected. The total number of columns in a table can be calculated by adding together the span values (when not present, a value of '1' is assumed). In the following example, the table has six columns (and it is assumed that if a Col element is used at all, then all table columns must be covered by these elements):
<COL ALIGN="left"> <COL SPAN="3" ALIGN="right"> <COL SPAN="2" ALIGN="center">
This element can also be used to predefine the width of each column, using the Width attribute, so that Web browsers and pagination engines can start building the table presentation before reading the entire table. In the following example, the column widths are '30', '40', '40', '40', '50' and '50':
<COL WIDTH="30" ALIGN="left"> <COL WIDTH="40" SPAN="3" ALIGN="right"> <COL WIDTH="50" SPAN="2" ALIGN="center">
The Width values may also be proportional, so that the table width can expand to the area available, and each column is assigned a 'fair' proportion of that width, based on the values in the Width attribute.
A value followed by an asterisk character denotes a proportional value. To make the column widths defined above keep their relative sizes but allow additional space to be exploited, it is only necessary to append the asterisk to the existing values, though the smaller values '3*', '4*', '4*', '4*', '5*' and '5*' would produce identical results. This approach is not yet universally supported.
When a large number of consecutive Col elements share some attribute values, but not others, a new and more efficient technique may be employed using the Column Group element (Colgroup). This element may enclose a number of Col elements, and has exactly the same attributes, which when used are deemed to apply to each embedded Col element that does not itself contain an explicit definition. In this example, both columns in the group are given a width of 55 pixels:
<COLGROUP WIDTH="55"> <COL ALIGN="left"> <COL SPAN="3" ALIGN="right"> </COLGROUP> <COLGROUP WIDTH="50" SPAN="2" ALIGN="center"> </COLGROUP>
The other major benefit of column groups is that they define an identifiable vertical component of a table, consisting of several columns and regardless of any degree of commonality in style between these columns. This defined object may be the target of a hypertext link, or the trigger for an event, such as Onclick. A Colgroup element does not even have to contain Col elements if their presence is not appropriate. In this case, it has its own Span attribute:
<COLGROUP SPAN="3" WIDTH="35"></COLGROUP> <COLGROUP SPAN="2" WIDTH="20"></COLGROUP>
It is not possible to mix Colgroup and Col elements. If just one Colgroup is needed, then all definitions must be applied using it. Another way to look at this restriction is to imagine that Col elements must always be contained within a Colgroup element; but, when there are only Col elements present, they are enclosed within an implied column group.