CSS tables

Table border
Table size
Text alignment
Alternate row background color
Change row background color on hover

Tabular data is information that can be displayed as a table and logically divided by columns and rows. To display tabular data on web pages, use the <table> element, which is a container with table contents. The content of the table is described line by line, each line begins with the opening tag <tr> and ends with the closing </tr> tag.

Inside the <tr> element, there are table cells represented by the <th> or <td> elements. The cells contain all the content of the table displayed on the web page.

Table border

By default, a table on a web page is displayed without a border, and the CSS property border is used to add a frame to the table, as with all other elements. But it is worth paying attention to the fact that if you add a frame only to the <table> element, it will appear around the entire table. In order for table cells to also have a border, you will need to set the border property for both the <th> and <td> elements.

table, th, td { border: 1px solid black; }

Try it »

The table and cells now have borders, and each cell and table have their own borders. As a result, there is an empty space between the borders, the CSS property of the border-spacing is used to control the size of the space, which is set for the entire table. In other words, you cannot control the spacing between different cells individually.

Even if you remove the spacing between cells by using the value 0 of the border-spacing property, the cell borders will be touching each other doubling. Use the border-collapse property to combine cell borders. It can take two values:

separate: is the default value. Cells are displayed at a small distance from each other, each cell has its own border.
collapse: joins adjacent borders into one, all spaces between cells, and also between cells and the table border are ignored.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Name</th><th>Surname</th></tr>
      <tr><td>Homer</td><td>Simpson</td></tr>
      <tr><td>Marge</td><td>Simpson</td></tr>
    </table>
    <br>
    <table class="first">
      <tr><th>Name</th><th>Surname</th></tr>
      <tr><td>Homer</td><td>Simpson</td></tr>
      <tr><td>Marge</td><td>Simpson</td></tr>
    </table>
  </body>
</html>

Try it »

Table size

After adding borders to the table cells, it became apparent that the contents of the cells were too close to the edges. To add free space between the edges of cells and their contents, you can use the padding property:

th, td { padding: 7px; }

Try it »

The size of the table depends on its contents, but there are often situations when the table is too narrow and you want to stretch it. The width and height of the table can be changed by using the width and height properties, specifying the desired dimensions or the table or cells:

table { width: 70%; }
th { height: 50px; }

Try it »

Text alignment

By default, text in the header cells of the table is centered, and in normal cells, the text is aligned to the left, using the text-align property you can control the alignment of the text horizontally.

The CSS property vertical-align allows you to control the alignment of text content vertically. By default, the text is aligned vertically in the center of the cells. Vertical alignment can be overridden with one of the values of the vertical-align property:

top: text is aligned at the top of the cell
middle: aligns the text to the center (the default value)
bottom: text is aligned at the bottom of the cell

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      .test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th class="test1">Name</th><th class="test2">Surname</th></tr>
      <tr><td>Homer</td><td>Simpson</td></tr>
      <tr><td>Marge</td><td>Simpson</td></tr>
    </table>
  </body>
</html>

Try it »

Alternate row background color

When you view large tables that contain many rows of information, it is difficult to track which data is relevant to a particular row. To help users navigate, you can use two different background colors alternately. To create the described effect, you can use the class selector to add it to each second row of the table:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Name</th><th>Surname</th><th>Role in the family</th></tr>
      <tr><td>Homer</td><td>Simpson</td><td>Father</td></tr>
      <tr class="alt"><td>Marge</td><td>Simpson</td><td>Mother</td></tr>
      <tr><td>Bart</td><td>Simpson</td><td>Son</td></tr>
      <tr class="alt"><td>Lisa</td><td>Simpson</td><td>Daughter</td></tr>
    </table>
  </body>
</html>

Try it »

Adding a class attribute to each second row is quite tedious. CSS3 has added a pseudo-class :nth-child, which allows to solve this problem in an alternative way. The alternation effect can now be achieved only with CSS, without having to change the HTML markup of the document. With the pseudo-class :nth-child, you can select all the even or odd rows of the table using one of the keywords: even or odd:

tr:nth-child(odd) { background-color: #EAF2D3; }

Try it »

Change row background color on hover

Another way to make tabular data more readable is to change the background color of a row when you hover the mouse over it. This will help you highlight the content of the table and increase the visual perception of the data.

To implement such an effect is very simple, for this you need to add the pseudo-class :hover to the selector of the table row and set the desired background color:

tr:hover { background-color: #E0E0FF; }

Try it »