HTML Tutorial: A Crash Course In Tables
It amazes me how many people proclaim to be programmers but they can’t even write simple HTML code. Sooo, this post is in response to all the would be web developers out there who don’t really know what in the hell they’re doing when it comes to tables.
FAQ: Why is it important to properly format and nest your tables?
Different browsers behave differently for code that is written improperly. To help ensure your table displays the way you intended it to always use correct nesting and ensure you have matching tags.
A Simple Table
<table>
<tr>
<td>hello there</td>
<td>bye for now</td>
</tr>
</table>
Simple Table (Visual)
| hello there | bye for now |
This table has one row and two columns. A table always starts and ends with a <table> and </table> tag. If you forget to put the end </table> tag and start another table immediately following you’ll sometimes find that the browser will close your first table for you — but not always! It’s not safe to assume that your browser is smart enough to fix your HTML mistakes for you.
Now a table isn’t limited to a number of rows or columns but I find many people don’t know how to span rows or columns appropriately.
Spanning A Column
<table> <tr> <td>hello there</td> <td>bye for now</td> </tr> <tr> <td colspan="2">huh?</td> </tr> </table>
Spanning A Column (Visual)
| hello there | bye for now |
| huh? | |
When you span a column the cell takes up the space of both columns. A lot of time I see people put in extra <td> and </td> tags even when they have a colspan set to the appropriate number. The colspan always equals the number of columns you want to span (if that isn’t obvious enough). There’s never any need to put a colspan of 1 because that’s the same thing as having a <td> and </td> without a colspan attribute.
Spanning A Row
<table>
<tr>
<td rowspan="2">Hey there</td>
<td>bye for now</td>
</tr>
<tr>
<td>huh?</td>
</tr>
</table>
Spanning A Row (Visual)
| Hey there | bye for now |
| huh? |
This does the opposite thing that a colspan does. Your table cells are now merged down instead of merged across. When you do a row span there is no need to include a <td> and </td> for the row you’re merging over. If you do you’ll end up with strange results and a misshappen table. The cell that has the rowspan attribute on it is always the one that merges into the cell that would have been beneath it.
Table Attributes
Here’s a list of attributes you can assign to the table tags. Ironically enough I’ve decided to put these in a table.
| Attribute | Description | Example |
| Border | this sets an outline around the tables | <table border=”1″> |
| Cell Padding | this puts space around the content inside of a table cell | <table cellpadding=”2″> |
| Cell Spacing | this puts space between the td cells | <table cellpadding=”0″> |
| Width | set the exact or relative width of the entire table or cell | <td width=”20%”> |
| Height | set the exact or relative height of the entire table or cell | <td height=”22″> |
| Align | sets the text alignment inside of the cell (left, right, middle, justify) | <td align=”right”> |
| Valign | sets the vertical alignment of the td cell (top, bottom, middle, abstop, absmiddle, absbottom, baseline) | <td valign=”middle”> |
| Class | used to setup a style on the cell | <td class=”darkblue”> |
| Background | set the background color of the table | <table background=”#000000″> |
| Foreground | set the text color in the table | <td foreground=”#FFFFFF”> |
