Experiments with table columns:
<!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>
table, th, td {
width: 500px;
border: 2px blue solid;
border-collapse: collapse;
}
th {
background: lightblue;
color: black;
height: 40px;
text-align: left;
}
td {
background: lightyellow;
height: 40px;
vertical-align: center;
text-align: center;
}
This CSS code sets the style of an HTML table and its elements.
The table element and its th and td child elements are all set to have a width of 500 pixels, a blue border with a width of 2 pixels, and collapsed borders.
The th elements have a light blue background color, black text color, a height of 40 pixels, and left-aligned text.
The td elements have a light yellow background color, a height of 40 pixels, centered vertical alignment, and centered text alignment.
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;
}
td {
background: lightyellow;
padding: 25px;
}
This CSS code styles an HTML table by setting a blue solid border of 2px width, collapsing table borders, and centering it horizontally using margin: auto.
The table headers (<th>) have a light blue background, black text color, and a height of 40px. The text is aligned to the left using text-align: left and a padding of 5px is added on the left side of the content using padding-left: 5px.
The table data cells (<td>) have a light yellow background and a padding of 25px on all sides. The content is aligned vertically to the center of the cell using vertical-align: center and text is aligned to the center using text-align: center.
No comments:
Post a Comment