First of all to begin the hTML5 table element example we add an opening <table> tag and closing </table> tag on line 9.

Next inside the table tags we add and opening <tr> tag and a closing </tr> tag on line 10. The ‘tr‘ tags define a row within the table.

Now inside the ‘tr’ tags we add two sets of ‘th’ tags. First of all an opening <th> tag and closing </th> on line 11 with the heading “Team”. And on line 12 we add another opening <th> tag and closing </th> with the heading “Position”.

HTML5 Table Element Example. Table headers.
Table headers.

While it does not resemble a table yet it is none the less a html5 table element with two headers added. We want to add four teams with their positions on the table. To achieve this we must first define a further four table rows. On lines 14,15,16 and 17 are four sets of ‘tr‘ tags.

In each of the four rows we add a ‘team’ and it’s position. The opening <td> tag and closing </td> tag defines a table cell. Each row needs two cells, one for the team and one for the position.

We now have a table row with the two headers and four extra rows with two cells in each row. Now we add the teams and positions.

HTML5 Table Element Example. Rows and cells.
Five rows. Two cells in each row.

While this still does not resemble a table it is a html5 table element with five rows. The top row has two headings and the next four rows all have a team and a position. Now we use CSS to style the table element.

On lines 6 and 7 in-between the style tags we declare a ‘table’ property. We give the table a width value of ‘100%’. On lines 9 and 10 we give the ‘th’ property a text-align attribute the value of left.

HTML5 Table Element Example. Width 100% and heading aligned left.
Table headings aligned left and table width 100%.

This is now starting to resemble a table. More css styles need to be added first. On lines 15 to 17 three css selectors are given 1 pixel solid black border. The table, th, and td elements must all be given a border.

HTML5 table element example. Double borders added.
A table.

To make the table border a single line a ‘border-collapse’ attribute must be added to remove the double lines. On line 9 the border-collapse attribute is added with a value of ‘collapse’.

HTML5 Table Element Example. Single line border. Border collapsed.
A Single line table border.

Another problem with this table is that everything appears too cramped.To remedy this on line 18 we add 8 pixels of padding to the table cells.

HTML5 Table Element Example. Table with 8 pixels of padding added to the cells.

The 8 pixels of padding is added to the top, right, bottom and left of each cells. In css this could also be written in longhand like this.

However the shorthand of ‘padding: 8px;’ is much simpler and achieves the same result.

Finally some colours can be added to jazz things up a bit. On lines 20 to 31 are some interesting css selectors that add a specific ‘background-color’ to the table rows.

HTML5 Table Element Example. Background-color added to the table rows.
CSS nth-of-type selectors used to target specific rows.

These ‘nth-of-type‘ selectors are called ‘pseudo-selectors‘ and are used to match a specific element within the document tree. In the above example the ‘td’ element form a specific ‘tr’ element within the ‘table’. Here is a rundown of how that works.

  1. On line 20 a css style of ‘tr:nth-of-type(2)’ targets the table cells in the second table row on line 43.
  2. On line 23 a css style of ‘tr:nth-of-type(3)’ targets the table cells in the third table row on line 47.
  3. On line 26 a css style of ‘tr:nth-of-type(4)’ targets the table cells in the fourth table row on line 51
  4. Finally on line 29 a css style of ‘tr:last-of-type’ targets the table cells in the last table row on line 56.


Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *