HTML Table Styling

0
12Кб

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
Поиск
Категории
Больше
Образование
The Legacy of Ellis Island
От Modern American History 2024-08-02 16:43:07 0 11Кб
Technology
Understanding the Web and Web Design
The web, or World Wide Web, has revolutionized how we access information, communicate, and...
От ALAGAI AUGUSTEN 2024-07-25 19:26:42 0 18Кб
Technology
Discover How Blockchain is Revolutionizing Data Security
Stay Ahead of the Curve with the Latest in Tech! Discover How Blockchain is Revolutionizing Data...
От ALAGAI AUGUSTEN 2024-07-23 17:21:45 0 20Кб
Physics
weve-been-misreading-a-major-law-of-physics-for-300-years
https://www.sciencealert.com/weve-been-misreading-a-major-law-of-physics-for-300-years
От Landus Mumbere Expedito 2024-11-03 04:28:05 0 16Кб
Technology
INDEX and MATCH Functions
The combination of INDEX and MATCH functions in Excel is a powerful way to perform lookups. This...
От Microsoft Excel Tips 2024-10-16 01:02:42 0 15Кб
Talksphare https://talksphare.com