Tables are quite complex structures made up of rows and columns. The outer basic structure of tables is always the table element.
<table> ... </table>
The actual table definition takes place within this element. Incidentally, it is advisable to assign a frame to a table when converting it to HTML. This makes it easier to understand exactly how rows and columns are arranged. To do this, assign the attribute-value combination border="1" to the introductory <table>. (Note that the border attribute should not be used in HTML. Here, you access the corresponding CSS properties instead. But more on this later).
<table border="1"> ... </table>
The next step is to define the table rows. This is done using the tr element.
<table border="1"> <tr></tr> </table>
However, this does not yet lead to the desired output. The next step is to define the columns. This is again done using the td element.
<table border="1"> <tr> <td></td> </tr> </table>
Now you can define the first table content. This is defined between <td> and </td>.
<table border="1"> <tr> <td>Content 1</td> </tr> </table>
Only now is it worth taking a look at the result in the browser.
This is certainly not particularly spectacular, as the table currently only consists of one table cell. You can now insert another column. This is again done using a td element. Make sure to define this within the tr element.
<table border="1"> <tr> <td>Content 1</td> <td>Content 2</td> </tr> </table>
Again, a look at the result.
To include additional rows in the table, simply create another tr element in which the desired td elements are then defined.
Here is another example:
<table border="1"> <tr> <td>Content 1</td> <td>Content 2</td> </tr> <tr> <td>Content 3</td> <td>Content 4</td> </tr> </table>
A look at the result in the browser provides the following result:
This way you can also create extensive tables.
Define header, body and footer
Tables can be divided into logical areas. These are a header area, one or more data areas and a footer area. The following example shows how this can look:
<table border="1"> <thead> <tr> <th>Departure</th> <th>Arrival</th> <th>Platform</th> </tr> </thead> <tfoot> <tr> <td>Berlin</td> <td>Stralsund</td> <td>5</td> </tr> </tfoot> <tbody> <tr> <td>Berlin</td> <td>Hamburg</td> <td>1</td> </tr> <tr> <td>Munich</td> <td>Berlin</td> <td>3</td> </tr> </tbody> </table>
And here's a look at the result in the browser:
The division into the aforementioned areas obviously has no visual effect. Of course, this raises the question: Why should you go to the trouble of defining these areas? There are two good reasons for this:
- Using CSS, the areas can be formatted differently if desired.
- When printing long tables, browsers can repeat the table header and table footer on each page.
The table header is introduced with thead. This is followed by the rows of the table that belong to the header area. Do not forget to close the header area </thead> again.
If the table is to have a table footer, this must be defined before the table body. The footer is introduced via <tfoot>. This can be followed by one or more lines that belong to the footer area. The table footer is closed with < ;/tfoot>.
The actual table body is defined within the tbody element. This tbody can occur several times. A table body is closed via < ;/tbody>.
Why should you use several tbody elements in a table, for example? A good example of this could be the Bundesliga table. There are usually several areas in such a table.
- Champions
- Champions League participants
- Champions League qualifier
- Europa League participants
- The gray midfield
- Relegation place
- Relegated team
You could put each of these areas in a separate tbody element and then style them differently using CSS.
Predefine columns
How the table is displayed by the browsers depends primarily on the number of rows and columns available. However, the process of displaying a table is not easy for the browser. In fact, a browser always has to read in the entire table before it can display the table. This can of course take some time, especially with very large tables. This problem can be avoided by telling the browser directly how many columns the table actually consists of.
<table> <colgroup span="2"></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>23223423434</td> <td>A brief history of almost everything</td> <td>29.95 euros</td> </tr> </table>
The pre-definition of the column specifications is introduced via colgroup. Please note that most of the attributes available for colgroup in earlier HTML versions are no longer permitted in HTML5. Only the span attribute is now permitted. This span expects the number of columns contained in the table as a value.
The colgroup element is placed directly after the introductory <table>. The columns themselves are then defined by the individual col elements.
When using colgroup, you basically have two options:
- With span attribute
- Without span attribute
If no span attribute is used, a col element must be defined within the colgroup element for each column over which the column group is to extend. Please note that col is a standalone element.
<table> <colgroup> <col /> <col /> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>23223423434</td> <td>A brief history of almost everything</td> <td>29.95 euros</td> </tr> </table>
There is also a hybrid form.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> ...
This is always practical if one column is to be predefined separately but you want to combine the others in a group.
