Styling HTML Tables via CSS II

Dreamweaver Content of the lesson:

Header of Table
Spacing Inside Table
Borders of Table
Stripped Table

Header of Table

In publications, on websites and in magazines you can see that almost every table has a visually different header:

We are going to create a similar table in this lesson. Similarly to a HTML page, a table can have a head and a body. Thanks to this we can style body and head parts separately using CSS rules. You need to know three more tags for creating body and head parts.

<thead> - beginning of the head part of a table
<tbody> - beginning of the body part of a table
<th> - a cell located inside the head part has to be marked using this tag

All this three tags are paired so you have to put the proper ending tags behind the content. You can see the syntax in the following sample:

Syntax of HTML table using head and body parts

HTML table from the previous lesson can be changed this way:

HTML table sample

<table>
<thead>
<tr>
<th>POŘADÍ</th>
<th>Příjmení, Jméno</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Světlík Jaromír</td>
</tr>
</tbody>
</table>

The final structured HTML table would look like the following one:

We see that after separating the head and the body parts we can use CSS styles - the browser automatically set bold font for the text in the head part. Which CSS rule was applied?

The browser probably set a rule for the thead element where it used the font-weight:bold property. You can set your own rules for the thead element and change its appearance. You can also add several rows to your table.

CSS rules supplemented with rules for thead

table {
border-width:1px;
border-color: #666;
border-style: solid;
}

thead{
/* background color for the head part */
background-color:#056597;
/* font color for the head part */
color:#FFF;
/* converting characters to upper-case in the head part */
text-transform:uppercase;
/* bold text in the head part */
font-weight:bold;
}

td {
padding: 3px;
}

The final structured HTML table should look like the following one:

The next step is to add a rule to define a sans-serif font. Set the size to 12 px - you should always set the font and its size to be sure that a browser will not use a default value. Added rules are written in bold.

CSS rules

table {
border-width:1px;
border-color: #666;
border-style: solid;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
}

thead{
background-color:#056597;
color:#FFF;
text-transform:uppercase;
font-weight:bold;
}

td {
padding: 3px;
}

The final structured HTML table should look like the following one:

We should also set a border (a 1px wide dotted border) - add the border: 1px #ddd dotted property to the th element.

CSS rules with the dotted border

The final structured HTML table should look like the following one:

You should disable spacing between cells using the padding: 0 property.

Then you can use the border-collapse:collapse rule and apply it to the table element to disable doubling of the borders:

You can achieve the effect that header cells will have bigger padding and the text will be aligned to the left. You should write a rule for th element and set the padding and text-align properties.

CSS rules for header cells

th{
padding:3px;
text-align:left;
}

We can end styling the table by this step but two more steps to make the table well-arranged will be shown.

Stripped Table

You can often see that tables have another background color for even rows than for the odd ones. It improves the orientation inside the table. The simplest solution is displayed in this lesson but used CSS rules are available only in CSS3 and higher (CSS3 is not supported in all browsers).

CSS3 rules for changing background color of rows

tr:nth-child(2n+1){
background:#eee;
}

tr:nth-child(2n){
background:#ddd;
}

The last two rules made unwanted changes to our table because also the background color of the first row (inside the head) was changed. Try to solve the problem to restore background color of the first row to its previous state by adding more rules. You should get this result:

Highlighting Rows on Mouse Hover

Another nice thing is to write a CSS rule to highlight a row which is selected by mouse cursor (usually the rows change their background color or switch font to bold). This technique improves the readability of the table because you can easily read one line.

CSS rules for hover event

tr:hover{
background-color:#9CF;
cursor:pointer;
color:#FFF;
}

You can see the whole set of CSS rules used for the table in the end:

CSS rules for the table

table {
border-width:1px;
border-color: #666;
border-style: solid;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
border-spacing:0;
border-collapse:collapse;
}

thead{
background-color:#056597;
color:#FFF;
text-transform:uppercase;
font-weight:bold;
}

th{
padding:3px;
text-align:left;
background-color:#056597;
}

td {
padding: 3px;
border: 1px #ddd dotted;
}

tr:nth-child(2n+1){
background:#eee;
}

tr:nth-child(2n){
background:#ddd;
}

tr:hover{
background-color:#9CF;
cursor:pointer;
color:#FFF;
}

Individual Task

Solve the problem of stripped table using CSS2.1 properties - search the internet, the solution is not difficult.

Additional Texts

Links

Questions

What is the basic structure of a HTML table?
How can be a table divided to head and body part? Is this action useful and why?
How can you set the appearance of the head part using CSS?
How can you realize changing background color via CSS?
How can you change the background color of a row after mouse cursor is over?

webdesign, xhtml, css, php - Mgr. Michal Mikláš