html5 构建一个3行2列的表格,并用css调整每格大小,字体,背景颜色,对齐方式,采用相对
时间: 2024-09-16 09:02:00 浏览: 75
my-first-form-:这是我用html和css制作的第一个表格
在HTML5中构建一个3行2列的表格,可以这样编写:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
table {
width: 100%; /* 设置表格宽度为100%,适应屏幕 */
}
tr td {
border: 1px solid #ccc; /* 边框 */
padding: 8px; /* 内边距增加空白感 */
text-align: center; /* 文字水平居中 */
font-size: 16px; /* 字体大小 */
background-color: lightgray; /* 背景色 */
}
/* 三行两列,第一列的特殊样式 */
.first-column {
width: 48%; /* 第一列占总宽的一半 */
float: left;
}
/* 第二列(偶数行)的背景色 */
.even-row td {
background-color: white;
}
/* 第二列(奇数行)的背景色 */
.odd-row td {
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<tr class="odd-row first-column">
<td>第一行第1列</td>
</tr>
<tr class="even-row">
<td>第一行第2列</td>
</tr>
<tr class="odd-row">
<td>第二行第1列</td>
</tr>
<tr class="even-row first-column">
<td>第二行第2列</td>
</tr>
<tr class="odd-row">
<td>第三行第1列</td>
</tr>
<tr class="even-row first-column">
<td>第三行第2列</td>
</tr>
</table>
</body>
</html>
```
上述代码首先创建了一个100%宽度的表格,设置了每格的基本样式,如边框、内边距、字体和背景色。`.first-column`类用于设置第一列的宽度为总宽度的一半,通过浮动使其紧贴左边。`.even-row`和`.odd-row`分别用于奇数行和偶数行,它们有各自的颜色样式。
阅读全文