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
Поиск
Категории
Больше
Technology
BASIC COMPUTER NETWORK
A computer network is a collection of interconnected devices, such as computers, servers, and...
От ALAGAI AUGUSTEN 2024-07-17 17:26:52 0 9Кб
Technology
Using the SUM Function in Excel: A Step-by-Step Guide
The SUM function in Excel is a powerful tool used to calculate the total of a range of numbers....
От Microsoft Excel 2024-09-03 03:17:00 1 13Кб
Physics
SEPTA-O-LEVEL PHYSICS SEMINAR SLATED FOR 23RD JUNE 2024 AT ST. JOSEPH OF NAZARETH HIGH SCHOOL KAVULE-KATENDE
https://acrobat.adobe.com/id/urn:aaid:sc:EU:39c1aa82-237a-43bf-ba1a-fbe5223d26f1
От Question Bank 2024-07-14 19:52:41 2 16Кб
Business
Tips and Tricks of Business Automation
Automation drives innovation, addressing the needs of various industries. Choosing intelligent...
От ALAGAI AUGUSTEN 2024-07-20 18:37:16 0 12Кб
Computer Programming
HTML Table Colgroup
HTML Table Colgroup The colgroup element in HTML is used to group columns within a table. It...
От HTML PROGRAMMING LANGUAGE 2024-09-06 01:44:20 0 13Кб
Talksphare https://talksphare.com