Materialien zum Unterricht
Formatting Tables with CSS
A table consists of rows <tr>...</tr> and columns <td>...</td>.
If the first row should serve as a header, the <td> tags must be replaced with <th>.
1. Adding Borders
The table looks better when the cells are separated by a border.
In the style.css file, the <td> tag receives a new border:
Using CSS, the type, width, color, and placement of the border can be customized.
The example creates a solid border of 1 px width around the entire cell with a blue color.
This doesn't look very appealing yet and requires further styling.
All possibilities for border formatting are described at
SELFHTML.
2. Merging Borders
By default, the browser draws borders around each cell without merging them.
This results in an unattractive appearance.
To avoid this, the <table> tag must be styled:
3. Include Header Row
To ensure the header row also has a border, the <th> tag must be included in the styling:
4. Styling the Header Row
Task:
The header row of the table should have a gray background.
5. Padding
The table looks better when the text has some space away from the table's border.
To achieve this, padding needs to be added.
Padding is the space between the content of the element and its border.
Padding is set using the `padding` property.
More information: padding
A padding value of 0.5em can be used.
More information: relative size em
