CSS : Tables - [6] Introduction

Print designers use grids to create compelling layouts. Using such a structure makes it easy to place elements into all sorts of layouts, from the front page of a newspaper to a movie poster to the cover of this book. It also makes the designs visually more appealing.

When print designers began gravitating toward the Web, they found the lack of structure frustrating. At most, designers initially could only float images to the left or right until Netscape invented the center tag. In fact, it wasn't until HTML tables were used as grids that the web-design industry took off. Even still, available tools had their limitations and as such designers overused tables to structure entire web pages.

With CSS-enabled designs, web developers learned they could forego the practice of manipulating tables to hold designs. However, they also learned that styling tabular data, such as a calendar, could still be challenging.

This chapter teaches you how to make your tables look better by stylizing table headers, setting borders for a table and for its cells, and reducing gaps with images in table cells. The sample design at the end of the chapter takes you through the steps required to stylize a calendar.

CSS : Tables - [6.1] Setting the Cell Spacing

Problem

You want to change the space between the table border and cell borders.

Solution

Use the cellspacing table attribute:

<table cellspacing="15">

 <tr>

   <th colspan="2">

    General Demographic Characteristics of Tallahassee, FL

   </th>

 </tr>

 <tr>

   <th>

   </th>

   <th>

    Estimate

   </th>

 </tr>

 <tr>

   <td>

    Total population

   </td>

   <td>

    272,091

   </td>

 </tr>

</table>

Discussion

The CSS 2.1 specification describes a standard mechanism to manipulate the cellspacing table attribute through the use of the border-spacing property when the border-collapse value is set to separate:

border-collapse: separate; 

border-spacing: 15px;

However, implementation of this part of the specification isn't visible in Internet Explorer for Windows. (It does work in Netscape Navigator 7+.) Using the cellspacing attribute is currently the best solution that works in Internet Explorer for Windows, Netscape Navigator, Safari, and Opera browsers.

CSS : Tables - [6.2] Setting the Borders and Cell Padding

Problem

You want to set the borders and the amount of space within table cells to create a stronger visual display than the default rendering of a table, as in Figure 6-1, for example.

Figure 6-1. Borders and padding applied to the table and table cells

Solution

Use the padding property to address the amount of space between the content in the cell and the edges of the cell. Use the border property to set the borders on both the table and its cells:

table {

 border-collapse: collapse; 

 border: 5px solid #444;

}

td {

 padding: 4px;

}

th {

 color: white;

 background-color: black;

}

td, th+th {

 border: 5px solid #666;

}

td+td {

 border: 5px solid #ccc;

 text-align: center;

}

td#winner {

 border: 7px dotted #999;

}

Discussion

There are two border models for HTML tables: collapse and separate. At the time of writing, the collapse model is more widely implemented by browsers and thus more used by designers.

All browsers today default to the collapse model. As the CSS standard doesn't specify that behavior, you should explicitly set the collapse model in your style sheets lest a future browser not have the same defaults.

The collapse model for a table is set by default. Just in case a browser might start using another border model, you can specifically set the border model using the border-collapse property set to collapse:

table {

 border-collapse: collapse;

}

The table element's border attribute specifies borders for the table and its enclosing cells. You can specify CSS's border property through a separate border thickness for the table and individual cells.

If you do apply a border to a cell that runs counter to a previous CSS rule, you must follow these four CSS specification rules for conflict resolution:

• If border-style is set to hidden, all other border styles are concealed.
• If border-style is set to none, any other border style wins.
• Unless a cell has border-style set to hidden or has border-style set to none, a thicker border overrides the narrower borders. If adjoining cells have the same width, the style of the border will be determined in the following order: double, solid, dashed, dotted, ridge, outset, groove, inset.
• If adjoining cells have a different color while possessing the same style and width, the border color will be determined in the following order: cell, row, row group, column, column group, and then table.

The other border model is separate, in which every cell contains its own borders and can be styled independently of other cell borders. Within the separate model, the border-spacing property is used to set the horizontal and vertical space respectively between cells:

table#runoffdata {

 border-collapse: separate;

 border-spacing: 4px 4px;

}

If the border-collapse property is set to separate, then any styles set for rows, columns, or groups of table cells aren't applied. Also, styles for table cells that don't contain content can be displayed or hidden using the empty-cells property with the value of show or hide, respectively.

While the separate border model gives more control to web developers, as of this writing separate is supported only in Mozilla and Netscape 6+, not in Internet Explorer. Therefore most web designers stick to the collapse model.

CSS : Tables - [6.3] Setting the Styles Within Table Cells

Problem

You want to stylize links within a table cell to make them appear visually different from the rest of the page.

Solution

Use a descendant selector (sometimes referred to as a contextual selector) to manipulate the styles for content in a table cell:

td a {

 display: block;

 background-color: #333;

 color: white;

 text-decoration: none;

 padding: 4px;

}

Discussion

By using the type and descendent selectors—the td a in the CSS rule—to apply the styles, you reduce the amount of markup needed to perfect your designs and you reduce the document's file sizes. The style affects only the a elements within the table cells, td.

If you need more control over the design of the content within a table cell, use a class selector:

<td class="navText">

 <a href="/">Home</a>

