Section 10.4. Tutorial: Styling a Table

10.4. Tutorial: Styling a Table

HTML is great for building tables, but you need CSS to give them style. As you can see in Section 10.1, it takes quite a bit of HTML to construct a simple table. Lucky for you, this book comes with a prebuilt HTML table for you to practice your CSS on. In this tutorial, you'll format the table's rows, columns , and cells , and give it an attractive font and background color .

To get started, download the tutorial files located on this book's companion Web site at www.sawmac.com/css/. Click the tutorial link and download the files. All the files are enclosed in a ZIP archive, so you need to unzip them first. (Go to the Web site for detailed instructions.) The files for this tutorial are in the chapter_10 table folder.

1. Launch a Web browser and open the file chapter_10 table table.html .

   This CosmoFarmer.com page contains a simple HTML table that rates this season 's indoor lawn mowers. The table has a caption, a row of table headers, and eight rows of data contained in table cells (Figure 10-9).

   Figure 10-9. Formatting a table with borders, background colors, and other CSS properties not only makes a drab HTML table (top) look great, but also makes the table's data easier to read (bottom).

   

2. Open table.html in a text editor .

   You'll start by creating a style that sets the table's width and text font.

   ---

   Note: There are already a couple of external style sheets attached to this page, but you'll add your new styles to an internal style sheet.

   ---

3. Click between the opening and closing < style > tags, and then add the following style :

    table {     width: 100%;     font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; } 

   
   

   Unless you set the width of a table, it grows and shrinks to fit the size of the content inside it. In this case, you've set a 100 percent width, so the table stretches to fit the entire width of its containing <div>. (In this case, it's the area of the page containing the headline "Feature: Indoor Mower Roundup" and the table itself.) Setting the font family in the <table> uses inheritance to give all of the tags inside the table the same font<caption>, table headers (<th>), table cells (<td>), and so on.

   Next you'll style the table's caption.

4. Add another style below the table style you just created :

    caption {     text-align: right;     font-size: .75em; } 

   
   

   A <caption> tag indicates what a table is about. In this case, it shouldn't be the focus of attention, so you've shrunk the text and moved it to the right edge, out of the way.

   When you read information across a table row, it's easy to lose track of which row you're looking at. Good visual guides are essential. Adding borders around the cells, which you'll do next, visually delineates the information.

5. Add the following group style to the internal style sheet :

    td,th {     font-size: .8em;     border: 1px solid #73afb7; } 

   
   

   This group selector formats the table header (<th>) and table cell (<td>) tags with smaller type and draws a border around each header and each cell. Browsers normally insert space between each cell , so at this point there are small gaps between the borders (Figure 10-10, circled). Between the gaps and the borders, the whole table looks too boxy. You'll fix that next.

6. Add the border-collapse property to the table style you created in step 3 so that it looks like this :

    table {    width: 100%;    font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;  border-collapse: collapse;  } 

   
   

   The border-collapse property removes the spacing between cells. It also merges borders that touch, which prevents thick, unattractive borders. Without border-collapse, the bottom border of a table header and the top border of the table cell would double up to make a 2-pixel border.

   If you preview the table now, you'll see the data's better organized visually, but the information in each cell looks a little cramped. Add some padding to fix that.

7. Add padding to the group selector you created in step 5 :

    td,th {     border: 1px solid #73afb7;  padding: 3px 5px 2px 5px;  font-size: .8em; } 

   
   

   While the top, table-header row stands out because of its boldface text, there are a few things you can do to make it stand out even more and approve its appearance.

8. Create a new style below the td, th style for formatting just table head cells :

    th {     text-align: left;     border-color: #14556b; } 

   
   

   This style's a perfect example of effective cascading. The group selector td, th defines common formatting properties between the two types of cells. By introducing this th -only style, you can further tweak the look of just the table headers. Notice that the basic border properties, such as line style and thickness , come from the group selector, but the th style overrides the border color. That's why you must put this style after the td,th style in your code. Otherwise, this new border color has no effect.

   The table headers still don't have enough oomph, and the table seems to recede into the background of the page. A background graphic can provide the necessary boost.

   Figure 10-10. A browser's normal display of a table inserts space between each cell (top). It also lets borders double up where cells touch. Setting the border-collapse property to collapse solves both problems (bottom).

   

9. Edit the th style by adding a background image, and changing the text color :

    th {  background: url(/books/2/835/1/html/2/images/th_bg.png) no-repeat left top;     color: white;  text-align: left;     border-color: #14556b; } 

   
   

   In this case, the graphic introduces a subtle top-down gradient while a white borderline at the top and left edges of the image contrasts nicely with the darker top and left borders around the cells, giving the cells a 3-D look.

   ---

   Tip: By the way, you could just as easily set the background color of these cells to achieve a similar effect.

   ---

   When tables have lots of data stuffed into many rows and columns, it's sometimes hard to quickly identify which data belongs to each row. One solution designers use is to alternate the color of every other row in a table. You create this effect with a class style that you apply to every other table row.

10. Add one last style to the Web page's internal style sheet :

     tr.alt td {     background: url(/books/2/835/1/html/2/images/td_bg.png) no-repeat left top; } 

    
    

    This selector places a background image into every table cell (<td> tag), but only when that <td> tag is nested inside a table row (<tr> tag) with a class of alt applied to it. So, next you have to apply the class to every other row for this style to have any effect.

11. In the page's HTML, look for the <tr> tag that precedes the <td> containing "Sampson Deluxe Apartment Mower." Add class="alt" to that <tr> tag, like so :

     <tr  class="alt"  > <td>Sampson Deluxe Apartment Mower</td> 

    
    

    You'll need to do this with every second row after this one as well. (Manually tagging each alternating row can be tedious , especially if you frequently add or reorder table rows. For an automated approach to striping table rows using a little JavaScript programming, see the Tip in Section 10.2.1.)

12. Repeat step 11 for the <tr> tags that precede table cells with the following text: Urban Mow-machine, The Lorem Ipsum Dolor 300 , and Grass Master V9 .

Preview the page in a Web browser to see the results. Your page should look like the bottom image in Figure 10-9. You'll also find the completed exercise in the chapter_10_finished table folder.