HTML - Table Styling

Previous
Next

HTML Table Styling is done to enhance the readability of tabuler content. There are several table styles to make the table readable, for example setting table width to 100% percent ensures the table fits for every screen size. In this article we will learn different ways to style HTML tables.

Normal HTML Table

A normal HTML tables means a table that does not have any predefined styling. Here we will create a normal HTML table and use styling on that table. Will make modification on the atble as styling.

Define a Normal HTML Table

Here we have created a normal table with some attribute to set the border on each cell of the table and mentioned ids for future puspose when we will need to select those id to style the table.

<!DOCTYPE html>
<html>

<head>
   <title>Normal HTML Table</title>
</head>

<body>
   <table id="table1" border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
   <br />
   <table id="table2" border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>

</html>

HTML Table Styles

There are multiple styles to style an HTML table, here we are listed the popular styles to do that. We can combine below mentioned styles to do the required styling as per the requirements.

Table of Content

HTML Table Styling Examples

Here we have covered all the above mentioned styles with the approaches and complete exammple code. You can manipulate the provided code as well to try your own styling on the existing styles as well.

HTML Table - Border Collapse

We can adjust the space between table borders by manipulating the 'border-collapse' property in CSS. By adjusting the value of border-collapse you can control the spacing or gap between the borders within your table. There are two values possible for border-collapse. The defulat value 'separate' will bring extra gap between table cells, value 'collapse' prevent extra gap in between table cells.

<!DOCTYPE html>
<html>

<head>
   <style>
      #table1 {
         border-collapse: separate;
      }
      #table2 {
         border-collapse: collapse;
      }
   </style>
</head>

<body>
   <table id="table1" border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
   <br />
   <table id="table2" border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>

</html>

HTML Table - Horizontal Zebra Stripes

The Zebra Stripes - Horizontal technique is a common table styling technique used in Microsoft word, this involves styling table rows with alternating colors to enhance the visual appeal and readability of the table contents. In the following code :nth-child(even) selector targets every second row, and a background color is applied to create a striped effect.

<!DOCTYPE html>
<html>

<head>
   <style>
      tr:nth-child(even) {
         background-color: #ffebcd;
      }
   </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir </td>
         <td>7000</td>
      </tr>
      <tr>
         <td> Hussein</td>
         <td>700</td>
      </tr>
      <tr>
         <td>Farhan</td>
         <td>17000</td>
      </tr>
      <tr>
         <td> Raman</td>
         <td>1700</td>
      </tr>
      <tr>
         <td>Laksmi</td>
         <td>7100</td>
      </tr>
      <tr>
         <td>Anagha</td>
         <td>9000</td>
      </tr>        
   </table>
</body>

</html>

HTML Table - Vertical Zebra Stripes

The Zebra Stripes - Vertical technique enhances table readability by applying alternating styles to every other column. This is achieved using the :nth-child(even) selector for both table data (td) and table header (th) elements.

<!DOCTYPE html>
<html>

<head>
   <style>
      td:nth-child(even),
      th:nth-child(even) {
         background-color: #D6EEEE;
      }
   </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
         <th>Designation</th>
         <th>Experience</th>
      </tr>
      <tr>
         <td>Jhon Deo</td>
         <td>5000</td>
         <td>Marketing</td>
         <td>1 year</td>
      </tr>
      <tr>
         <td>Alan Walker</td>
         <td>7000</td>
         <td>Content</td>
         <td>5 year</td>
      </tr>
   </table>
</body>

</html>

Horizontal & Vertical Zebra Stripes

You can make a good readable table contents by combining both horizontal and vertical zebra stripe patterns in your table. This involves applying alternating styles to both rows (:nth-child(even)) and columns (td:nth-child(even), th:nth-child(even)). To enhance this effect, you can consider adjusting the color transparency using the rgba() function. 

<!DOCTYPE html>
<html>

<head>
   <style>
      tr:nth-child(even) {
         background-color: rgba(150, 212, 212, 0.4);
      }
      th:nth-child(even),
      td:nth-child(even) {
         background-color: rgba(212, 150, 192, 0.4);
      }
   </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
         <th>Designation</th>
         <th>Experience</th>
      </tr>
      <tr>
         <td>Jhon Deo</td>
         <td>5000</td>
         <td>Marketing</td>
         <td>1 year</td>
      </tr>
      <tr>
         <td>Alan Walker</td>
         <td>7000</td>
         <td>Content</td>
         <td>5 year</td>
      </tr>
      <tr>
         <td>Tyler Swift</td>
         <td>5000</td>
         <td>Marketing</td>
         <td>1 year</td>
      </tr>
   </table>
</body>

</html>

HTML Table - Text Alignment

You can align the text within your table cells horizontally and vertically using the text-align and vertical-align properties.

<!DOCTYPE html>
<html>

<head>

   <style>
      td,
      th {
         text-align: right;
         vertical-align: middle;
      }
   </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>

</html>

HTML Table - Horizontal Dividers

Horizontal Dividers are used between rows of table to separate each rows from other, so that overall readability of table is improved. You can use border-bottom property of CSS to design a border under the table. 

<!DOCTYPE html>
<html>

<head>
   <style>
      table {
         border-collapse: collapse;
      }
      tr {
         border-bottom: 5px solid #ddd;
      }
      th,
      td {
         padding: 10px;
         /* Add padding for better visibility */
      }
   </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>

</html>

Hoverable Table Rows

Making a table row to change it's color on hovering the mouse pointer over it improves user experience and readability. The below HTML program creates a table with a border. The CSS style makes the rows change the background color to light blue when hovered over.

<!DOCTYPE html>
<html>

<head>
   <style>
      tr:hover {
         background-color: #D6EEEE;
      }
   </style>
</head>

<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>

      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>

</html>

Cnclusion

There are lots of other styles that can be applied on HTML Tables, above styles are the most common styles that are in used for a decade. Keep practicing to create your own table styles using CSS that fits your requirements.

Print Page
Previous
Next
Advertisements