CSS控制表格边框
可以为表格标签定义宽,高和边框样式,并为单元格单独设置相应的边框。如果只设置<table>
样式,则只显示外边框的样式,内部不显示边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签table的使用</title>
<style type="text/css">
table{
width: 200px;
height: 200px;
/*background-color: red;*/
border: 2px solid red;
}
</style>
</head>
<body>
<table>
<caption>人员表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>婚姻状况</th>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>翠花</td>
<td>20</td>
<td>女</td>
<td>未婚</td>
</tr>
</table>
</body>
</html>
边框合并
给table属性设置该属性
border-collapse:collapse; separate属性值为默认属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签table的使用</title>
<style type="text/css">
table{
width: 200px;
height: 200px;
/*background-color: red;*/
border: 2px solid red;
border-collapse: collapse;
}
th,td{
border:2px solid red;
}
</style>
</head>
<body>
<table>
<caption>人员表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>婚姻状况</th>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>翠花</td>
<td>20</td>
<td>女</td>
<td>未婚</td>
</tr>
</table>
</body>
</html>
◆单元格设置的外边距属性margin不生效
◆如果要设置单元格内容与边框之间的距离,可以对<th>
标签应用内边距样式属性padding或者对<table>
标签应用cellpadding属性。
◆要想设置相邻单元格边框之间的距离,只能对<table>
标签应用cellspacing属性。
◆如果对同一行中的单元格定义不同的高度,或对同一列的第一个定义不同的宽度时,取较大者。