Html Class 8: Learn The Basic Table In This Class

Making A Table

We’re talking here tables for holding data not the dinner table. Tables are useful in laying out the design of web pages so it’s well worth the time to learn how to make them. A table starts and ends with the table tag:
<table></table> Between the opening and closing table tags go a couple of other tags, the tr tag: <tr></tr>
It stands for“table row”and will make up one row across the table. Between the tr tags are found the td tags:
<td></td>
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>Result 1</td> <td>Result 2</td> </tr> <tr> <td>Result 3</td> <td>Result 4</td> </tr> </table>
Putting aborder attribute in the table tag will help you see how the table and cells are formed, setting the border attribute to"0"will remove the borders altogether. 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:

Result 1	Result 2
Result 3	Result 4

Remember the style attribute from class 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:10px;">Hello </td>
We can make a table larger by putting the style attribute into the opening table tag and giving it a CSS width command:
<table border="1" style="width:300px;"> <tr> <td>Result 1</td> <td>Result 2</td> </tr> <tr> <td>Result 3</td> <td>Result 4</td> </tr></table>
Result:

Result 1	Result 2
Result 3	Result 4

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:
<td style="vertical-align:top;"> Hello </td>
Let's change the color of a cell with CSS background command:
<td style="background:silver;">Hello</td>
And that folks is how a table is put together. By now you have all the tags you need to put together a website, I hope you enjoyed the lessons enough to buy my book, HTML Made Easy with a free bonus CSS tutorial.