How do I create tables?
Tables can be tricky, considering how many different things you can do with them. The thing to remember with tables is that they all follow the same rule, using three main elements: the table command, table data cells and table rows. Once you understand the order you must follow, it doesn't seem quite so complicated.
Starting OutFirst, for those of you who are unsure what a table is, let me show you what a standard table looks like.
|
|
|
|
|
|
This is a table, although a small one. Tables can be small, like this, or they can be huge, making the basic frameset for a website layout. But for the purposes of this tutorial, I think we'll stick to small.
In the above table, there are 4 data cells, and 2 rows. Cell 1 and 2 are in Row 1, and Cell 3 and 4 are in Row 2. Everything about a table can be defined, such as the color of each data cell, the border color and width, etc.
The starting code to a table would look like this.
<table><tr><td>
Now keep in mind, this is the bare essentials. You'll want to add certain properties to it to spice it up, such as:
<table border="3" bordercolor="bd0000" bgcolor="white">
<tr>
<td>
What you've basically ordered the webpage to do here is to create a table with a border of 3, specified the border color and background color, then ordered the page to start table row (tr) and start table data cell (td). If you wanted to define a height and width for the table, you would do it like this.
<table border="3" bordercolor="ffffff" bgcolor="white" height="200" width="400">
<tr>
<td>
You can define height and width in pixels or in percentages. For example, in the above, you can see that the width is set to 400 pixels, but if you'd prefer, you can set it to a portion of the page, like "80%".
There is also the matter of cellpadding and cellspacing. Cellspacing defines the amount of space between your data cells, and cellpadding defines the amount of space inside the cell from the content to the cell walls. To add cellpadding and cellspacing, the whole thing would look like this.
<table border="3" bordercolor="ffffff" bgcolor="white" height="200" width="400" cellpadding="5" cellspacing="5">
<tr>
<td>
Now lets look at the different elements of a table in easier to understand form.
| table | (the opening table tag) The table begins with this code, and ends with the /table code. |
| tr | (start table row) The data cells are contained in rows. This code comes immediately after the openning table tag. |
| td | (start table data cell) The data cell is where the content will be contained. You can have numerous cells per row, and numerous rows per table. |
| /td | (end table data cell) After your content in one cell is complete, you end the cell by using this tag. |
| /tr | (end table row) After your cells in one row are complete, and you're either ready to start the next row, or end your table, you would use this code to end that row. |
| /table | (end table) Once your table is complete, you use this to end the table completely. |
| border="0" | Defines the border width of the table. Set to 0, there will be no border. |
| bordercolor="COLOR" | Defines the border color of the table. |
| bgcolor="COLOR" | Defines the background color of the table. This code can be added to the table tag itself to affect the entire table, or to individual table data cells to define a different color per cell. |
| cellpadding | The spacing between the walls of the cell and the cell content. |
| cellspacing | The spacing between the data cells. |
| height | The height of the table, or used in a table data cell tag, the height of that data cell. You can define height in either pixels or percentage. |
| width | The width of the table, or used in a table data cell tag, the width of that data cell. You can define width in either pixels or percentage. |
| align="center" | You can define where the content in the table cell should be aligned. This can be changed to right or left, as well. |
| valign="top" | You can define where the content in the table should be aligned in terms of up, down or center. |
| rowspan="3" | A rowspan is a data cell that stretches out over several rows. |
| colspan="3" | A colspan is one data cell that stretches out over several columns. |
Okay, so lets review. A basic table, from start to finish, would look like this.
<table border="3" bordercolor="bd0000" bgcolor="white" height="200" width="400" cellpadding="5" cellspacing="5">
<tr>
<td>
Content here
</td>
</tr>
</table>
ColspansA colspan is one data cell that stretches out over other data cells. The table below has a colspan.
| This is the colspan cell! | ||
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 |
| Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 |
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell3 |
To add a colspan, you would add it to the data cell that you want stretched. The trick is that that cell now becomes the entire row, so it's important to remember to end the row after that data cell is complete and move on to the next row, like this.
<table>
<tr>
<td colspan="3">
COLSPAN CELL
</td></tr><tr><td>
1st ROW, 1st CELL
</td><td>
1st ROW, 2nd CELL
</td><td>
1st ROW, 3rd CELL
</td></tr></table>
A colspan doesn't have to be at the top of the table, it can also be displayed like this.
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 |
| This is the colspan cell! | ||
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell3 |
RowspansA rowspan is one data cell that stretches out over table rows. The table below has a rowspan.
| This is the rowspan cell | ROW 1, CELL 1 | ROW 1, CELL 2 | ROW 1, CELL 3 |
| ROW 2, CELL 1 | ROW 2, CELL 2 | ROW 2, CELL 3 | |
| ROW 3, CELL 1 | ROW 3, CELL 2 | ROW 3, CELL 3 |
It may look confusing, but basically, when you use a rowspan, you write the data cell for the first row that it occurs in, then never write that data cell again. It will appear in that space for as many rows as you've ordered it to span across. The code for the table above looks something like this.
<table>
<td rowspan="3">This is the rowspan cell</td>
<td>ROW 1, CELL 1</td>
<td>ROW 1, CELL 2</td>
<td>ROW 1, CELL 3</td>
</tr><tr>
<td>ROW 2, CELL 1</td>
<td>ROW 2, CELL 2</td>
<td>ROW 2, CELL 3</td></tr><tr>
<td>ROW 3, CELL 1</td>
<td>ROW 3, CELL 2</td>
<td>ROW 3, CELL 3</td></tr></table>
Combining Rowspans & ColspansTake a look at the table below.
| This rowspan spans over 4 rows ROW 1, 2, 3 & 4 CELL 1 |
This colspan spans over 3 columns ROW 1 CELL 2, 3 & 4 | ||
| ROW 2 CELL 2 |
ROW 2 CELL 3 |
ROW 2 CELL 4 | |
| ROW 3 CELL 2 |
ROW 3 CELL 3 |
ROW 3 CELL 4 | |
| ROW 4 CELL 2 |
ROW 4 CELL 3 |
ROW 4 CELL 4 | |
The code for the above table looks something like this.
<table>
<td rowspan="4">
This rowspan spans over 4 rows
<br>
ROW 1, 2, 3 & 4
<br>
CELL 1
</td>
<td colspan="3">
This colspan spans over 3 columns
<br>
ROW 1
<br>
CELL 2, 3 & 4
</td></tr><tr>
<td>ROW 2
<br>
CELL 2</td>
<td>ROW 2
<br>
CELL 3</td>
<td>ROW 2
<br>
CELL 4</td></tr><tr>
<td>ROW 3
<br>
CELL 2</td>
<td>ROW 3
<br>
CELL 3</td>
<td>ROW 3
<br>
CELL 4</td></tr><tr>
<td>ROW 4
<br>
CELL 2</td>
<td>ROW 4
<br>
CELL 3</td>
<td>ROW 4
<br>
CELL 4</td></tr></table>
Adding a Background ImageYou can add a background image to a table by using this code.
<table style="background-image:url(URL OF IMAGE)">
The result will be something like this.
| ROW 1, CELL 1 | ROW 1, CELL 2 |
| ROW 2, CELL 1 | ROW 2, CELL 2 |
You can also define an image just to appear in a particular table data cell by using this code for the data cell.
<td style="background-image:url(URL OF IMAGE)">
The result will be something like this.
| ROW 1, CELL 1 | ROW 1, CELL 2 |
| ROW 2, CELL 1 | ROW 2, CELL 2 |
Using Tables in LayoutsTake a look at the table below.
Now you can see how tables can create the basic layout template for a website. This is a very simple table, with only 2 rows.. one for the colspan data cell, and one for the two side cells and the main content area.