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 »