HTML Tables
Post date: Sep 28, 2012 3:43:29 PM
HTML Tables are very useful tools for organizing information on your page.
<table>
......contents of table.......
</table>
The <table> tag begins the table, you place what you want inside, and end the table with the </table> tag. To begin adding contents to your table, you will need the <tr> and <td> tags. The <tr> stands for table row and the <td> stands for table data, which is what you will place after this tag. You end a table data section with the </td> tag and each table row with the </tr> tag. Here is a basic table with just one cell:
<table>
<tr>
<td>
This is my table!
</td>
</tr>
</table>
The table will turn out like this:
This is my table!
What? No border? Don't worry, to get the border we just add the border command to the <table> tag, like this:
<table border="2">
<tr>
<td>
This is my table!
</td>
</tr>
</table>
And now the table has the border around it.
This is my table!
Try this out on your page.
You can set the border to be as big or small as you like by changing the number inside the quote marks. If you set it to border="0", you will have a table with no border around it.
Of course, you probably want the table to have more than one cell in it. To add another cell on the same line, just use the <td> tags again, like this:
<table border="2">
<tr>
<td>
This is a cell
</td>
<td>
This is a cell
</td>
</tr>
</table>
And now we have two cells.
This is a cell
This is a cell
Try this out on your page.
Well, what if you want to go to the next line, or in table terms, the next row? To do this, you use a new set of table row tags, <tr> and </tr>:
<table border="2">
<tr>
<td>
This is a cell
</td>
<td>
This is a cell
</td>
</tr>
<tr>
<td>
This is the new row
</td>
<td>
I'm on the new row, too!
</td>
</tr>
</table>
Now there are two rows, each with two cells
This is a cell
This is the new row
This is a cell
I'm on the new row, too!
Try this out on your page.
There are a couple of commands you can add to the <table> tag to get more spacing between cells. Here they are:
1. cellspacing=" "
Use this command to add more space around each cell. Place a number inside the quote marks.
2. cellpadding=" "
Use this command to add more space inside each cell. Place a number inside the quote marks.
I'll show you an example of both of these now. Let's say we added the cellspacing command to our last table, and set it to equal 12, like this:
<table border="2" cellspacing="12">
Experiment with both of these commands, try a small and large cellspace and the same for cellpad -
How are they different?