Pretty HTML Table with CSS

Without Ajax framework, but with just a JavaScript function to alternate colors, this gives HTML tables the look of that of magazine or professional website.

The demonstration is done both on a complete structure and simplified structure (see article in Table in HTML 4 and 5 for more detail). The record is exactly the same.

HTML code for a table

The caption tag is an option as the thead and tbody tags.

<table>
<thead>
  <caption></caption>
</thead>
<tbody>
  <tr>
    <th></th>
      ...three cells..
  </tr>
  <tr>
    <td></td><td></td><td></td>
       ...four row of three cells each...
  </tr>
</tbody>
</table>

Note the use of <th> header tag in top row They may be used also on first cell of each row.

The CSS code

It applies broadly to all tables in the page.

table {
    border-collapse:collapse;
    width:100%;
    max-width:700px;
    min-width:400px;
    text-align:center;
}

caption {
    caption-side:bottom;
    font-weight:bold;
    font-style:italic;
    margin:4px;
}

table,th, td {
    border: 1px solid gray;
}

th, td {
    height: 24px;
    padding:4px;
    vertical-align:middle;
}

th {
    background-image:url(table-shaded.png);
}

.rowtitle {
    font-weight:bold;
}

The attributes border-collapse and border allow to make a border of uniform width.

The caption-side attribute puts the label below the table. You can omit the attribute to keep it on top.

The descriptor .rowtitle is used for row headers in the second table, for the demonstration. One may also use <th> tags as in the first one. But in this case the hight must be the same for headers and other cells.

text-align and vertical-align center labels. We can align them differently, with stylesheets.

Other attributes are for presentation options, including maximum size and minimum size, the row heights.

The JavaScript function

The alternation of colors for the row of the tables is obtained by a JavaScript function. It allow to easily edit the rows of the table without having to worry about the colors.

It applies broadly to all rows in all tables in the page.

function colourize() {
  var dnl = document.getElementsByTagName("tr");
  for(i = 0; i < dnl.length; i++) {
    if((Math.round(i / 2) * 2) == ((i / 2) * 2) )
    dnl.item(i).style.background="#F0F0F0";
  } 
}
window.onload = colourize;

A DOMNodeList object containing all <tr> tag is created, and the color attribute is changed for all the tags whose index is odd.

Pretty HTML table demonstration

Simple code

It is a table tag with <tr> rows and <td> or <th> cells.

It uses <th> tags for the headers of columns.

Usage	Fast	Safe
Desktop	C++	Pascal
Server side	PHP	Java
Client side	JavaScript	CSS
System	C	Go

Full HTML code

It adds the caption, thead, and tbody tags.
The choice of background images and colors is independent of the structure of the table.

Caption : Label of the table

Usage	Fast	Safe
Desktop	C++	Pascal
Server side	PHP	Java
Client side	JavaScript	CSS
System	C	Go

Alternating background of rows without JavaScript

Possible in CSS for IE9 and other browsers. We add the following selector to the tr property:

table tr:nth-child(odd) td {
  background-color: #F0F0F0;
}

or with a class name:

.pretty tr:nth-child(odd) td {
  background-color: #F0F0F0;
} 

Pseudo-classes with the form :name are not supported by older versions of browsers.