Euro PC Solutions Blog

HTML / CSS – Tables

No, we still haven’t finished with XHTML (or with CSS either !)

Just to reassure you though : we’ve seen most of it and we’re nearly finished
There are still a few elements to see though. They might not be the most important elements, maybe not the most used either; however I am willing to bet that you’ll need them sooner or later.

Among these elements that I want to show you before we finish (already ?! o_0), are tables.
I want bother drawing one; I suppose everybody knows what a table looks like.

… In fact I will.
Ladies, gentlemen, here is … a table !

Okay, that is quite a simple table. Of course, we’ll learn to make more complicated tables, so that you can do everything you want.
Yet again, we’ll be using CSS to make the tables look nicer. The good news : there is no new CSS to learn, you nearly know everything !

A table is made using XHTML tags. Let’s start by seeing the basic structure …

A Simple Table

The first tag to know : <table> </table>. This is the tag that allows us to indicate the beginning and end of a table.
This tag is a block, so it needs to be placed outside of paragraphs.

Example :

Code : HTML

<p>This is a paragraph before the table</p>

<table>
     Put the content of the table here
</table>

<p>This is a paragraph after the table</p>

Right, and what do we put in the table ?

Now, get ready to receive an avalanche of new tags
To start slowly, here are 2 very important tags :

• <tr> </tr> : indicates the beginning and end of a line in the table
• <td> </td> : indicates the beginning and end of one cell in the table

In XHTML, a table is made line by line. In each line (<tr>), we insert the content of each cell (<td>).
As a diagram, the table I showed earlier looks like this :

We have one line tag (<tr>) that surrounds each of the cells (<td>).
For example, if I wanted to make a table with 2 lines, and 3 cells par line (3 columns), I would write this :

Code : HTML

<table>
     <tr>
          <td>Laura</td>
          <td>21 yrs</td>
          <td>England</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>33 yrs</td>
          <td>U.S.A</td>
     </tr>
</table>

Is that what you call a table?
All the text follows in a line, and there aren’t even any borders !

Yes, a table without CSS is rather empty. However, adding borders is very easy : you already know the CSS we need to use !

Code : CSS

td {  /* all the cells in a table ... */
     border: 1px solid black;  /* have a border of 1px */
}

We still haven’t quite got the effect we wanted. In effect, we only wanted one border between 2 cells, which isn’t the case here.

Luckily, there is a CSS property that is specific to tables : border-collapse, which makes the borders merge into each other.
This property can take 2 values :

• collapse : the borders are merged, which is the effect we want.
• separate : the borders are separated (default value).

Code : CSS

table {
     border-collapse: collapse;  /* the borders will be merged (looks nicer) */
}

td {
     border: 1px solid black;
}

Further in the chapter, we’ll see more CSS options. We’ll also try to make the tables look a bit prettier; I admit that they’re ugly

The Table Header

Now we have what we wanted, we’ll add a header line into the table. In our example, the titles are Name, Age and Country.
The header is created with a <tr> like all the other lines, but the cells are a <th> this time instead of <td> !

Code : HTML

<table>
     <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
     </tr>
     <tr>
          <td>Laura</td>
          <td>21 yrs</td>
          <td>England</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>33 yrs</td>
          <td>U.S.A</td>
     </tr>
</table>

The header line is easily recognizable for 2 reasons :

