Chapter 10: Tables

 

HTML tables are ugly looking by default. However, with some simple CSS styling, we can easily convert them into gorgeous looking tables. In this chapter, we’ll look at how to do that.

 

Border, Padding and Margin

 

The first set of properties we’ll be looking at is the border, padding and margin properties. Recall we talked about these properties when discussing the CSS box model? HTML tables (<table>) and table cells (<th> and <td>) follow the same box model as other CSS elements and can therefore be styled using these properties.

 

To understand how this work, refer to the diagram below  (the words ‘Table Margin’ and ‘Table Padding’ are added for reference and do not exist on the actual table).

 

The CSS rules for this table are as follows:

table {

border: dashed 1px black;

padding: 50px;

margin: 60px;

}

 

th {

border: solid 1px black; 

padding: 30px;

text-align: center;

}

 

td {

border: solid 1px black; 

padding: 20px;

}

 

The dotted line is the table’s border. Space surrounding the dotted border is the table’s margin (declared to be 60px) and space within the dotted border is its padding (50px).

 

The first row (Firstname, Lastname, Age) is defined as the table heading using the <th> tag. Space surrounding the words ‘Firstname’, ‘Lastname’ and ‘Age’ is the padding for the <th> element (30px).

 

The second, third and fourth row is defined using the <td> tag. Space surrounding words like ‘Derek’, ‘Aaron’ and ‘31’ is the padding for the <td> element (20px).

 

No margins are declared for the <th> and <td> elements as margins are ignored for table cells. Hence, we cannot specify the spacing between the cells. By default, there’ll be a small gap between individual table cells. In addition, there’s also a gap between the table’s border (the dotted line) and the borders of the cells (the solid lines) even if you set table padding to 0px. If you only want one border, you have to use the border-collapse property:

 

border-collapse: collapse;

 

We’ll have a chance to play around with the border, padding and margin properties when we do the exercise for this chapter. For now, let’s move on to the next property.

 

Height and Width

 

The width and height of a table can be set using the width and height properties. The values are normally given in pixels or as a percentage. For instance, the code below sets the table width to be 100% of the parent element and the height to be 500px.

 

table {

width: 100%;

height: 500px;

}

 

You can also use the height property at the tr, th or td level. For instance, if you want the table header row to have a height of 100px, you can write

 

th {

       height: 100px;

}

 

In addition, you can set the width property at the table cell level (i.e. for the td and th elements). If you want the table cells to have a width of 200px, you can write

 

th {

width: 200px;

}

 

If you want to style individual columns, you can use the id/class attribute to do it. For instance if you have the table structure below:

 

<table>

       <tr>

<th id=”firstColumn”>First Column</th>

       <th id=”secondColumn”>First Column</th>

</tr>

       <tr>

<td>Some data</th>

       <td>More data</th>

</tr>

</table>

 

you can set the width of the table columns individually like this:

 

#firstColumn {

       width: 40%;

}

 

#secondColumn {

       width: 60%;

}

 

Text Alignment

 

Text within table cells can be aligned horizontally using the text-align property and vertically using the vertical-align property. The commonly used values for the text-align property are center, left, right and justify. The commonly used values for the vertical-align property are top, middle and bottom.

 

Examples:

 

th {

       text-align: center;

       vertical-align: middle;

}

 

Background, Font and Text

 

Tables can also be styled using properties for background, font and text covered in Chapter 7 and 8. For instance, the code below will set the text color of <th> elements to white and give the elements a green background color.

 

th {

       background-color: green;

       color: white;

}

 

nth-child( ) Selector

 

Sometimes when we have a very large table with a lot of rows, the table may be difficult to read. 

One way to improve the readability of large tables is to color alternating rows. This can be easily achieved with the nth-child( ) selector.

 

To color even rows, we write

 

tr:nth-child(even) {

       background-color: lightgreen;

}

 

To color odd rows, we write

 

tr:nth-child(odd) {

       background-color: lightgray;

}

 

Exercise 10

 

Download the source code for this exercise from http://learncodingfast.com/css and unzip the file. The source code for this exercise can be found in the Chapter 10 - Tables folder.

 

Exercise 10.1

 

1.       Open the file Chapter 10 - Tables.html concurrently in your browser and text editor.

2.       Modify the CSS declaration for table and observe what happens to the table. Try adding the following and observe what happens in each case:

(a) padding: 50px;
(b) margin: 30px;
(c) border-collapse: collapse;
(d) Change border: dashed 1px black; to border: solid 2px green;

3.       Modify the CSS declaration for th and observe what happens to the table. Try adding:

(a) padding: 50px;
(b) margin: 30px; (Margin rules will be ignored. Try it)

Repeat the same for td.

4.       Remove the padding and margin properties from Part 3 for both td and th. Modify the CSS declaration for table and observe what happens to the table. Try adding each of the following:

(a) width: 300px;

(b) width: 50%;
Notice that the width of the table is now 50% of the red box.

(c) height: 500px;

(d) height: 80%;
Notice that the height of the table is now 80% of the red box.

5.       Remove the height and width properties for table from Part 4. Modify the CSS declaration for th and observe what happens to the table. Try changing the height property to:

(a) height: 100px;

Remove the height property from th and add it to td. Notice what happens. Repeat the same for tr.

6.       Modify the CSS declaration for th and observe what happens to the table. Try changing the width property to:

(a) width: 100px;

Remove the width property from th and add it to td. Notice what happens. There should be no difference as whether you set the width of a table cell at the th or td level, that width will affect both elements.

7.       Add the attributes  id=”firstColumn”, id=”secondColumn” and id=”thirdColumn” to the first, second and third <th> start tags respectively. Next, add the following CSS rules to adjust the width of the three columns separately:

#firstColumn {
       width: 100px;
}
#secondColumn {
       width: 200px;
}
#thirdColumn {
       width: 50px;
}

Refresh the page and observe what happens. Try adjusting the width with different values.

8.       Modify the CSS declaration for tr and observe what happens to the table. Try adding:

(a) text-align: center;
(b) vertical-align: top;

Remove the above properties from tr and add them to th. Notice what happens. Repeat the same for td. If you do not see any difference, try increasing the width of the table and/or the height of the rows.

9.       Modify the CSS declaration for tr and observe what happens to the table. Try adding:

(a) background-color: green;
(b) color: white;

Remove the above properties from tr and add them to th. Notice what happens.

Now, remove the properties from th and add them to td.

10.    Finally, let’s try coloring alternating rows. Remove the background-color and color rules from td first. Next, add the following code and observe what happens.

tr:nth-child(even) {
       background-color: lightgreen;
}

tr:nth-child(odd) {
       background-color: lightgray;
}