Styling HTML Tables with CSS

Introduction

CSS can be used to style HTML tables and make them visually appealing. Let's explore some ways to style tables.

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML Tables with CSS</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    th {
      background-color: #f2f2f2;
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    
    td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    
    .highlight {
      background-color: yellow;
    }
    
    .center {
      text-align: center;
    }
    
    .right {
      text-align: right;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
      <tr>
        <td class="highlight">Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
      </tr>
      <tr>
        <td>Cell 7</td>
        <td class="center">Cell 8</td>
        <td class="right">Cell 9</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The table selector applies styles to the table element. We set the width to 100% and collapse the table borders using border-collapse: collapse.
The th selector applies styles to the table header cells. We set the background color to a light gray (#f2f2f2), add a border, set padding, and align the text to the left.

The td selector applies styles to the table data cells. We set a border, padding, and a default background color.

The tr:nth-child(even) selector selects every even row in the table body and applies a different background color (#f9f9f9) to create alternating row colors.

The .highlight class is applied to a specific cell in the table body to give it a yellow background color.

The .center class and the .right class are applied to specific cells to align the text to the center and right, respectively.

Applying CSS styles to tables: You can apply CSS styles directly to the <table> element or use class or ID selectors to target specific tables. By manipulating CSS properties like background-color, color, font-size, and padding, you can customize the appearance of your tables.
Changing table font styles: To change the font styles within a table, you can target the <td>, <th>, or <caption> elements and apply CSS properties such as font-family, font-weight, and text-transform.
Customizing table borders: CSS provides various properties to customize table borders, such as border, border-width, border-color, and border-radius. By using these properties, you can create different border styles, including rounded corners.
Adding hover effects: You can enhance the interactivity of your tables by adding hover effects. By applying CSS styles to the <tr> or <td> elements within a table, you can change their background color or apply other visual effects when a user hovers over them.