In this lesson we will learn how to format tables. Also, we will introduce a new HTML tag, new CSS properties and one new selector. The borders for tables work mostly like for paragraphs, but we need to melt them together (collapse) multiple borders. We will also use outlines (frames to borders) and vertical alignment, which we can use on other elements too, not only on tables. We will also learn how to format rows and columns in a table separately.
<col> - we can use this tag to format the columns of a table differently. This tag has no closing part.
<colgroup> - we use this tag to group more tags.
outline – this property can be used to draw another line outside the border. Outlines can be used like borders. We can define the width, color and type of the line. It is possible to use separately the outline-style (for the type of the line), outline-color (for the color of the line), outline-width (for the width of the line), outline-offset (for the distance between the border and the outline).
border-collapse – this property can be used to melt together the neighboring borders to one.
vertical-align – this property is used to align a content to the middle of the row in vertical direction. Some possible values: middle, top, bottom.
:nth-of-type(…) – this selector can be added to HTML tags, this way we can format some occurrences of the tag. We can add numbers, formulas or words like: even or odd. For example using the word even, we can add CSS settings for every even occurrence of the tag.
- The types of the outlines correspond to the types of the borders. Some possible values: solid, dotted, dashed, double.
- The width of the outline does not count to the distance of two objects.
- The content of the HTML tables are defined basically in rows. Their formatting is usually made based on cells or rows. We can use the <col> tag, if we want to apply settings to columns. To format columns we can use only some properties: border, background-color, width and visibility. If we use both row and column settings, we should be careful.
- The :nth-of-type selector can be used for other HTML tags too, not only for tables. For example, we can apply this selector to every paragraph or every list item in a list, in a similar way to tables. Beside even or odd, we can use numbers too. For example, using tr:nth-of-type(2) the browser applies the settings to even rows.
Example on outline:
On the picture above, we can see the light blue, dotted, two pixel width outline added to the blue border. Adding this outline we do not move the border or other neighboring objects, but by adding border, it does move other objects away.
We apply border both to cells and table in the CSS file, which is why we seemingly have a double border: one for the cells and one around the table.
Example on collapsing borders:
On the picture above, we see the previous table with the borders melted to one using the border-collapse property.
The contents of the cells are aligned vertically and horizontally to the center.
The width of the table is set to 50%, which means that the table occupies half of the browser windows width.
Example on formatting even and odd rows:
Example on formatting columns:
CSS:
td:nth-of-type(2){
background-color:lightgray;
}
HTML:
<table>
p {
border: 2px solid red;
outline: 5px solid;
margin: 10px;
}
https://www.w3schools.com/css/css_outline.asp,
https://www.w3schools.com/css/css_border.asp,
https://www.w3schools.com/css/css_table.asp,
https://www.w3schools.com/css/css_pseudo_elements.asp,
https://www.w3schools.com/tags/tag_col.asp,
https://www.w3.org/TR/CSS21/tables.html#columns,
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp.
