In this lesson we are going to learn about tables. Tables are one of the most important things in web site building. Just about all websites use tables but you don't see them very often because they're hidden. Tables are used to format the text and images.
Your first table
To create a table you need to use the <table> tag. Here is what it look like:
<table>
</table>
As you can see they're just like normal tags but you have not got a table yet. You need to make table rows that contain table cells which hold your data. The <tr> tag is for a row and the <td> tag is for a table data cell. Here is a row with 3 cells in it:
| 1 | 2 | 3 |
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
It is important to put something in a td otherwise it won't show up. Also note that I said border=1. If you want the table border to show up in some browsers you have to do this. You can change the 1 to something higher if you want a thicker border. In the following example we're going to create 2 rows each with 2 cells:
| 1 | 2 |
| 1 | 2 |
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>Width and height
If you want to change the width or height of the cells then you use the width and height attributes. Theses can be used for the table or the tr or the td. Here's an example of making the table 100 pixels high and making each of the top cells 100 pixels wide:
| 1 | 2 |
| 1 | 2 |
<table border="1" height="100">
<tr>
<td width="100">1</td>
<td width="100">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Look at how the cells in the second row are the same width as the ones above them but don't have the width=100 attribute. Widths and heights are not only measured in pixels but can also be set in %. By simply putting a % after the 100 we make the table 100% of the width of the page.
Colspan and Rowspan
What if we wanted 1 cell in the top row and 2 cells directly underneath that cell? If you just make 1 cell in the top row and 2 in the bottom row it doesn't work. You need to use colspan:
| 1 | |
| 1 | 2 |
<table border="1">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
As you can see the top row spans 2 columns. You can do the same with rows like this:
| 1 | 2 |
| 1 |
<table border="1">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
We just made the first cell span across 2 rows.
Text alignment
By default text in a table will be on the left side of the cell in the middle. Sometimes you'll want to position the text in the center of the cell or make at the top. We us the align attribute for horizontal text alignment and the valign attribute for vertical alignment. Here are examples of what you can get:
| left | center | right | top | middle | bottom |
<table border="1" height="100">
<tr>
<td width="100" align="left">left</td>
<td width="100" align="center">center</td>
<td width="100" align="right">right</td>
<td width="100" valign="top">top</td>
<td width="100" valign="middle">middle</td>
<td width="100" valign="bottom">bottom</td>
</tr>
</table>Cellpadding and cellspacing
In each cell you'll notice that the text is not right up against the border of the cell. The space between the text and the border is called padding and we can increase or decrease it with the cellpadding attribute:
| 1 |
<table border="1" cellpadding="0">
<tr>
<td>1</td>
</tr>
</table>| 1 |
<table border="1" cellpadding="9">
<tr>
<td>1</td>
</tr>
</table>
You can also increase or decrease the space between cells with the cellspacing attribute:
| 1 | 2 |
<table border="1" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>| 1 | 2 |
<table border="1" cellspacing="9">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>Colors
You can change the border color of a table or cell with the bordercolor attribute:
| 1 |
<table border="1" bordercolor="red">
<tr>
<td>1</td>
</tr>
</table>
You can also change the background color of a table or a cell:
| 1 |
<table border="1" bgcolor="red">
<tr>
<td>1</td>
</tr>
</table>
