Tables
Another way to organize content is in a table. Tables use a variety of tags that are nested inside each other. Those tags include:
- <table> - wrapped around all content for a table
- <tr> - wrapped around all content for each table row
- <th> - table header - data is auto bolded and centered
- <td> - table cell - data in a table without formatting
When creating a table, it is important to make sure that each row has the same number of columns (td or th tags). Here is a sample of a simple table:
<![CDATA[<table>
<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
</table>]]>
and here is the table it produces:
| Col 1 | Col 2 | Col 3 |
|---|
| cell 1 | cell 2 | cell 3 |
Table appearances can be altered using css. Applying the border property to all table, tr and td/th tags will produce a border of your color, size and style around all cells. Also, using the width and height styles, programmers can specify the height of rows, the width of columns, or the width/height of the entire table. The padding style (set to a number of pixels) will create more space in a cell between the content and the borders and the vertical-align property has values of bottom|middle|top to vertically align text within a cell. Practicing and experimenting with these styles will be of great benefit in the long run.
Finally, table cells can be merged using the colspan and rowspan properties. This takes careful planning. For example, the following code:
<![CDATA[<table style='border:1px solid white; width:200px'>
<tr><th style='border:1px solid white'colspan='2'>Table title</th></tr>
<tr><td style='border:1px solid white'>col 1</td><td style='border:1px solid white'>col 2</td></tr>
</table>]]>
produces the following output: