Making A Table
We’re talking tables for holding data not the dinner table. Tables were once used in designing webpage layout, but no more, now that's the role of CSS. Still it's 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:
| Beagle | Chihuahua |
| Terrier | Collie |
Add some space inside a cell with a CSS command in the td tag:
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
The table can be made larger with a CSS command in the opening table tag:
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
Color can be added to a cell too with a CSS command:
Result:
| Beagle | Chihuahua |
| Terrier | Collie |
And that folks is how a table is put together.
