Acme Web Design Info
Build Your First Web Page with HTML
Contents
Related Articles
Tables
When someone talks about HTML tables, they most likely aren't talking about the kind you eat your cereal on. Below is an example of an HTML table:
| Artist |
Year |
Genre |
| Fleetwood Mac |
1979 |
Classic Rock |
| Pantera |
1991 |
Hard Rock |
| Gordon Lightfoot |
1967 |
Folk |
Below is the code that produced the table above. There are a few new items in the code, but don't worry, we will get to them next.
<table border="1" cellpadding="3">
<tr>
<th>Artist</th>
<th>Year</th>
<th>Genre</th>
</tr>
<tr>
<td>Fleetwood Mac</td>
<td>1979</td>
<td>Classic Rock</td>
</tr>
<tr>
<td>Pantera</td>
<td>1991</td>
<td>Hard Rock</td>
</tr>
<tr>
<td>Gordon Lightfoot</td>
<td>1967</td>
<td>Folk</td>
</tr>
</table> A table is basically a grid that organizes bits of information into categories using rows (across) and columns (up and down). If you have ever used a spreadsheet program like Excel™, you are familiar with the concept behind a table. For those of you to whom this concept is new, it is fairly easy to see the relationship of the different bits of information in the example above. The top row shows the type of information displayed in that column. For instance, all of the information under the column labeled "Artists" will contain an artist's name. Each area where a row and column intersect, such as the box that shows "Fleetwood Mac", is called a cell.
Tables are extremely useful for displaying all different kinds of information that you might want to put on the web, and creating them is very easy.
Let's take a look at the code above in smaller pieces. First, the <table> tag:
<table border="1" cellpadding="3"> Because HTML code so closely reflects the english language, you can probably tell what this tag is telling the browser without much explanation. However, this tag contains some elements we haven't seen before, called attributes.
Within the opening <table> tag in the code above there are two attributes: the border attribute and the cellpadding attribute. Both of these attributes have values. The value of the border attribute is 1, and the value of the cellpadding attribute is 3. Attributes tell the browser how to display the tag. For instance, a border attribute with a value of 1 means that the browser will give the table a 1 pixel border around all of the table cells. The cellpadding attribute tells the browser to give each cell in the table 3 pixels padding within the cell. A table with a cellpadding attribute of 0 would look like this:
| Artist |
Year |
Genre |
| Fleetwood Mac |
1979 |
Classic Rock |
| Pantera |
1991 |
Hard Rock |
| Gordon Lightfoot |
1967 |
Folk |
As you can see, there is no space around the text in each cell. This same table with a value of 0 for the border attribute would like like this:
| Artist |
Year |
Genre |
| Fleetwood Mac |
1979 |
Classic Rock |
| Pantera |
1991 |
Hard Rock |
| Gordon Lightfoot |
1967 |
Folk |
Not every tag uses the same attributes. For instance the <p> tag doesn't use a cellpadding attribute because there are no cells to pad!
The next section of code shows how to give the table the headings of Artist, Year, and Genre:
<tr>
<th>Artist</th>
<th>Year</th>
<th>Genre</th>
</tr> The <tr> tags tell the browser where to start and end a table row. Within the row, we add the <th> tags, which tell us when to begin and end a table heading. When we put text between these tags, it automatically formats the text to look differently than text in the other cells. That way it's easy to tell that the text belongs to a heading and not part of the information.
Take a deep breath... good. Onto the next section of code:
<tr>
<td>Fleetwood Mac</td>
<td>1979</td>
<td>Classic Rock</td>
</tr> You probably recognize the <tr> tag as a table row, so the only new thing to learn is the <td> tag. This tag creates a new table cell. Don't ask me what the td stands for, you'll have to figure that one out yourself. It could be Transitory Dispersion or Tricky Ducks. Tell me what you come up with.
Notice that there are 3 <td> tags, just as there were 3 <th> tags. Since a table is a grid, you should have the same amount of cells in every row. If you have more, there will be nowhere for it to go! This rule can be bent, but we will save an explanation of how for another tutorial.
The next chunk of code creates rows with cells for 2 more artists:
<tr>
<td>Pantera</td>
<td>1991</td>
<td>Hard Rock</td>
</tr>
<tr>
<td>Gordon Lightfoot</td>
<td>1967</td>
<td>Folk</td>
</tr> The final bit of code ends the table. Note that there you do not need to include attributes in ending tags:
There, that wasn't that bad, was it? To try tables out, copy the code below and paste it into your "hello.html" file between the <body> and </body> tags. Save the file and then open it in your browser by double-clicking.
Now that you have tables under your build, it's time to unleash the the ultimate HTML tag.
|
