Hello and welcome to the 3rd installment of my HTML and CSS tutorial’s. Today we are going to cover Tables. It can become complicated but is also really easy to use if you want to use a traditional way to present information in a web page.
Now there is a lot of different tags and ways to format a table, so let’s get into it.
To start this off we will name the most common tags within a table:
- <table> this is to denote the start of a table
- <tr> this is a table row
- <td> this is table data
- <caption> to define a caption for a table this must follow directly after the opening table tag
- <colgroup> this defines the column groupings for the table
- <thead> this defines the heading section for a table. Often the first table heading row spans the entire width of the table. This then followed by a second row of individual headings for each column in the table.
- <tbody> This identify actual content for the table. A table can have multiple <tbody> elements.
- <tfoot> This provides the information for the bottom of a table. There are specifics where this can be placed and where it can’t be placed. it can be placed (in this order) <caption>,<colgroup> and <thead>. it would appear before <tbody> and <tr>. In a special case <tfoot> cannot appear at the end of the table!
- If no <tbody> is present the <tr> defines rows for the data that the table presents.
Let’s take a look at what a simple table would look like:
This is a good example of how to set up a table. The image below shows what it looks like in your browser:
The final thing to learn about tables is how to decorate them.
<thead> has the following attributes to include within the <thead……>
- caption: shows a caption for the table
- colgroup: specifies properties for a group of columns within the table. Use the col element within colgroup to specify certain columns
- thead: defines overall container for head
- tr: identifies each row of content
- th or td: use th for bold center column heads and td for plain left-justified heads.
Here is what it looks like in HTML:
Here is what it looks like in your browser:
So that is the wonderful world of Tables in HTML 5!
If you have any questions please feel free to ask away in the comments below!
Until Next time!