</td>

You then can apply the CSS rules to the cell's content through a combination of class and descendant selectors:

td.navText { 

 font-size: x-small;

}

CSS : Tables - [6.4] Removing Gaps from Table Cells with Images

Problem

You want to get rid of space in a table cell that contains only an image. You want to go from Figure 6-2 to Figure 6-3.

Figure 6-2. A gap appearing below an image in a table cell

Figure 6-3. Displaying an image in a table cell as a block-level element

Solution

Set the image to be displayed as a block-level element:

td img {

 display: block;

}

Discussion

We set the element to block content because the whitespace at the bottom of the image occurs because the image element is supposed to contain inline content, possibly text. The browser puts the image on the baseline used for text content even if there is no text in the content. This baseline isn't at the bottom of the cell because some letters (e.g., g, p, q, and y) have descenders that hang below that baseline (see Figure 6-4).

Figure 6-4. The lowercase letters g, p, q, and y

CSS : Tables - [6.5] Setting Styles for Table Header Elements

Problem

You want to modify the default bold look of table header cells to grab the viewer's attention; Figure 6-5 shows a table with traditional table headers, and Figure 6-6 shows a stylized version of the same table.

Figure 6-5. The table as it appears before styles are applied to the table headers

Figure 6-6. Styles applied to the table headers

Solution

Use the th element selector to stylize the table header:

th {

 text-align: left;

 padding: 1em 1.5em 0.1em 0.5em;

 font-family: Arial, Helvetica, Verdana, sans-serif;

 font-size: .9em;

 color: white;

 background-color: blue;

 border-right: 2px solid blue;

}

For tables with multiple rows of th elements that require different styles, use a class selector to differentiate the rows:

.secondrow th {

/* Use a lighter shade of blue in the background */

 background-color: #009;

}

Put the appropriate rows into that class:

<tr>

 <th colspan="4">

 Table 1. General Demographic Characteristics

 </th>

</tr>

<tr class="secondrow">

 <th>

  &nbsp;

 </th>

 <th>

  Estimate

 </th>

 <th>

CSS : Tables - [6.6] Sample Design: An Elegant Calendar

Great for organization, calendars enable us to schedule lunches, remember birthdays, and plan honeymoons. As designers, we can think of all those months, dates, and appointments as tabular data.

If you display your calendar as an HTML table, chances are the table looks rather plain, and if it contains numerous events then it probably looks somewhat convoluted as well. In this design, we use CSS to create a calendar that is more legible than what you could create using vanilla HTML.

First, take a look at Figure 6-7, which shows the markup for the calendar without styles.

Figure 6-7. The calendar without styles

Next, look at the markup itself to see how it's set up. As you learned in Section 6.1, the cellspacing attribute needs to be set in the table element:

<table cellspacing="0">

Now, set the first three rows of table headers, th, containing the year, month, and days, in their own rows within their own table headers:

 <tr>

  <th colspan="7" id="year">

   <a href="year.html?previous">&lt;</a> 2000 <a 

href="year.html?next">&gt;</a>

  </th>

 </tr>

 <tr>

  <th colspan="7" id="month">

   <a href="month.html?previous">&lt;</a> October <a 

href="month.html?next">&gt;</a>

  </th>

 </tr>

  <tr id="days">

  <th>Sunday</th>

  <th>Monday</th>

  <th>Tuesday</th>

  <th>Wednesday</th>

  <th>Thursday</th>

  <th>Friday </th>

  <th>Saturday</th>

 </tr>

The first date is October 1, which in this calendar falls on a Sunday. To signify that Sundays and Saturdays are days of the weekend, use a class selector in the td element.

In each date of the month there is a link on the date itself (which would, in theory, take the user to a detailed listing of the day) as well as a link to add more events to the day. Wrap these two links in a div element so that when new events are added there is a clear division between the two sections in the table cell:

<tr> 

 <td class="weekend"> 

  <div>

   <a href="1.html" class="date">1</a>

   <a href="add.html" class="addevent">+</a> 

  </div>

 </td>

The next date, October 2, has an event listed. The event is marked up as a link and placed below the div containing the date and the addevent links (because October 2 is a weekday, the weekend class isn't applied to the td element):

  <td>

   <div>

    <a href="2.html" class="date">2</a>

    <a href="add.html" class="addevent">+</a> 

   </div>

   <a href="16.html?id=1" class="event">Regular City

 Commission meeting agenda</a> 

  </td>

The rest of the markup follows a similar structure:

  <td>

   <div>

    <a href="3.html" class="date">3</a> 

    <a href="add.html" class="addevent">+</a> 

   </div>

  </td>

  <td>

    <div> 

     <a href="4.html" class="date">4</a>

     <a href="add.html" class="addevent">+</a> 

    </div>

  </td>

  <td>

   <div>

    <a href="5.html" class="date">5</a>

    <a href="add.html" class="addevent">+</a> 

   </div>

   <a href="5.html?id=1" class="event">Dad's birthday</a>

  </td>

  <td>

    <div> 

     <a href="6.html" class="date">6</a>

     <a href="add.html" class="addevent">+</a> 

    </div>

  </td>

  <td class="weekend">