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
Rechercher
Catégories
Lire la suite
Computer Programming
Class Customization and Operator Overloading
Class customization Class customization allows you to define how a class behaves for...
Éducation
ECONOMICS SOLUTIONS TO THE SEMINAR AT MAKERERE HIGH SCHOOL MIGADDE
ECONOMICS SEMINAR AT MAKERERE COLLEGE MIGADDE
Par Landus Mumbere Expedito 2024-07-26 07:46:42 0 9KB
Computer Programming
Types Summary and Type Conversion
Types summary The following is a summary of the different Python types: string -...
Technology
Workbook and Worksheet Basics
Workbook Think of a workbook as a digital binder. It's a container that holds one or more...
Par Microsoft Excel 2024-07-26 04:35:59 0 9KB
Computer Programming
HTML Table Headers: A Comprehensive Guide
HTML table headers are used to define the columns or rows of a table. They are typically styled...
Par HTML PROGRAMMING LANGUAGE 2024-09-06 01:31:21 0 12KB
Talksphare https://talksphare.com