HTML Tables
Tables may seem difficult at first, but after working through this lesson you'll see how they aren't too bad. The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Tables are a handy way to create a site's layout, but it does take some getting used to. Here's how to make a table.
HTML Code:
<table border="1">
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Basic Table:
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
Content is placed within tables cells. A table cell is defined by <td> and </td>.The border attribute defines how wide the table's border will be.
Spanning Multiple Rows and Cells
Use rowspan to span multiple rows and colspan to span multiple columns.
Note: if you would like to place headers at the top of your columns, use the <th> tag as shown below. By default these headers are bold to set them apart from the rest of your table's content.
HTML Code:
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Colspan and Rowspan:
| Column 1 | Column 2 | Column 3 |
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 |
| Row 3 Cell 1 |
Cell Padding and Spacing
With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within. Color has been added to the table to emphasize these attributes.
HTML Code:
<table border="1" cellspacing="10"
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Cellspacing and Padding:
| Column 1 | Column 2 |
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
And now we will change the cellpadding of the table and remove the cellspacing from the previous example.
HTML Code:
<table border="1" cellpadding="10"
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Cell Pads:
| Column 1 | Column 2 |
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
The value you specify for padding and spacing is interpreted by the browser as a pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels.
Tips
- Tables can be given backgrounds using the bgcolor attribute. Also, be aware
that backgrounds are not limited to the <table> tag, you can also give separate backgrounds to <td> and <tr> tags.
- The <tr> tag must always be placed before the <td> tag.
- The examples above show good form for organizing the table code. It may seem a bit complicated, but if you keep everything organized
it will be much easier to manage down the road.
| 
