We can style HTML table rows using CSS. We can use the tr selector to target table rows and apply CSS properties to them.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<table>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Slavoj</td>
<td>Zizek</td>
</tr>
<tr>
<td>Jordan</td>
<td>Peterson</td>
</tr>
</table>
</body>
</html>
This is an HTML table with three rows and two columns.
The first row contains two table headers (th) with the labels "Name" and "Last Name".
The other two rows contain data cells (td) with the names "Slavoj" and "Zizek" in the first row, and "Jordan" and "Peterson" in the second row.
The first row with the headers is used to describe the content of the following rows, which represent the actual data.
table, th, td {
width: 500px;
border: 2px blue solid;
border-collapse: collapse;
margin: auto;
}
th {
background: lightblue;
color: black;
height: 40px;
text-align: left;
padding-left: 5px;
}
tr:hover {
background: yellow;
}
td {
padding: 25px;
}
This CSS code targets the table rows and table data cells of an HTML table.
tr:hover selector applies the styles to the table row when the user hovers over it with their mouse, changing the background color of the row to yellow.
The td selector applies padding to all table data cells within the table, making the content inside each cell have a distance of 25 pixels from the border of the cell.
table, th, td {
width: 500px;
border: 2px blue solid;
border-collapse: collapse;
margin: auto;
}
th {
background: lightblue;
color: black;
height: 40px;
text-align: left;
padding-left: 5px;
}
tr:nth-child(even) {
background: yellow;
}
tr:nth-child(odd) {
background: lightblue;
}
tr:hover {
background: white;
border: 10px red solid;
}
td {
padding: 25px;
}
This CSS code styles HTML table rows with alternating colors and a different color on hover:
tr:nth-child(even)selects all even rows (2nd, 4th, 6th, etc.) and sets their background color to yellow.tr:nth-child(odd)selects all odd rows (1st, 3rd, 5th, etc.) and sets their background color to lightblue.tr:hoverselects the row that the mouse is hovering over and sets its background color to white. Additionally, it adds a red solid border with a width of 10 pixels to the hovered row.
The td selector sets a padding of 25 pixels to all table cells.
No comments:
Post a Comment