table
- thead 标题
- tr 行
- th 表头
- td 列
- cellspacing 单元格和单元格之间的距离
- cellpadding 单元格内内容和边框的距离
- text-align: 文本对齐方式
- style="border-collapse:collapse 专门用于做表格细线边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 300px;
height: 200px;
text-align: center ;
background-color: yellow;
}
</style>
</head>
<body>
<table border="1" align="center" >
<caption>学生信息</caption>
<thead>
<tr style="height: 80px;font-size: 30px">
<th id="studentId">学号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tr>
<td>08</td>
<td class="a">吉吉</td>
<td class="a">男</td>
<!--跨行合并 rowspan
跨列合并 colspan-->
<td rowspan="3">打麻将</td>
</tr>
<tr>
<td>09</td>
<td>Luna</td>
<td>女</td>
<!--<td>打麻将</td>-->
</tr>
<tr>
<td>11</td>
<td>马珂</td>
<td>男</td>
<!--<td>打麻将</td>-->
</tr>
</table>
</body>
</html>
在style里加 border-collapse:collapse
测试
- cellspacing 单元格和单元格之间的距离
- cellpadding 单元格内内容和边框的距离
去掉border-collapse:collapse在table行内加
cellspacing="0" cellpadding="0"
线条重叠
改为cellspacing="10" cellpadding="0"
单元格之间距离变大
改为cellspacing="0" cellpadding="20"
内容和表格距离变大