HTML Table Styling

0
2K

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
Search
Categories
Read More
Chemistry
UCE CHEMISTRY SCORING GUIDE
UCE CHEMISTRY SCORING GUIDE
By Landus Mumbere Expedito 2024-08-10 13:47:53 0 2K
Education
Black Codes and Segregation in Reconstruction
Black Codes: The Black Codes were a series of laws passed by Southern states after the Civil...
By Modern American History 2024-07-19 05:43:15 0 2K
Computer Programming
HTML Table Styling
HTML Table Styling You can use CSS to style HTML tables and their elements, providing greater...
By HTML PROGRAMMING LANGUAGE 2024-09-06 01:39:01 0 2K
Technology
Network topologies
Network topology refers to the arrangement of various elements (like nodes and links) in a...
By Mpatswe Francis 2024-10-03 22:58:40 0 1K
Other
Clear the Clutter
 A Word of Encouragement Life is a journey filled with ups and downs, triumphs and...
By ALAGAI AUGUSTEN 2024-08-10 12:44:57 0 2K