1. 表格相关的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格相关的属性</title>
<style>
table {
/* border-width: 2px;
border-color: black;
border-style: solid; */
border: 2px green solid;
}
td,th {
border: 2px green solid;
}
h2 {
border: 3px red solid;
}
span {
border: 3px skyblue dotted;
}
</style>
</head>
<body>
<h2>边框相关的属性不仅仅是表格才能使用</h2>
<span>药水哥</span>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>孙笑川</td>
<td>33</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>刘波</td>
<td>30</td>
<td>团员</td>
</tr>
<tr>
<td>3</td>
<td>药水哥</td>
<td>30</td>
<td>群众</td>
</tr>
</tbody>
</table>
</body>
</html>2. 表格独有的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格独有的属性</title>
<style>
table {
border: 2px green solid;
width: 500px;
/* 控制表格的列宽 */
table-layout: fixed;
/* 单元格间距（生效的前提是：不能合并边框） */
border-spacing: 10px;
/* 合并相邻单元格的边框 */
border-collapse: collapse;
/* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;
}
td,th {
border: 2px orange solid;
}
.number {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th class="number">序号</th>
<th>姓名</th>
<th>年龄</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>孙笑川</td>
<td>33</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>刘波</td>
<td></td>
<td>团员</td>
</tr>
<tr>
<td>3</td>
<td>药水哥</td>
<td>30</td>
<td>群众</td>
</tr>
</tbody>
</table>
</body>
</html>
评论 (0)