CSS Basics: Beginner's Guide to Web Design – Making Your Tables Stylish and Mobile-Friendly

Deutsch

Styling HTML Tables using CSS


How to create an HTML table is described in the article Creating HTML Tables. This page describes the most important basics that are needed to create appealing HTML tables. Here is a step-by-step guide for styling HTML tables so that they look good and are easy to read.

The following source code is a very simple example of an HTML table that is created using the default settings.

Example HTML 
<h2>HTML table without customization using CSS</h2>

<table>
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
</tr><tr>
  <td>Data Cell 1</td>
  <td>Data Cell 2</td>
  <td>Data Cell 3</td>
</tr><tr>
  <td>Data Cell 4</td>
  <td>Data Cell 5</td>
  <td>Data Cell 6</td>
</tr><tr>
  <td>Data Cell 7</td>
  <td>Data Cell 8</td>
  <td>Data Cell 9</td>
</tr><tr>
  <td>Data Cell 10</td>
  <td>Data Cell 11</td>
  <td>Data Cell 12</td>
</tr>
</table>
Output of the HTML Code

HTML table without customization using CSS

Column 1 Column 2 Column 3
Data Cell 1 Data Cell 2 Data Cell 3
Data Cell 4 Data Cell 5 Data Cell 6
Data Cell 7 Data Cell 8 Data Cell 9
Data Cell 10 Data Cell 11 Data Cell 12
This background       represents the screen and is not part of the sample code.

Define Borders for HTML Tables

The Border is a crucial element in the design of tables. Borders are used to improve the readability of data by creating a visual separation between cells, rows, and columns of data. This chapter describes how to create and customize borders for tables.

The border property is ideal for drawing a box around the entire table or for separating the table rows from each other.

Example CSS 
table {
  border: 1px solid #000000;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #000000;
}

With border-collapse: collapse, the borders of adjacent table cells will collapse into a single border.

Customize Spacings in HTML Tables

By default, table cells are only as large as they need to be to display their contents. This doesn't look very nice. It also makes the table difficult to read. In order to get more space between the content of the cells and their borders, use the CSS property Padding.

Example CSS 
td, th {
  padding: 0.5em 1em; }

Table Header and Data Cell Styling

In a table, header cells are marked with TH (Table Header). They are used for both Column Headers (top) and Row Headers (left). By default, header cells are displayed in bold and centered horizontally.

The table cells marked this way will be used as headers for the corresponding columns or rows. The appearance of the table headers can be customized using CSS.

Example CSS 
table {
  border: 1px solid #000000;
  border-collapse: collapse;
}

th {
  padding: 0.5em 1em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  background: #cccccc;
  color: #000000;
  border: 1px solid #000000;
}

td {
  padding: 0.5em;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  color: #000000;
}
Example HTML 
<h2>HTML Table with Column Headers</h2>

<table>
<thead>
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Data Cell 1</td>
  <td>Data Cell 2</td>
  <td>Data Cell 3</td>
</tr><tr>
  <td>Data Cell 4</td>
  <td>Data Cell 5</td>
  <td>Data Cell 6</td>
</tr><tr>
  <td>Data Cell 7</td>
  <td>Data Cell 8</td>
  <td>Data Cell 9</td>
</tr><tr>
  <td>Data Cell 10</td>
  <td>Data Cell 11</td>
  <td>Data Cell 12</td>
</tr>
</tbody>
</table>
Output of the HTML code

HTML Table with Column Headers

Column 1 Column 2 Column 3
Data Cell 1 Data Cell 2 Data Cell 3
Data Cell 4 Data Cell 5 Data Cell 6
Data Cell 7 Data Cell 8 Data Cell 9
Data Cell 10 Data Cell 11 Data Cell 12
This background       represents the screen and is not part of the sample code.

Styling Tables with Zebra Stripes

A table styled with zebra stripes uses alternating background colors for the Table rows, such as alternating light and dark backgrounds. This makes the table easier to read as the rows can be clearly distinguished from each other. This is useful especially for large multi-column tables, as it allows users to keep track without confusing the table row.

Using the nth-child pseudo-class, it is easy to define the background colours for even and odd table rows.

Example CSS 
table {
  border: 1px solid #000000;
  border-collapse: collapse;
}

th {
  padding: 0.5em 1em 0.5em 0.4em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  background: #cccccc;
  color: #000000;
  border: 1px solid #000000;
}

tbody tr:nth-child(even) {
  background: #90ee90;
}

tbody tr:nth-child(odd) {
  background: #f5f5dc;
}

td {
  padding: 0.5em;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  color: #000000;
}
Example HTML 
<h2>HTML Table with Zebra Stripes</h2>

<table>
<thead>
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Data Cell 1</td>
  <td>Data Cell 2</td>
  <td>Data Cell 3</td>
</tr><tr>
  <td>Data Cell 4</td>
  <td>Data Cell 5</td>
  <td>Data Cell 6</td>
</tr><tr>
  <td>Data Cell 7</td>
  <td>Data Cell 8</td>
  <td>Data Cell 9</td>
</tr><tr>
  <td>Data Cell 10</td>
  <td>Data Cell 11</td>
  <td>Data Cell 12</td>
</tr>
</tbody>
</table>
Output of the HTML code

HTML Table with Zebra Stripes

Column 1 Column 2 Column 3
Data Cell 1 Data Cell 2 Data Cell 3
Data Cell 4 Data Cell 5 Data Cell 6
Data Cell 7 Data Cell 8 Data Cell 9
Data Cell 10 Data Cell 11 Data Cell 12
This background       represents the screen and is not part of the sample code.

How to Create a Responsive Table?

Tables are typically used to present a large amount of data in a clear manner. But the tabular presentation of the data requires a relatively large amount of space. At the latest since 2017, every website must be optimized for mobile devices, because Google will penalize any website that is not suitable for mobile devices.

