、| 和 | 。
人员管理
| 姓名 |
年龄 |
城市 |
| 张三 |
25 |
北京 |
| 李四 |
30 |
上海 |
| 王五 |
28 |
广州 |
二、HTML表格的属性
HTML表格标签支持多种属性，用于控制表格的布局和样式。以下是一些常用的属性：
1.border
定义表格边框的宽度（以像素为单位）。例如，border="1"表示边框宽度为1像素。
2.width 和 height
定义表格的宽度和高度（可以是像素值或百分比）。例如，width="100%"表示表格宽度为父容器宽度的100%。
3.cellpadding
定义单元格内边距（已废弃，建议使用CSS）。该属性控制单元格内容与单元格边缘的距离。
例如，cellpadding="10"表示单元格内边距为10像素（但建议使用CSS的padding属性代替）。
4.cellspacing
定义单元格之间的间距（已废弃，建议使用CSS）。该属性控制单元格与单元格之间的间距。
例如，cellspacing="5"表示单元格间距为5像素（但建议使用CSS的border-spacing或margin属性代替）。
5.bgcolor 和 background
设置表格的背景颜色或背景图片。例如，bgcolor="#99cc66"表示背景颜色为浅绿色；background="路径/图片名.jpg"表示背景图片为指定路径下的图片（背景图片的优先级高于背景颜色）。
6.align
定义表格在页面中的水平对齐方式。可取值包括left（左对齐）、right（右对齐）和center（居中对齐）。
7.bordercolor、bordercolorlight 和 bordercolordark
分别设置表格边框的颜色、上/左边框及单元格右/下边框的颜色（用于3D效果）、以及右/下边框及单元格上/左边框的颜色（也用于3D效果）。
8.colspan
在 | 或 | 标签中使用，定义单元格跨越的列数。例如， | 表示该单元格跨越两列。
9.rowspan
在 | 或 | 标签中使用，定义单元格跨越的行数。例如， | 表示该单元格跨越两行。
***HTML属性虽然提供了基本的样式控制，但高版本废弃了很多东西。开发时更推荐使用CSS来美化和布局表格。CSS提供了更丰富的样式选项，如边框样式、背景颜色、字体样式、内外边距等。
例如，可以使用CSS的border-collapse属性来合并表格边框，使表格看起来更加整洁；使用padding属性来控制单元格内边距；使用background-color和background-image属性来设置表格的背景颜色和背景图片；以及使用text-align属性来设置单元格内文本的对齐方式等。
三、示例代码
以下是一个包含表头和多行数据的简单HTML表格示例，并使用了CSS样式进行美化：
html代码
| 姓名 |
年龄 |
职业 |
| 张三 |
28 |
工程师 |
| 李四 |
32 |
设计师 |
| 李四 |
32 |
设计师 |
css代码
table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
}
th, td {
border: 1px solid #ddd; /* 边框样式 */
padding: 8px; /* 内边距 */
text-align: center; /* 文本对齐方式 */
}
th {
background-color: #f2f2f2; /* 表头背景颜色 */
text-align: center; /* 表头文本对齐方式 */
}
tr:nth-child(even) {
background-color: #878787; /* 偶数行背景颜色 */
}
若文章对你有帮助，点赞、收藏加关注吧！
|
