The HTML table’s root element is the table tag:
<table>
</table>
Within that tag, you will add rows and columns to achieve your desired layout. The ‘tr’ tag designates a table row, while the ‘td’ tag designates a column. A simple one row, one column table would look like this:
<table>
<tr>
<td>This is a table</td>
</tr>
</table>
A table with one row and two columns looks like this:
<table>
<tr>
<td>This is the first column</td>
<td>This is the second column</td>
</tr>
</table>
You can use the ‘height’ and ‘width’ attributes to set your table cells’ sizes, or leave them as is (in which case they will be just large enough to hold whatever content you put in them). The ‘cellpadding’ and ‘cellspacing’ attributes give your table contents a bit of space between them; cellpadding adds empty space between the cell wall and its contents, while cellspacing adds empty space in between cell walls. You can only set these two attributes at the table level, meaning that all cells in a given table will have the same padding/spacing setting.
The ‘border’ attribute is also set at the table level and defines the size and color of the table’s gridlines. The default color attribute gives you a light gray, 3-D border around each cell that looks like this:
<table border="1">
<tr>
<td>This is the first column</td>
<td>This is the second column</td>
</tr>
</table>
Want to have a header row with one column, while the other rows have two? You can use the 'colspan' attribute to indicate how many columns a particular cell should span. The code will look something like this...
<table border="1">
<tr>
<td colspan="2">Header row</td>
</tr>
<tr>
<td>This is the first column</td>
<td>This is the second column</td>
</tr>
</table>
... and will display the following table:
Header row | |
This is the first column | This is the second column |
You can use the 'rowspan' attribute to achieve the opposite effect (a column that spans multiple rows).