CSS Tables

The HTML tables allow web developers to arrange data like text, images, links, other tables, etc. into rows and columns of cells. By the using of CSS we can apply the style on HTML tables for better look and feel. The CSS properties which are used to customize the table layout are as follows :

Table border :

The border property is used to specify the border of the table. Example :
 border: 1px solid gray;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid gray;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect


Table border collapse :

The border-collapse border property is used to collapse all borders in one border only.
 border-collapse : collapse;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid gray;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect


Table Padding :

The padding property is used to control the space between the border and the content in a table. And note that use the padding property between <td> and <th> elements.
 padding: 10px;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid gray;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
    } 
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect


Width and Height of Table :

The width and height properties are used to define the width and height of a table. The values of both properties are in pixels and %.
 width: 100%;
 height: 300px;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid gray;
      border-collapse: collapse;
    }
    table {
      width: 100%;
    } 
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect


Text Alignment :

The text-align property is used to set the alignment for the content of the <th> and <td>. The possible values are left, right and center.
 text-align: center;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid gray;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect

And to set the vertical alignment for the content of <th> and <td>, the vertical-align property is used. The possible values are top, bottom or middle.
 vertical-align: bottom;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid gray;
      border-collapse: collapse;
    }
    table {
      width: 100%;
    }
    td {
      height: 50px;
      text-align: center;
      vertical-align: bottom;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect


Table Colors :

The background-color and color properties are used to coloring the tables.
 background-color: lightgreen;
 color: white;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid gray;
      border-collapse: collapse;
    }
    table {
      width: 100%;
    }
    th, td {
      padding: 9px;
      text-align: center;
    }
    th {
      background-color: orange;
      color: black;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect


Horizontal Dividers :

The border-bottom property is used to draw just horizontal dividers in the table. Also note that for only draw horizontal lines don't use the border property.
 border-bottom: 1px solid #D3D3D3;
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border-collapse: collapse;
    }
    table {
      width: 100%;
    }
    th, td {
      padding: 9px;
      text-align: center;
      border-bottom:1px solid #D3D3D3;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect


Striped Tables :

To draw a zebra-stripped table, we can use the :nth-child() selector and add a background-color to all even (or odd) table rows:
 tr:nth-child(even) {background-color: #dcdcdc;}
Or
 tr:nth-child(odd) {background-color: #dcdcdc;}
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border-collapse: collapse;
    }
    table {
      width: 100%;
    }
    th, td {
      padding: 9px;
      text-align: center;
      border-bottom:1px solid #D3D3D3;
    }
    tr:nth-child(even) {background-color: #dcdcdc;} 
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect
Tom Hardy 40 Actor
Bruce Wayne 44 Business Man


Hoverable Table :

We can also use use :hover selector on <tr> to highlight the table rows on mouse over.
 tr:hover {background-color: #dcdcdc};
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border-collapse: collapse;
    }
    table {
      width: 100%;
    }
    th, td {
      padding: 9px;
      text-align: center;
      border-bottom:1px solid #D3D3D3;
    }
    tr:hover {background-color: #dcdcdc;} 
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Age</th> 
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>34</td> 
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack Rietcher</td>
      <td>40</td> 
      <td>System Architect</td>
    </tr>
  </table>
</body> 
</html>
Output :


Firstname Age Occupation
John Doe 34 Web Developer
Jack Rietcher 40 System Architect
Tom Hardy 40 Actor
Bruce Wayne 44 Business Man


Responsive Table : 

 The responsive table will display a horizontal scroll bar if the screen is too small to display the full content. To do this we need to add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive.
<div style="overflow-x:auto;">
<table>
 content of table............
</table>
</div>
Example :
<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border-collapse: collapse;
    }
    table {
      width: 1000px;
    }
    th, td {
      text-align: center;
      border-bottom: 1px solid #D3D3D3;
    } 
  </style>
</head>
<body>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Firstname</th>
      <th>lastname</th>
      <th>Age</th> 
      <th>Qualification</th>
      <th>University</th>
      <th>Address</th>
      <th>Country</th>
      <th>Occupation</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>34</td> 
      <td>BS In Computer Seicence</td>
      <td>University of Cambridge</td>
      <td>Boston City</td>
      <td>USA</td>
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>Rietcher</td>
      <td>40</td> 
      <td>BS in Computer Science</td>
      <td>University of Cambridge</td>
      <td>Gotham City</td>
      <td>USA</td>
      <td>System Architect</td>
    </tr>
  </table>
</div>
</body> 
</html>
Output :


Firstname lastname Age Qualification University Address Country Occupation
John Doe 34 BS In Computer Seicence University of Cambridge Boston City USA Web Developer
Jack Rietcher 40 BS in Computer Science University of Cambridge Gotham City USA System Architect


Next Topic :