Basic HTML – HTML Tables
February 28, 2011
Tables are often misused to lay out a page. Before CSS positioning, that was a good solution, but is no longer necessary, and with the better alternative, a bad idea. It creates quite a mess out of the code, which causes problems with spiders and search engines and makes updating a page much harder. However, using tables to display tabular date – which is what they are meant for – is perfectly fine.
This is the code for the very basic table:
<table> <tr> <td>Column 1, Row 1, Cell 1</td> <td>Column 2, Row 1, Cell 2</td> <td>Column 3, Row 1, Cell 3</td> </tr> <tr> <td>Column 1, Row 2, Cell 1</td> <td>Column 2, Row 2, Cell 2</td> <td>Column 3, Row 2, Cell 3</td> </tr> <tr> <td>Column 1, Row 3, Cell 1</td> <td>Column 2, Row 3, Cell 2</td> <td>Column 3, Row 3, Cell 3</td> </tr> </table> |
The tags are mostly self-explanatory. ‘table’ is of course for ‘table’, ‘tr’ stands for ‘table row’ and ‘td’ is for the cell (don’t know why they didn’t just use ‘tc’).
The default of a table is border-setting 0 – so adding a border makes the table appear more defined. Ideally, that would be done in the CSS, but for the purpose of this HTML Table tutorial, we’ll add it inline:
<table border="1"> |
and now, our table looks more like a table: Table with Borders
There are other html tags available to be used in tables
<caption> - Table Caption <th> - Table Header (cell) <thead> - Table Header content (row) <tbody> - Table Body <tfoot> - Table Footer <colgroup> - Used to define and format a group of columns <colspan> - Merges multiple cells across columns <rowspan> - Merges multiple cells across rows |
This code:
<table border="2"> <caption>This is the Table Caption</caption> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tr> <td colspan="2">Column 1 and 2, Row 1, Cell 1 and 2</td> <td>Column 3, Row 1, Cell 3</td> </tr> <tr> <td>Column 1, Row 2, Cell 1</td> <td>Column 2, Row 2, Cell 2</td> <td rowspan="3">Column 3, Rows 2, 3, 4, Cell 3</td> </tr> <tr> <td>Column 1, Row 3, Cell 1</td> <td>Column 2, Row 3, Cell 2</td> </tr> <tr> <td>Column 1, Row 4, Cell 1</td> <td>Column 2, Row 4, Cell 2</td> </tr> <tr> <td>Column 1, Row 5, Cell 1</td> <td>Column 2, Row 5, Cell 2</td> <td>Column 3, Row 5, Cell 3</td> </tr> </table> |
creates a more complex table.
