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
Colspan
:
| 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:
| Row 1 Cell 1 | Row 1 Cell 2 |
| Column 1 | Column 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.
