HTML - Table Styling

Previous
Quiz
Next

You can style HTML tables by using the CSS. Table styling helps you to customize the normal appearance of the elements like borders, cell padding, text alignment, background colors, and more to create a well-formatted table on a webpage.

The following are some of the table stylings in HTML:

Collapsed Border Table

You have the flexibility to manage the space between table borders by manipulating the 'border-collapse' property. This property determines how adjacent table cell borders interact, and adjusting it allows you to control the spacing or gap between the borders within your table.

By setting 'border-collapse' to "collapse", borders will merge, eliminating any spacing, while "separate" allows you to control the spacing using the 'border-spacing' property, providing a more customized appearance to your table layout.

Example

This is an example of a collapsed border table, where the table borders are merged into a single border using the border-collapse: collapse; property.

<!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>

Horizontal Zebra Striped Table

The Zebra Stripes - Horizontal technique involves styling table rows with alternating colors, enhancing the visual appeal and readability of the table.

The :nth-child(even) selector targets every second row, and a background color is applied to create a striped effect.

Example

This is an example of a horizontal zebra-striped table, here alternating rows are styled with different background colors:

<!DOCTYPE html>
<html>
<head>
   <style>
      tr:nth-child(even) {
         background-color: #8a83de;
      }
   </style>
</head>
<body>
   <table border="1">
      <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>
   </table>
</body>
</html>

Text Alignment in Table Cells

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

Example

This is an example of text alignment in table cells:

<!DOCTYPE html>
<html>
<head>
   <style>
      td,
      th {
         text-align: center;
         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>

Vertical Zebra Striped Table

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.

Example

This is an example of a vertical zebra-striped table, where alternating columns are styled with different background colors:

<!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>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

Table with Combined Vertical & Horizontal Zebra Stripes

You can achieve a captivating visual effect by combining both horizontal and vertical zebra stripe patterns on 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, consider adjusting the color transparency using the rgba() function, creating an engaging and aesthetically pleasing overlap of stripes for a unique and visually interesting outcome.

Example

This is an example of a table with combined vertical and horizontal zebra stripes, where both alternating rows and columns are styled with different background colors:

<!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>
      </tr>
      <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
      </tr>
      <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
      </tr>
   </table>
</body>
</html>

Table with Horizontal Dividers

You can enhance the visual structure of your table by incorporating horizontal dividers. Achieve this effect by styling each '<tr>' element with a bottom border.

This CSS customization provides a clear separation between rows, contributing to improved table clarity and a more organized presentation of tabular data.

Example

This is an example of a table with horizontal dividers, where each row is separated by a distinct horizontal line:

<!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>

The above HTML program defines a simple table with two rows and two columns. CSS styles are applied to create a visual separation between rows using a solid border at the bottom of each row. The border-collapse property ensures a cleaner layout, and padding is added for improved visibility of table cells.

Hoverable Table Rows

You can improve user interaction by employing the ':hover' selector, which highlights table rows when users hover over them. This enhances the visual feedback, making the table more interactive and user-friendly.

Example

This is an example of hoverable table rows, where the background color of a table row changes when the user hovers over it:

<!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>

The above HTML program creates a table with a border. The CSS style makes the rows change the background color to light blue when hovered over, enhancing user interaction.

Print Page
Previous
Next
Advertisements