• the cells are <th> instead of <td>
• it’s the first line of the table (it’s a bit idiotic, but I had to precise it

As the name of the cells is a bit different for the header, we need to think about updating the CSS to tell it to apply styles on the cells AND the header :

Code : CSS

table {
     border-collapse: collapse;
}

td, th {  /* put a border on the cells AND the header */
     border: 1px solid black;
}

As you can see, your browser has put the text of the header in bold. All the browsers generally do that, but if you want you can change it with CSS, change the background colour of the cells, the font, the border etc…

We’ll see more advanced CSS examples on tables a bit later.

The Table’s Title

Normally, all tables must have a title. The title allows the visitor to quickly find out about the content of the table.
In our example we have a list of people … yes, and ? What does it represent ? Without a title, you see, we are a bit lost

Luckily, there is <caption> (what would we do without it ! ^^)
This tag is placed right at the beginning of a table, just before the header. This tag indicates the title of the table :

Code : HTML

<table>
     <caption>Passengers on flight 377</caption>

     <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
     </tr>
     <tr>
          <td>Laura</td>
          <td>21 yrs</td>
          <td>England</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>33 yrs</td>
          <td>U.S.A</td>
     </tr>
</table>

Now things are a bit clearer !

More Elaborated Tables

We’ve learnt how to make small, simple tables. These small tables are enough in most scenarios, but you might need a more … complicated table.
We will be seeing 2 different methods :

• With big tables, it is possible to split them into 3 parts :
  • Header
  • Body
  • Footer
• With some tables, you may need to merge several cells together

Let’s start by the first point, we have a big table, and we want to split it into several parts.

Splitting A Big Table

If your table is big enough, you have every interest to split it into several parts. For this there are XHTML tags that allow us to define the 3 zones of the table :

• Header (at the top) : is defined with the tags <thead></thead>
• Body (in the centre) : is defined with the tags <tbody></tbody>
• Footer (at the bottom) : is defined with the tags <tfoot></tfoot>

What should we put in the footer ? Generally, if it’s a big table, recopy the cells of the header. It allows visitors to see what the information is even when they’re at the bottom of the table.

As a diagram, a table in 3 parts is like this :

The only tricky bit is getting the tags in the correct order :

1. <thead>
2. <tfoot>
3. <tbody>

In the code, first we add the header, then the footer, and finally the body. The browser will show everything in the right place, don’t worry

Here’s the code to write a table in 3 parts :

Code : HTML

<table>
     <caption>Passengers on flight 377</caption>

     <thead>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </thead>

     <tfoot>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </tfoot>

     <tbody>
          <tr>
               <td>Laura</td>
               <td>21 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Michelle</td>
               <td>26 yrs</td>
               <td>U.S.A.</td>
          </tr>
          <tr>
               <td>Carmen</td>
               <td>32 yrs</td>
               <td>Spain</td>
          </tr>
          <tr>
               <td>Francois</td>
               <td>43 yrs</td>
               <td>France</td>
          </tr>
          <tr>
               <td>John</td>
               <td>29 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Jonathan</td>
               <td>13 yrs</td>
               <td>Australia</td>
          </tr>
          <tr>
               <td>Xu</td>
               <td>19 yrs</td>
               <td>China</td>
          </tr>
     </tbody>
</table>

You don’t have to use these 3 tags (thead, tfoot, tbody) on a table. In fact, only use them if the table is big enough and they help to organise things
For small tables just use the method we used at the beginning of the chapter.

Merging Cells

On some complicated tables, you’ll need to merge several cells together.
An example ? Look, this table lists films and says who they’re for :

With the last film, as you can see, the cells are merged : there’s only one. That’s exactly the effect we need.

To merge cells, we need to add an attribute to the <td> tag. There are 2 types of merging :

• Column merging : is what I’ve done in the example. We use the attribute colspan
• Line merging : here, two lines will be merged. The merging is vertical. The attribute is rowspan

As you know, we need to give a value to the attribute (whether it’s colspan or rowspan).
The value is the number of cells you want to merge. In the example I merged 2 cells. One in the column for children ? and one in the column for teenagers ? So we need to write :
<td colspan=2>

Which means : this cell is 2 cells merged together.
It is possible to merge more than that together (3, 4, 5 … as many as you want).

Here’s the XHTML code to make the example from earlier :

Code : HTML

<table>
     <tr>
          <th>Title of the film</th>
          <th>For children ?</th>
          <th>For teenagers ?</th>
     </tr>
     <tr>
          <td>Hostel</td>
          <td>No, too violent</td>
          <td>Yes</td>
     </tr>
     <tr>
          <td>Winnie The Pooh</td>
          <td>Yes</td>
          <td>Not violent enough...</td>
     </tr>
     <tr>
          <td>Happy Feet</td>
          <td colspan="2">For the whole family !</td>
     </tr>
</table>

I haven’t coloured the text to avoid complicating the XHTML code. However you’re good enough to do it yourselves now, you just need to add class

And how do we use rowspan ?

That complicates thing a bit. For our example we will inverse the order of the table : instead of putting the films to the left, we’ll put them at the top.

So if we do that, the colspan is no longer of any use, so we’ll need a rowspan.
Take the time to read and understand this example properly, it’s worth it

Code : HTML

<table>
     <tr>
          <th>Title of the film</th>
          <td>Hostel</td>
          <td>Winnie The Pooh</td>
          <td>Happy Feet</td>
     </tr>
     <tr>
          <th>For children ?</th>
          <td>No, too violent</td>
          <td>Yes</td>
          <td rowspan="2">For the whole family !</td>
     </tr>
     <tr>
          <th>For teenagers ?/th>
          <td>Yes</td>
          <td>Not violent enough...</td>
     </tr>
</table>

Don’t get everything mixed up ! If this example is confusing you, just forget it for the moment, it’s not vital.
You can always come back to it later, when you’re more used to manipulating tables. There’s no shame in leaving an example until later

Right, there still isn’t a lot of design in our tables. As promised, we will see in the last part of this chapter how to make our tables look nicer

And With A Bit Of CSS …

The good news : you already know most of the CSS properties needed for tables. A few examples :

• to change the borders of cells we use border
• to change the colour of a cell, we use background-color
• to change the image of a cell, we use background-image
• We can also change the size (font-size), and the font (font-family) of the text in cells
• We can change the width of a table (width), and centre it (margin-auto because it’s a block)
• We can centre the text in the cells (text-align: center), change the inner margins of cells (padding) etc…

So, you already know most of the CSS properties
The main thing is to think of using them, and use them on the correct tags. For example, if you add a black background colour to the <table> tag, the whole table will be black. However if you put the background colour on the <th> tags, only the header cells will be black.

Using The CSS Properties We Know

Do you remember the table in 3 parts we saw earlier ? Let’s see the code again :

Code : HTML

<table>
     <caption>Passengers on flight 377</caption>

     <thead>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </thead>

     <tfoot>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </tfoot>

     <tbody>
          <tr>
               <td>Laura</td>
               <td>21 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Michelle</td>
               <td>26 yrs</td>
               <td>U.S.A</td>
          </tr>
          <tr>
               <td>Carmen</td>
               <td>32 yrs</td>
               <td>Spain</td>
          </tr>
          <tr>
               <td>Francois</td>
               <td>43 yrs</td>
               <td>France</td>
          </tr>
          <tr>
               <td>John</td>
               <td>29 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Jonathan</td>
               <td>13 yrs</td>
               <td>Australia</td>
          </tr>
          <tr>
               <td>Xu</td>
               <td>19 yrs</td>
               <td>China</td>
          </tr>
     </tbody>
</table>

And, using only the CSS properties we already know, we’ll make the table look a lot better :

Code : CSS

caption {  /* the title of the table */
     margin: auto;  /* align the table's title in the centre */
     font-family: Arial, Times, "Times New Roman", serif;
     font-weight: bold;
     font-size: 1.2em;
     color: #009900;
     margin-bottom: 20px;  /* to stop the title from being too close to the table */
}

table {  /* the table itself */
     margin: auto;  /* centre the table */
     border: 4px outset green;  /* green border with 3D effect (outset) */
     border-collapse: collapse;  /* Merge the borders */
}

th {  /* The header cells */
     background-color: #006600;
     color: white;
     font-size: 1.1em;
     font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td {  /* The normal cells */
     border: 1px solid black;
     font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
     text-align: center;  /* all the text in the cells will be centred */
     padding: 5px;  /* A small inner margin to stop the text touching the borders */
}

You’ve got to admit that it’s not that hard

On table, in particular, you’ve got every interest to work on the CSS. In effect, with and without the CSS, it’s day and night.
You’ve just got to compare. Which one of these tables would you prefer ?

Personally, I know which one I prefer
And if you don’t like my design, don’t hesitate to make your own CSS !

A Few New CSS Properties

There are a few properties that can only be applied on tables.
Here are the one I suggest you remember :

• caption-side : indicates where you want to show the title of the table (doesn’t work before Internet Explorer 8). This property can take the following values :
  • top : the title is at the top (default value)
  • bottom : the title is at the bottom
  • left : the title is to the left
  • right : the title is to the right
• border-collapse : we saw this earlier, it allows us to merge borders. This is often used as it gives a very nice effect. It can take the following values :
  • separate : the borders are separated from each other (default value)
  • collapse : the borders are merged
• vertical-align : vertical alignment of the content in the cells. This property can take the following values :
  • top : the content is at the top of the cell
  • middle : the content is in the middle of the cell
  • bottom : the content is at the bottom of the cell

As we already know border-collapse, I will show you a table that uses vertical-align and caption-side.
I’ll use the same XHTML and CSS files as earlier, but I’ll add the 2 properties we’ve just learnt to the CSS :

Code : CSS

caption {
     caption-side: bottom;  /* The title will be at the bottom of the table. */
     margin: auto;
     font-family: Arial, Times, "Times New Roman", serif;
     font-weight: bold;
     font-size: 1.2em;
     color: #009900;
     margin-top: 20px;  /* the margin needs to be at the top instead of at the bottom now ( the title has moved ) */
}

table {
     margin: auto;
     border: 4px outset green;
     border-collapse: collapse;
}

th {
     background-color: #006600;
     color: white;
     font-size: 1.1em;
     font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td {
     height: 80px;  /* make the cells higher so that we can see the vertical alignment */
     vertical-align: bottom;  /* the content will be at the bottom of the cells */
     border: 1px solid black;
     font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
     text-align: center;
     padding: 5px;
}

I’ve put comments on the additional lines.

The title is placed under the table with caption-side.
I also had to change the margin-bottom from earlier to margin-top because the title is now under the table.

To be able to test the vertical alignment, I had to change the height of the cells. In effect, for the alignment to be visible, the cells need to be big enough.
After that, the vertical-align let me say I want the text to be placed at the bottom of the cells !