HTML Table Styling

0
12K

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

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

Hover Effects

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

Example

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

Like
2
Pesquisar
Categorias
Leia Mais
Technology
Decision Support Systems (DSS)
Decision Support Systems (DSS) are computerized information systems designed to assist in...
Por Business Information Systems (BIS) Course 2024-08-01 17:00:08 0 9K
Educação
Lunch Atop A Skyscraper
Por Modern American History 2024-08-02 16:39:22 0 12K
Educação
The Compromise of 1877
The Compromise of 1877, also known as the Wormley Agreement, the Bargain of 1877, or the Corrupt...
Por Modern American History 2024-07-19 05:48:55 0 9K
Physics
MATIGO PHYSICS PAPER 1 2024
MATIGO UACE PHYSICS PAPER 1 2024
Por Question Bank 2024-09-05 17:26:27 0 16K
Music
How to Get YouTube Premium for Free?
Using YouTube Vanced: The Popular Alternative YouTube Vanced has emerged as one of the most...
Por Vanced32 Vanced32 2025-03-17 13:55:13 0 19K
Talksphare https://talksphare.com