First of all, I would like to show you how cells within a row can be joined together column by column. This means that a column within the relevant row extends across several columns.
An example:
<table border="1"> <tr> <th colspan="2">Dates</th> </tr> <tr> <td>11.4.2014</td> <td>12.4.2012</td> </tr> <tr> <td>13.4.4.2014</td> <td>14.4.2014</td> </tr> <tr> <td>15.4.2014</td> <td>16.4.2014</td> </tr> </table>
First a word about the th element used here. This element is used to identify header cells. Browsers usually display these cells in bold and centered. And here is the result in the browser:
The colspan attribute is set within the introductory th. The value expected is the number of columns over which the current cell should extend. In any case, make sure that the number of columns specified is correct, as otherwise you may get unsightly results. In this example, the header row marked with th should extend over two columns. The remaining two rows then contain two rows each.
A note in connection with joining rows. Assign aborder to the tables during the development phase. This way you can always see directly whether the joining actually works as desired.
Joining cells in a column row by row
The rowspan attribute can be used to join several cells in a column. The cell in question then extends over several rows within the column. Here is another example:
<table border="1"> <tr> <th rowspan="2">Color</th> <td>Blue</td> </tr> <tr> <td>Green</td> </tr> <tr> <th rowspan="2">Size</th> <td>1.70</td> </tr> <tr> <td>1.80</td> </tr> </table>
In the browser it looks like this:
You assign a numerical value to the rowspan attribute. This ultimately determines the number of rows within a column over which a cell should extend. Again, of course, the number of rows specified should actually be correct.
Joining cells in rows and columns at the same time
The two attributes rowspan and colspan can also be combined with each other. This allows cells to be defined that span several rows and columns at the same time. This is also best demonstrated using an example.
<table border="1"> <tr> <th colspan="2" rowspan="2">Apartment</th> <td>5 rooms</td> </tr> <tr> <td>154 sqm</td> </tr> <tr> <td>Charlottenburg</td> <td>Parking space</td> <td>Underfloor heating</td> </tr> </table>
A look in the browser provides the following result:
When combining the two attributes, care must of course also be taken to ensure that the number of cells is actually correct at the end.
Labeling tables
The caption element offers a very interesting way of making tables easier to understand. This is because it can be used to add a heading or a legend to a table. The content of caption is displayed outside the table, even though it is defined in the table.
Here is a typical application for caption:
A table heading is displayed above the table. By default, the caption is centered above the table. This can of course be changed individually using CSS.
The caption element is defined directly after the introductory <table>.
Here is the complete syntax of the example shown above:
<table border="1"> <caption>Media data</caption> <colgroup><col /><col /><col /><colgroup> <thead> <tr> <th>Theme</th> <th>Calls</th> <th>Trend</th> </tr> <thead> <tfoot> <tr> <td colspan="3">As of June 2014</td> </tr> <tfoot> <tbody> <tr> <td>HTML5</td> <td>12.245</td> <td>+</td> </tr> <tr> <td>CSS3</td> <td>12123</td> <td>+</td> </tr> <tr> <td>JavaScript</td> <td>11.546</td> <td>+</td> </tr> </tbody> </table>
Designing tables
There were numerous attributes for styling tables in earlier HTML versions. Here are some examples of things that could be controlled using attributes. (Of course, browsers still support these attributes today. However, they should no longer be used in HTML5).
- Outer frames
- Inner table frames
- Width and height specifications
- Grid lines
- Alignment of cell contents
- Colors
- Background images
As you can see, everything can be controlled via the corresponding HTML attributes. The following example shows a table in which these options have been used extensively:
<table border="1"> <tr> <td width="200" height="100" bgcolor="#999933">One</td> <td width="200" bgcolor="#00ffff">Two</td> <td width="200">Three</td> </tr> <tr bgcolor="#ff00ff"> <td height="100">Four</td> <td bgcolor="#996666">Five</td> <td bgcolor="#003333">Six</td> </tr> </table>
Looking at the result gives the desired result.
But even if this looks as it should, the underlying syntax is anything but effective. It is better to control the table properties using CSS. Thanks to new CSS properties, it is not only possible to replace the old attributes with modern syntax. Additional functionalities can also be implemented. For example, you can now easily alternate the color of table rows.
In earlier HTML and CSS times, you sometimes had to make huge code contortions for such a result. If you now consistently use the possibilities that CSS now offers, it is very easy to implement something like this.
tr:nth-child(even) { background-color: #fd9d5d; } tr:nth-child(odd) { background-color: #c0f390; } table { border-spacing: 0px; }
As already described several times, I will go into CSS in detail in this series.
