Lessons menu
CSS - intermediate - Lesson nr. 7
Formatting tables

What this lesson is about?
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. 

New HTML tags:

<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.

New CSS properties in this lesson:

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.

New CSS selector in this lesson:

: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:



1. On our website we have 3 tables (toplangs.html, aspects.html, tips.html). Apply to every table, table heading and table data a solid, colored, 1 pixel width, collapsed border. Apply a distance of 10 pixels between the content of the cells and the border. Also, apply a distance of 20 pixels from the table and the other elements around it.
View the result
2. Achieve the same table row coloring in toplangs.html. For this, we need to give that certain table an identifier, remove the old classes called row, and use the newly learned CSS selector.
View the result
3. Apply locally (inside the HTML tags) the following settings to the table in the tips.html file: the first column should have a background color, the second column should be 6 centimeters wide.
View the result
4. To the same table’s from the toplangs.html file, set a 2 pixel width, dashed outline, having the same color as its border.
View the result
1. Which CSS property cannot be applied to table columns (using the <col> tags)?
2. Which is not outline type?
3. How do the CSS settings below effect the table?
<tr> <th>Nr.</th>  <th>Browser</th>  <th>Editor</th> </tr>
<tr> <th>1</th> <td>Mozilla Firefox</td> <td>Notepad++</td> </tr>
<tr> <th>2</th> <td>Google Chrome</td> <td>Atom</td> </tr>
4. What is the distance between two paragraphs, if they have the following CSS style?
p {
        border: 2px solid red;
        outline: 5px solid;
        margin: 10px;
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept