Jobs Hub

CSS Style Tables

This article is created to cover multiple examples that shows how to design a table using CSS. Let's start with border around the table.

Create a Border around a Table using CSS

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      table{border: 1px solid red;}
   </style>
</head>
<body>

   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Marilyn</td>
         <td>Santa Monica</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name City
Marilyn Santa Monica
Gigi Malibu

Note - The border property creates a border around an element.

Create a Border around all Table Headings using CSS

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      th{border: 1px solid red;}
   </style>
</head>
<body>

   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Marilyn</td>
         <td>Santa Monica</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name City
Marilyn Santa Monica
Gigi Malibu

In similar way, to create a border around all table data, use following CSS code:

td{border: 1px solid red;}

Now the output would be:

Name City
Marilyn Santa Monica
Gigi Malibu

CSS Table Style - Create Borders

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td{border: 1px solid red;}
   </style>
</head>
<body>

   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Marilyn</td>
         <td>Santa Monica</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name City
Marilyn Santa Monica
Gigi Malibu

Now with following CSS code:

table, th, td{border: 1px solid red; border-collapse: collapse;}

The output change to:

Name City
Marilyn Santa Monica
Gigi Malibu

And with following CSS code:

th, td{border: 1px solid red;}

The output change to:

Name City
Marilyn Santa Monica
Gigi Malibu

Note - The border-collapse property collapse the table border into a single border.

Create Padding to Table Cells

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td{border: 4px solid purple; border-collapse: collapse;
         padding: 12px;}
   </style>
</head>
<body>

   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Marilyn</td>
         <td>Santa Monica</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name City
Marilyn Santa Monica
Gigi Malibu

Note - The padding property creates gap between the border and the content of specified element.

Align Table Heading to Left using CSS

To align table heading to left, use following CSS code:

th{text-align: left;}

For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td{border: 4px solid purple; border-collapse: collapse;
         padding: 12px;}
      table.mytb th{text-align: left;}
   </style>
</head>
<body>

   <h2>Without th{text-align: left;}</h2>
   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Natalia Nikolaevna Zakharenko</td>
         <td>Vancouver</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
   </table>

   <h2>With th{text-align: left;}</h2>
   <table class="mytb">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Natalia Nikolaevna Zakharenko</td>
         <td>Vancouver</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
   </table>
   
</body>
</html>
Output

Without th{text-align: left;}

Name City
Natalia Nikolaevna Zakharenko Vancouver
Gigi Malibu

With th{text-align: left;}

Name City
Natalia Nikolaevna Zakharenko Vancouver
Gigi Malibu

Note - The text-align property aligns the text horizontally.

Create Line Between Table Rows (Horizontal Divider) using CSS

To create a line between all table rows using CSS, use following CSS code:

th, td {border-bottom: 1px solid purple;}

For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      th, td{border-bottom: 1px solid purple; padding: 12px;}
      th{text-align: left;}
   </style>
</head>
<body>

   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Natalia Nikolaevna Zakharenko</td>
         <td>Vancouver</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name City
Natalia Nikolaevna Zakharenko Vancouver
Gigi Malibu

If I'm not wrong, this one looks simple and elegant. But web designing is sometime subjective, as it depends on person to person.

Create Striped Table using CSS

To create a striped table, use following CSS code:

tr:nth-child(even){background-color: aliceblue;}

The color is your choice. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      th, td{padding: 12px;}
      th{text-align: left;}
      tr:nth-child(even){background-color: aliceblue;}
   </style>
</head>
<body>

   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Natalia Nikolaevna Zakharenko</td>
         <td>Vancouver</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
      <tr>
         <td>Joaquin Rafael Bottom</td>
         <td>Halifax</td>
      </tr>
      <tr>
         <td>Gary Edward Keillor</td>
         <td>Liverpool</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name City
Natalia Nikolaevna Zakharenko Vancouver
Gigi Malibu
Joaquin Rafael Bottom Halifax
Gary Edward Keillor Liverpool

Note - Use odd in place of even to select first row, then third row, then fifth, and so on.

To change the background of table heading content, use following CSS code:

th{background-color: antiquewhite;}

The color is your choice. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      th, td{padding: 12px;}
      th{text-align: left; background-color: antiquewhite;}
      tr:nth-child(even){background-color: aliceblue;}
   </style>
</head>
<body>

   <table>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Natalia Nikolaevna Zakharenko</td>
         <td>Vancouver</td>
      </tr>
      <tr>
         <td>Gigi</td>
         <td>Malibu</td>
      </tr>
      <tr>
         <td>Joaquin Rafael Bottom</td>
         <td>Halifax</td>
      </tr>
      <tr>
         <td>Gary Edward Keillor</td>
         <td>Liverpool</td>
      </tr>
   </table>
   
</body>
</html>
Output
Name City
Natalia Nikolaevna Zakharenko Vancouver
Gigi Malibu
Joaquin Rafael Bottom Halifax
Gary Edward Keillor Liverpool

Create Full Width Table using CSS

To create or expand the table to acquire the full width of the current window, use following CSS code:

table{width: 100%;}

I'm going to add this code in previous example. Now I've got the output that is exactly same as:

Name City
Natalia Nikolaevna Zakharenko Vancouver
Gigi Malibu
Joaquin Rafael Bottom Halifax
Gary Edward Keillor Liverpool

Here are the list of some CSS properties that can be used to define the design and layout of a table:

CSS Online Test

« Previous Tutorial Next Tutorial »