HTML Table Styling

0
12KB

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
Suche
Kategorien
Mehr lesen
Ausbildung
Unlock Your Potential with Lifelong Learning
In today’s fast-paced, ever-changing world, the concept of lifelong learning has become...
Von ALAGAI AUGUSTEN 2024-07-21 19:03:27 0 15KB
Technology
Understanding the Excel Interface
Excel's interface is designed to be user-friendly, but it can seem overwhelming at first. Let's...
Von Microsoft Excel 2024-07-26 04:31:22 0 11KB
Technology
The Ten Commandments of Computer Ethics
The Ten Commandments of Computer Ethics were created by the Computer Ethics Institute to guide...
Von ALAGAI AUGUSTEN 2024-07-16 17:02:40 0 12KB
Ausbildung
A MUST KNOW FOR S6 HISTORY STUDENTS
https://acrobat.adobe.com/id/urn:aaid:sc:EU:8ec647ff-c6ae-4844-831f-3f6e719e9bb0
Von Landus Mumbere Expedito 2024-07-15 19:59:30 0 14KB
Talksphare https://talksphare.com