HTML Tables


Tables are important for a neat presentation of labels and numbers in a way we know from phone books, schedules and financial statements.

bulletA 2 by 2 table

The skeleton or structure of a simple 2x2 table has form

   <caption><b>Price Table</b></caption>

The tags used in the skeleton and their meaning can be summarized as follows: table - creates a HTML table, tr - creates a table row, th - devides the row in header cells, td - devides the regular table cells. The main difference between the last two elements is that the text in th is centered and bold, while the text in td is left aligned.

bulletTable attributes

The common attribute is alignment (align - left, center, right). The attribute width is common for all the above elements but tr, the row. Rows spread over the whole table. The table width can be specified in percentages. The cellspacing and cellpadding attributes of the table determine the overall features of the text in table cells. The border attribute determines how thick the bordes of cells are. Rows and cells may specify their own vertical alignment of the text (valign - top, middle, bottom). Cells admit height specification and the default text wrapping can be turned off using nowrap.

bulletIrregular tables

Irregular tables are created by means of the rowspan and colspan attributes of th and td tags. You can think of writing a table like building a shelf unit. The table element determines how thick the frame and shelves are going to be. Once you seat the shelves in, divide the table space horizontally by row elements. Then nest in the shelf separators. Set rowspan and colspan to stretch the separator over several rows or columns. For example, the following element creates a box in the table spanning over two rows and columns.

</td rowspan=2 colspan=2> Text in a box </td>


Web Design Group HTML Help and Web Authoring Reference, Web Design Group , 2006

Markup Validation Service, World Wide Web Consortium , 2006