HTML - Table Styling

Border Collapse

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

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

Zebra Stripes - Horizontal

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

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

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

Example

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

Zebra Stripes - Vertical

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

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

Combine Vertical and Horizontal Zebra Stripes

You can achieve a captivating visual effect 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, 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

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

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

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

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

Advertisements