HTML Table Styling

0
10K

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
Technology
Increasing Pressure on IT Experts
Information technology (IT) experts face increasing pressure due to several factors that have...
By ALAGAI AUGUSTEN 2024-07-16 16:57:22 0 8K
Technology
Forms of Computer Software Attacks
Computer software attacks are malicious activities aimed at compromising the security, integrity,...
By ALAGAI AUGUSTEN 2024-07-13 17:30:11 0 9K
Technology
HOW TO OVERCOME COMPUTER NETWORK CHALLENGES
Overcoming the challenges faced in managing and using computer networks requires a combination of...
By ALAGAI AUGUSTEN 2024-07-17 17:38:08 0 8K
Technology
Intellectual Property Rights (IPR)
Intellectual Property Rights (IPR) are legal protections granted to creators and inventors to...
By ALAGAI AUGUSTEN 2024-07-13 08:06:43 0 10K
Computer Programming
Basic structure of an HTML document
An HTML document is composed of two main sections: the head and the body. The <head>...
By HTML PROGRAMMING LANGUAGE 2024-08-13 03:25:34 0 8K
Tebtalks https://tebtalks.com