HTML Table Styling

0
6K

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
Wellness
Choosing Kindness in the Face of Anger: A Path to Transformation
Imagine standing at the crossroads of an emotional storm. Someone’s words or actions have...
By Olaim 2024-12-18 16:55:54 0 6K
Education
Chinese Exclusion
By Modern American History 2024-08-02 16:41:02 0 7K
Technology
CSS - Styling Web Pages
Cascading Style Sheets (CSS) is a cornerstone technology of the World Wide Web, alongside HTML...
By Olaim 2024-07-26 17:44:53 0 13K
Computer Programming
Break and Continue, Loop Else, and Enumerate
Break, Continue, Loop else, and Enumerate in Python These are all control flow statements used...
Technology
Project Management Software: The Key to Business Growth and Success
Managing multiple projects, teams, and deadlines can be challenging without the right tools....
By emmasmith28 2025-03-03 06:09:10 0 7K