HTML Table Styling

You can use CSS to style HTML tables and their elements, providing greater flexibility and customization options. Here are some common styling techniques:

Table-Level Styling

• Border:
  CSS

  table {
    border: 1px solid #ccc;
  }
  

• Width:
  CSS

  table {
    width: 80%;
  }
  

• Background Color:
  CSS

  table {
    background-color: #f2f2f2;
  }
  

Header and Data Cell Styling

• Font:
  CSS

  th {
    font-weight: bold;
    text-align: center;
  }
  
  td {
    text-align: left;
  }
  

• Background Color:
  CSS

  th {
    background-color: #4CAF50;
    color: white;
  }
  

• Padding:
  CSS

  th, td {
    padding: 8px;
  }
  

Striped Rows

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Hover Effects

tr:hover {
  background-color: #ddd;
}

Example

<table style="border: 1px solid #ccc; width: 80%;">
  <thead>
    <tr>
      <th style="background-color: #4CAF50; color: white;">Product</th>
      <th style="background-color: #4CAF50; color: white;">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$100</td>
    </tr>
    <tr style="background-color: #f2f2f2;">
      <td>Product B</td>
      <td>$200</td>
    </tr>
  </tbody>
</table>

Note: For more advanced styling, consider using CSS frameworks like Bootstrap or Materialize, which provide pre-built styles and components for tables and other elements.

By combining these techniques, you can create visually appealing and informative HTML tables that enhance the user experience of your web applications.