Styling TablesS2C Home « Styling Tables

HTML gives us a lot of tags to use when creating tabular data. CSS adds five properties to this list to give us even more control over the presentation of our tables. In this lesson we explore these properties which allow us to collapse and space our table borders and how to handle empty cells. We can decide where to put table captions and whether to use automatic or fixed table layouts.

Styling Tables CSS Properties

border-collapse

Specifies whether table borders are collapsed (collapsed border model), or separated (separated border model).

border-spacing

Specifies a distance between cells when the separated border model is used.

caption-side

Specifies a position for a table caption.

empty-cells

Specifies whether empty cells display borders and backgrounds when the separated border model is used.

table-layout

Specifies the table layout algorithm to use when laying out a table.

A Quick Word About Border Models

There are two types of border models:

  1. collapsed border model - Continuous borders throughout the table.
  2. separated border model - Borders around individual cells.

Most table styles can be achieved with either model. Be aware that some of the CSS properties, as mentioned above, are redundant when using the collapsed border model.

Lets see some examples of the CSS properties that allow us to style tables and see what they do.

Open up the file with Notepad we created and tested in Lesson 3: Styling Lists.

You saved the file to your computer in the C:\_CSSAdvanced folder as lesson_3_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for Styling Tables follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Advanced CSS - Lesson 4 - Styling Tables</title>

<style type="text/css">
/* Style Tables */
table, td {
  border: 1px solid red;
}
/* Fixed Table Layout and Collapsed */
#table1 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 60%;
}
/* Show Empty Cells */
#table2 {
  caption-side: bottom;
}
#table2 td {
  border: 1px solid black;
  background-color: orange;
  empty-cells: show;
}
/* Hide Empty Cells */
#table3 td {
  border: 1px solid black;
  background-color: orange;
  empty-cells: hide;
}
/* Separate the borders for this table */
#table4 {
  border-collapse: separate;
  border-spacing: 10px;
}
/* Collapse the borders for this table */
#table5 {
  border-collapse: collapse;
  border-spacing: 10px;
}</style>
</head>

<body>
<h1>Styling Tables: CSS Properties</h1>
<h2>The table-layout CSS property</h2>
<h3>With the default (auto) value</h3>
<table>
  <tr>
    <td>BananaBananaBananaBanana</td>
    <td>YellowYellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
<h3>With the fixed value and collapse Properties</h3>
<table id="table1">
  <tr>
    <td>BananaBananaBananaBanana</td>
    <td>YellowYellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
<h2>The empty-cells CSS property</h2>
<h3>Show Empty Cells Using a Bottom Caption</h3>
<table id="table2" border="1">
  <caption>Caption Name</caption>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td></td>
  </tr>
</table>
<h3>Hide Empty Cells and Caption Default</h3>
<table id="table3" border="1">
  <caption>Caption Name</caption>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td></td>
  </tr>
</table>
<h2>The border-spacing CSS property</h2>
<h3>With separated border model, border spacing will occur</h3>
<table id="table4">
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
<h3>With collapsed border model, border spacing IS IGNORED</h3>
<table id="table5">
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
</body>
</html>

Save the file in the C:\_CSSAdvanced folder as lesson_4_csspage.html and close the Notepad.

save styling tables

Viewing Our Saved File

From the C:\_CSSAdvanced folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

id="table1" uses percentages for row columns, so resize screen to see row overspill.

styling tables

Reviewing The Code

On this occasion I think the screenshot and the style comments are enough to explain the effects of each property.

One thing that isn't apparent is load times for tables. With table-layout set to auto, which is the default, table row widths are automatically worked out from the longest unbreakable content for each cell. This of course means all rows of a table need to be read before table generation, so is the slower of the options available.

With table-layout set to fixed table row widths are those specified for the table. Therefore each row of a table can be rendered as it is read, so this is the faster of the options available. This could be a factor when displaying large tables.

Lesson 4 Complete

As you can see added to the HTML table tags already covered, these CSS properties give us real flexibility in how we create and display our tables.

Related Tutorials

HTML4 Intermediate Tutorials- Lesson 6 - An Introduction To Tables

HTML4 Advanced Tutorials - Lesson 5 - A Final Trip To Tablesville

What's Next?

Navigation bars are so commonplace, that everyone recognizes them and the ease with which they allow visitors to explore a sites content. In this lesson we look at some ways to create navigation bars for easy access for our users.

CSS Reference

Styling Tables CSS Properties Content

The border-collapse CSS Property

The border-spacing CSS Property

The caption-side CSS Property

The empty-cells CSS Property

The table-layout CSS Property

go to home page Homepage go to top of page Top