Responsive Web-Design optimizes the appearance of the same content for different display sizes and screen resolutions. A wide table with a large number of columns, doesn't fit on a smartphone display. Unless the font size becomes extremely small. This means that a wide table on a smartphone either loses clarity or is illegible.

Our goal is to create a table that displays the data as well as possible on any device and is easy to read.

Responsive HTML Table Variant I:

Example CSS 
table.rspCols {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border: 1px solid #000000;
  table-layout: fixed;
}

table.rspCols tr {
  background: #ffd700;
  border: 1px solid #000000;
}

table.rspCols th {
  padding: 0 1.5em 1em 0.5em;
  height: 3em;
  font-size: 1.2em;
  text-align: left;
  vertical-align: top;
  background: #d0d0d0;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td {
  padding: 0.5em;
  font-size: 1em;
  color: #000000;
  vertical-align: middle;
  border: 1px solid #000000;
}

table.rspCols td:last-child {
  text-align: right;
}


@media screen and (max-width: 720px) {
  table.rspCols,       table.rspCols thead,
  table.rspCols tbody, table.rspCols tr,
  table.rspCols th,    table.rspCols td {
    display: block;
  }

  table.rspCols thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.rspCols {
    background: transparent;
    border: initial;
  }

  table.rspCols tr {
    margin: 0 0 2em 0;
  }

  table.rspCols tr:last-child {
    margin-bottom: 0;
  }

  table.rspCols td {
    padding: 0.25em 0.5em;
    text-align: right;
    background: #ffd700;
    border: none;
  }

  table.rspCols td::before {
    font-weight: bold;
    float: left;
    content: attr(data-label);
  }

  table.rspCols td:last-child {
    padding-bottom: 0;
  }
}

A Media Breakpoint is defined for the table. For a window width less than or equal to 720px, the table layout is changed to display a responsive table. On small screens, the columns of each row in the table are arranged one below the other.

Example HTML 
<h2>Simple Responsive Table</h2>

<table class="rspCols">
<thead>
<tr>
  <th>Category</th>
  <th>Domain</th>
  <th>Registered since</th>
  <th>Price</th>
</tr>
</thead>
<tbody>
<tr>
  <td data-label="Category">Internet</td>
  <td data-label="Domain">website-erstellen.de</td>
  <td data-label="Registered since">01.01.2005</td>
  <td data-label="Price">1,998 EUR</td>
</tr><tr>
  <td data-label="Category">Advice</td>
  <td data-label="Domain">cms-vergleich.com</td>
  <td data-label="Registered since">01.05.2007</td>
  <td data-label="Price">998 EUR</td>
</tr><tr>
  <td data-label="Category">Web Basics</td>
  <td data-label="Domain">css-basics.net</td>
  <td data-label="Registered since">15.08.2009</td>
  <td data-label="Price">1,125 EUR</td>
</tr><tr>
  <td data-label="Category">Portal</td>
  <td data-label="Domain">versicherungsvergleich.de</td>
  <td data-label="Registered since">15.09.2018</td>
  <td data-label="Price">2,499 EUR</td>
</tr>
</tbody>
</table>
Output of the HTML code

Simple Responsive Table

Category Domain Registered since Price
Internet website-erstellen.de 01.01.2005 1.998,- EUR
Advice cms-vergleich.com 01.05.2007 998,- EUR
Web Basics css-basics.net 15.08.2009 1.125,- EUR
Portals versicherungsvergleich.de 15.09.2018 2.499,- EUR
This background       represents the screen and is not part of the sample code.

Resize the browser window or change the zoom factor to see the effect.

Responsive Tabelle Variant II

Non-responsive tables can quickly ruin a responsive web layout. This results in poor usability. In the variant shown here, the header cells of the table are reproduced visually for small displays using the pseudo-element before.

The HTML code for variant II is the same as for variant I.

Example CSS 
table.rspCols {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border: 1px solid #000000;
  table-layout: fixed;
}

table.rspCols tr {
  border: 1px solid #000000;
}

table.rspCols th {
  padding: 0 0.5em 1em;
  height: 3em;
  font-size: 1.2em;
  text-align: left;
  vertical-align: top;
  background: #dfdfdf;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td {
  padding: 0.5em;
  font-size: 1em;
  vertical-align: middle;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td:last-child {
  text-align: right;
}


@media screen and (max-width: 720px) {
  table.rspCols {
    display: block;
    border: initial;
  }

  table.rspCols thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.rspCols tr {
    margin: 0 0 2em 0;
    width: 100%;
    border-top: none;
    float: left;
  }

  table.rspCols tr:last-child {
    margin-bottom: 0;
  }

  table.rspCols td {
    padding: 0 0.5em 0 0;
    width: 100%;
    text-align: right;
    line-height: 400%;
    background: #eeeeee;
    border: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px;
    border-bottom: none;
    border-left: 1px;
    float: left;
  }

  table.rspCols td:last-child {
    padding-bottom: 0;
  }

  table.rspCols td::before {
    padding: 0 0.5em;
    width: 9em;
    font-weight: bold;
    text-align: left;
    background: #dfdfdf;
    border-right: 1px solid #000000;
    content: attr(data-label);
    float: left;
  }
}
Output of the HTML code

Responsive Table Variant II

Category Domain Registered since Price
Internet website-erstellen.de 01.01.2005 1,998 EUR
Advice cms-vergleich.com 01.05.2007 998 EUR
Web Basics css-basics.net 15.08.2009 1,125 EUR
Portals versicherungsvergleich.de 15.09.2018 2,499 EUR
This background       represents the screen and is not part of the sample code.

Resize the browser window or change the zoom factor to see the effect.