HTML Tables - TriCker'S HoUse

Tables

HTML Tables

Making A Table

We’re talking here tables for web pages for holding data not the dinner table. Tables are useful for laying out the design of web pages so it’s good 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 stands for table row:

<tr></tr>

It stands for “table row” and it will make up one row across the table. Between the tr tags, td tags are written as following:

<td></td>

The td stands for “table data” it forms one box called a “cell” which contains content of the page 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>
</table>

HTML Table video scenario:

Putting a border attribute in the table tag will help you to 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 or columns in each row. The stuff between the opening and closing td tags is what will be in each cell and it will show in the web page. 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 Trick 4? Put it into the opening td tags with a CSS padding command to add some space around the content of the cells, now there will some space between the content and cell borders as following:

<td style="padding:10px;">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, here because of width:300px; the table will large as 300px width:

<table border="1" style="width:300px;">

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. It will vertically align the content in the cells:

<td style="vertical-align:top;">Chihuahua</td>

Result: