HTML Tables

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.

<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>

 

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.

<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>

 

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.

<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>

 

And now we will change the cellpadding of the table and remove the cellspacing from the previous example.