Creating Tables with HTML

Creating tables with HTML requires the use of three main table-related tag pairs:

• <table></table> surrounds all the table-related code and defines it as part of a table; within this tag pair are table rows and table data cells.

• <tr></tr> defines a table row and contains table data cells.

• <td></td> defines a table data cell. Cell content resides between the opening and closing table data tags, which are ultimately contained within a table row.

For instance, you would use the following code to create a basic table with three rows containing three columns each:

 <table border="1"> <tr>        <td>row 1, cell 1</td>        <td>row 1, cell 2</td>        <td>row 1, cell 3</td> </tr> <tr>        <td>row 2, cell 1</td>        <td>row 2, cell 2</td>        <td>row 2, cell 3</td> </tr> <tr>        <td>row 3, cell 1</td>        <td>row 3, cell 2</td>        <td>row 3, cell 3</td> </tr> </table> 

The table, table row, and table data tags each have numerous attributes which can be controlled via a stylesheet, including alignment, border size and colors, cell background colors and font attributes, and much moreyou'll learn about these in Appendix B. However, two attributes that are typically part of the HTML code are the colspan and rowspan attributes because these attributes are table-specific in that their usage depends on the content you are presenting.

The colspan attribute defines the number of columns spanned by a cell, whereas the rowspan attribute defines the number of rows spanned by a cell. You can see an example of each of these items in action in the listing at the end of this appendix.