Lesson 8: Tables
Making A Table
We’re talking here tables for holding data not the dinner table. Tables at one time were used in designing the layout of webpages. That's no longer the case but it's still worth the time to learn how to make them.
A table starts and ends with the table tag:
Between the opening and closing table tags go a couple of other tags, the tr tag:
It stands for “table row” and will make up one row across the table. Between the tr tags are found the td tags:
The td stands for “table data” it forms one box called a “cell” which contains content seen on the web page such as text or graphics.
Here’s how the table code is put together:
<table border="1">
<tr><td>Beagle</td>
<td>Chihuahua</td>
</tr>
<tr>
<td>Terrier</td>
<td>Collie</td>
</tr>
The border attribute in the table tag puts a border around the cells.
Take a close look at the code, this table will have 2 rows with 2 cells in each row. The stuff between the opening and closing td tags is what will be in each cell. Note that each row is finished off with the closing tr tag. Finally the table is finished by ending it with the closing table tag.
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
Remember the style attribute from lesson 4? Put it into the opening td tags with a CSS padding command to add some space around the content of the cells:
<td style="padding:20px;">Beagle</td>
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
We can make a table larger by putting the style attribute into the opening table tag and giving it a CSS width command:
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
Add the a CSS vertical-align command to a td tag and the content of that cell will start at the top of the cell:
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
Let's change the color of a cell with CSS background command:
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
And that folks is how a table is put together.
By now you have all the tags you need to make a simple website, I hope you enjoyed the lessons enough to buy my book, HTML Made Easy with a free bonus CSS tutorial.
