CSS Tables
CSS
CSS helps in styling HTML tables to enhance their visual appearance, readability, and responsiveness.
CSS Tables.
➔ CSS can adjust borders, padding, spacing, colors, alignment, etc. to make data more organized and visually appealing to viewers.
➔ Key aspects of table styling include adding visual appeal and implementing responsive layouts.
Syntax
table { border-collapse: collapse; }
table { width: 100%; }
th { background-color: #108090; border: 1px solid #d5d5d5; padding: 10px; text-align: left; }
td { border: 1px solid #d5d5d5; padding: 10px; text-align: left; }
tr:nth-child(odd) { background-color: #f2f2f2; }
tr:hover { background-color: #ddd; }
caption { font-weight: bold; margin: 10px; }
Key CSS Properties for Tables
| Value | Property |
|---|---|
| width | Specifies the width of the table as a percentage of the parent container or as a fixed length. |
| border | Specifies the style, width, and color of the border around table, th, and td elements. |
| border-collapse | Controls the borders of adjacent cells. |
| padding | Defines the space between the cell contents and the cell edge. |
| text-align | Specifies the horizontal alignment of the text. |
| vertical-align | Specifies the vertical alignment of content within cells. |
| tr:nth-child(even/odd) | A pseudo-class used to apply different styles to the <tr> element. |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
border-collapse: collapse;
width:100%;
}
th {
background-color: #10d0f0;
border: 1px solid #d5d5d5;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #d5d5d5;
padding: 10px;
text-align: left;
}
tr:nth-child(odd) {
background-color: #fafaea;
}
tr:hover {
background-color: #ddd;
}
caption {
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<h3>CSS Table Example</h3>
<table>
<caption>Fruits Table</caption>
<thead>
<tr>
<th>Fruit Name</th>
<th>Images</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td><img src="resources/images/fruits-apple-t.png" alt="fruits"><img></td>
</tr>
<tr>
<td>Orange</td>
<td><img src="resources/images/fruits-orange-t.png" alt="fruits"><img></td>
</tr>
<tr>
<td>Blackberry</td>
<td><img src="resources/images/fruits-blackberry-t.png" alt="fruits"><img></td>
</tr>
<tr>
<td>Pineapple</td>
<td><img src="resources/images/fruits-pineapple-t.png" alt="fruits"><img></td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.