Tables



Tables are extremely useful to use throughout your webpage, especially if you have a lot of text. An example of what a table would look like is this:

Countries of the World
Europe Asia Africa
Italy Russia Egypt
Spain Mongolia Congo
France China Kenya

Tables are just for better organization and can be used to show comparisons with data. The table tag always goes inside the body tag. There are four main tags that go into a table. Here they are:

Tags of Tables
<table> Starts the table.
<tr> Signifies one row in the table.
<td> Signifies one cell in on row in the table.
<caption> Signifies the title of the table (the text above it).

There are some properties of the table that I will cover right now. I will cover three properties, the border, cell spacing, and the cell padding. Remeber how the color and size attributes of text go inside the font tag? The border, cell spacing, and cell padding similarly go inside the table tag.


Border

The border property of a table is to put a border around the table. To customize the border property, just do this:

<table border="5"></table>

This would make a table with a border of 5. You can adjust the number after cellpadding= to any number that will fit you standards.


If you dont want to have a table without lines like this:

Countries of the World
Europe Asia Africa
Italy Russia Egypt
Spain Mongolia Congo
France China Kenya

you should probably use the border property. The border is the same as with pictures and graphics. Its just that this time, it doesn't go around a picture but a table.


Cell Padding

Cell padding is the amount of area that is inside each cell. If you just want some room in each cell, use the cell padding property. The cell padding property works the same as the border property. It goes in the same place. The code would look like this:

<table cellpadding="5"></table>

The number after the cellpadding= is amount of cellpadding there will be. Customize the number in any way to fit your needs.


Cell Spacing

Cell spacing is the space in between the cells in the table. This property works very similarly as the border and cellpadding properties. The code would look like this:

<table cellspacing="5"></table>

The number after cellspacing= is the amount of cellspacing there will be. Customize the number to fit your wants.


TR and TD

Remeber that the <tr> and <td> tags go inside the <table> tag. Also remeber that the <td> tag goes in side the <tr> tag. The following just shows an example of a table and the ***'s just stand for the code of each cell:

<table>

<tr>

<td>***</td>

</tr>

</table>

Do you remeber the countries of the world table before that looks like this:

Countries of the World
Europe Asia Africa
Italy Russia Egypt
Spain Mongolia Congo
France China Kenya

The code is actually very simple. Take a look:

<table border="1" cellpadding="5">

<caption>Countries of the World</caption>

<tr>

<td>Europe</td>

<td>Asia</td>

<td>Africa</td>

</tr>

<tr>

<td>Italy</td>

<td>Russia</td>

<td>Egypt</td>

</tr>

<tr>

<td>Spain</td>

<td>Mongolia</td>

<td>Congo</td>

</tr>

<tr>

<td>France</td>

<td>China</td>

<td>Kenya</td>

</tr>

</table>

Now wasn't that easy? We will continue tables in our next chapter. We will cover tables and images and other cool things. So come on in to

Tables, Continued