Mar 102015
 
Article HTML

In the HTML language, tables are the natural way to display information structured as as set of records composed of several fields.

But the default look used by browsers to render HTML tables is not very appealing.

This post explains how to improve the look of HTML tables with just a few CSS rules.

HTML Table Structure

A table in HTML is enclosed in the tags “<table>” and “</table>”.

In most cases, the table has a header with the column names, followed by the set of records that the table is made of. The table header is enclosed in the tags “<thead>” and “</thead>”, and the main body is enclosed in tags “<tbody>”, “</tbody>”.

In the table header there is a record enclosed in “<tr>”, “</tr>”. Inside the record are the column names, each enclosed in “<th>”, “</th”>

The table body is made of a set of records, Each record enclosed in “<tr>”, “</tr>”. A record contains a set of values, enclosed in “<td>”, “</td>”.

Example:

<table>
    <thead>
        <tr>
          <th>Nombre</th>
          <th>Apellidos</th>
          <th>ProfesiĆ³n</th>
          <th>Nacido</th>
          <th>Estado</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>Kaci</td><td>Matsumura</td>
          <td >Weight Training Instructor</td>
          <td>5 Nov 1984</td><td>Baja</td>
        </tr>
    </tbody>
</table>

A table in HTML format as in the above example is rendered by browsers as a series of rows and columns:

default rendering of a HTML table in Firefox

Adding CSS style to the table

To improve the presentation of the table, a CSS class “footable” is assigned to the <table> tag:

<table class="footable">

Then we start adding style rules for the “footable” class in the CSS stylesheet used by the page.

Let’s start by changing the font type and adding a table border:

.footable {
  width: 100%;
  font-family: 'trebuchet MS' , 'Lucida sans' , Arial;
  font-size: 14px;
  color: #444;

  border: solid #ccc 1px;
  border-collapse: separate;
  border-spacing: 0;
}

We can see that in these rules also the font size and a dark grey color have been applied to the table. The “widht: 100%;” rule forces the table width to the width of the container element.

The rules above make the table to be displayed a little better:

table with border

Next, we will be adding horizontal lines between rows, and vertical lines between columns. We will also be adding a background color to the table header. Finally, the column names in the header and the column values in the body will be displayed left-justified. To do this, the following style rules are added:

.footable > tbody > tr > td, .footable > thead > tr > th {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

.footable > thead > tr > th, .footable > thead > tr > td {
  background-color: #dce9f9;
}

table with background color

And finally, to achieve a professional look, the table corners can be slightly rounded:

.footable {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

and a ligth color gradient can be applied to the header background:

.footable > thead > tr > th {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
  background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image: linear-gradient(to bottom, #ebf3fc, #dce9f9);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  border-top: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

With these changes, the table looks like this:

table with rounded borders

As a final touch, we can make records to be highlighted when the cursor is placed on top of them, by changing the background color. A simple CSS rule can do the trick:

.footable > tbody > tr:hover {
  background: #fbf8e9;
}

we can check the resulting effect, by placing the cursor over a row in the table:

table with highlighted row

And that’s all!

 Posted by at 9:32 am

 Leave a Reply

(required)

(required)