HTML Table Styling
Posted 2024-09-06 01:39:01
0
12K
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.
Căutare
Categorii
- Technology
- Educaţie
- Business
- Music
- Got talent
- Film
- Politics
- Food
- Jocuri
- Gardening
- Health
- Home
- Literature
- Networking
- Alte
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
Citeste mai mult
Licensing Linux
Linux is an open-source operating system kernel, and its licensing is a crucial aspect of its...
Immigration timeline 1849-1924
1849: America’s first anti-immigrant political party, the Know-Nothing...
Versions of the Linux Operating System
Linux is a versatile and open-source operating system kernel that serves as the foundation for a...
Choosing Kindness in the Face of Anger: A Path to Transformation
Imagine standing at the crossroads of an emotional storm. Someone’s words or actions have...