Tables

When you have information that you need in a table, there are several tags you need to learn. All these tags work together to make a table.

Table Tag

We are going to learn how to make a table that looks like this:

Boys Girls
10 15


The table tag is like most of the other tags we have learned so far. It has an opening and closing tag, and it marks the beginning and end of the table.

<table>

</table>


There are two other tags that make up part of the table - <tr> and <td>.

<Tr> Tag

The tr tag stands for "table row." Its actually this yellow part of the table:

Boys Girls
10 15


This the whole row across, not one square. We use the <tr> to show where we want that row to begin and end.

<table>
<tr>
</tr>
</table>
When we are ready to put the information in the table, we use the <td> tag.

<Td> Tag

The td tag stands for "table data." Its this yellow part of the table:

Boys Girls
10 15


The most important thing to remember about a table is that it moves from left to right, and not up to down. You have to remember this when you are putting your information in the table. We have to work with the row, which moves across and not down. To get the first row of the table we've been using for an example, this is what the code looks like.

<table>
<tr>
<td>Boys</td>
<td>Girls</td>
</tr>
</table>


It looks like this:

Boys Girls


We need to add a second row, or <tr>, to get the next part of the table in there. So the final code looks like this:

<table>
<tr>
<td>Boys</td>
<td>Girls</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
</tr>
</table>


When you try this code for yourself, you may notice there is no border around it. Like the image tag we learned in Intermediate Web Divas, you can use a border in a table.

<table border="1">
<tr>
<td>Boys</td>
<td>Girls</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
</tr>
</table>


Boys Girls
10 15


This is the basics of using a table. There are many more things you can do with tables, so be sure to check back for another lesson!