Creating tables
Centering cell contents
To make our table look a bit better visually, let’s center our cell contents:
<table border="1" cellpadding="8" cellspacing="2" align="center"> <tr align="center"> <td>Pet Breed</td> <td>Pet Name</td> <td>Pet Age</td> </tr> <tr align="center"> <td>Mutt</td> <td>Spike</td> <td>9</td> </tr> <tr align="center"> <td>Cocker Spaniel</td> <td>Comet</td> <td>4</td> </tr> </table>
We set align="center" for each row. We could have completed this by setting align="center" for each table cell, but this method is far easier.
Adding a width
Currently, our table is conforming to the width of its content. Let’s make our table a bit larger by setting a specific fixed width measurement:
<table width="400" border="1" cellpadding="8" cellspacing="2" align="center">
…
</table>
We set width=400 inside the opening table tag.
Background color for our table rows
In order to set a background color for each table row, we have two choices:
- Set a background color on each table row using bgcolor
- Set a background color on each table row using an applied CSS class
We’ll use a CSS class, which make future revisions far easier to manage. Add the following CSS between the opening and closing <head> tags:
<head>
<style type="text/css" media="screen">
<!--
table#animals tr.first{
background-color:#3333ff;
}
table#animals tr.second{
background-color:#ff0000;
}
table#animals tr.third{
background-color:#093;
}
-->
</style>
</head>
We create three ID’s with CSS classes, appropriately named for which row they affect. Next, inside our table, apply the ID inside the opening table tag:
<table width="400" border="1" cellpadding="8" cellspacing="2" align="center" id="animals">
Finally, apply the classes as follows:
First row:
<tr align="center" class="first">
Second row:
<tr align="center" class="second">
Third row:
<tr align="center" class="third">
The CSS rules do this when read by the browser: “Look for table cells which have a class of first, second or third which reside inside a table with an ID of animals and apply the following styles.” Save your file and preview the results.
Applying classes to table rows
Changing Fonts and Colors
To make our text inside our cells a bit easier to read, we add the following code:
table#animals tr.first{
background-color:#14314f;
font-family:Verdana, Helvetica, sans-serif;
color:#c90;
font-weight:bold;
}
table#animals tr.second{
background-color:#ff0000;
font-family:Verdana, Helvetica, sans-serif;
color:#333;
font-weight:bold;
}
table#animals tr.third{
background-color:#093;
font-family:Verdana, Helvetica, sans-serif;
color:#030;
font-weight:bold;
}
We picked arbitrary colors which blend well. Do note we did not the HTML code. The beauty of CSS!
Nested tables
A nested table is in fact, a table inside another table. For example, we want to insert a new table inside the original, thus we add the following code:
<table width="400" border="1" cellpadding="8" cellspacing="2" align="center" id="animals">
<tr align="center" class="first">
<td>Pet Breed</td>
<td>Pet Name</td>
<td>Pet Age</td>
</tr>
<tr align="center" class="second">
<td>Mutt
<table border="1" width="50" cellpadding="5" cellspacing="0">
<tr>
<td>Putt</td>
</tr>
</table>
</td>
<td>Spike</td>
<td>9</td>
</tr>
<tr align="center" class="third">
<td>Cocker Spaniel</td>
<td>Comet</td>
<td>4</td>
</tr>
</table>
Let’s examine the code in greater detail:
- Before closing the table cell which contains Mutt, we insert another new table
- This new table has the same structure and formatting abilities of our original table
- The only difference is it’s nested inside our original table
- To end our nested table, we place the closing table tag right before the closing td tag which contains Mutt.
Save your file and preview the results.
We'll finish the article on the next page.