CSS Cookbook, 2nd Edition

Chapter 8. Tables

Introduction

With CSS, web designers learned that they could forego the practice of manipulating HTML tables to hold designs together. Practices like cutting up an image to place the image “pieces” into separate table cells or nesting tables for web page layouts have now become outmoded. However, the use of tables still has its place.

Web developers use HTML tables to present tabular data, such as a calendar or scientific data, and therefore can use CSS to stylize those tables.

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

Setting the Cell Spacing

Problem

You want to adjust the space between the table border and the 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 ...