标准的表格结构
table标签:定义表格
caption标签:定义表格标题,这个标题会居中显示在表格上,一个表格只能定义一个标题
th标签:定义表格的表头,通常成粗体居中表示
tr标签:定义表格的一行
td标签:定义表格的一个单元格
thead标签:定义表头
tbidy标签:定义表格主体部分。
tfoot标签:定义表格页脚(脚注)
col标签:针对一个或多个列的属性值,只能table或colgroup标签中使用
colgroup标签:表格列的分组,可以对表格的列组进行格式化,只能在table中使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table ,th,td{
border: 1px solid #000;
width: 400px;
}
tbody tr td{
text-align: center;
}
colgroup .a1{
background-color: aqua;
}
colgroup .a2{
background-color: red;
}
colgroup .a3{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<colgroup >
<col class="a1">
<col class="a2">
<col class="a3">
</colgroup>
<thead>
<caption>学习成绩表</caption>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</thead>
<tbody>
<tr>
<td>90</td>
<td>100</td>
<td>30</td>
</tr><tr>
<td>90</td>
<td>100</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分:</td>
<td></td>
<td>220</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格标签的一些属性
colspan:规定单元格可以横跨的列数
rowspan:规定表头单元格可以横跨的行数
headers:规定与表头单元格或单元格相连的一个或多个单元格
span:规定列组应该横跨的列数
其他属性HTML5已弃用不建议使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,tr,th,td{
border: 1px solid #000;
}
table{
width: 400px;
line-height:10px;
font-size:10px
}
td{
text-align:center;
}
</style>
</head>
<body>
<table>
<caption>人员信息表</caption>
<tr>
<th rowspan="2">姓名</th>
<th rowspan="2">年龄</th>
<th id="gender" colspan="2">性别</th>
</tr>
<tr>
<th headers="gender">男</th>
<th headers="gender">女</th>
</tr>
<tr>
<td>付东流</td>
<td>26</td>
<td>✔️</td>
<td></td>
</tr>
</table>
</body>
</html>
定义细线表格
在表格中每个单元格都有一个独立的空间,因此在设定边框线时显示的是不连贯的线条。
要想使之紧密连接在一起需要使用border-collapse属性来合并单元格,他的值有:
collapse:合并单元格
separate:默认值,每个单元格都有独立的边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,tr,td{
border: 1px solid #000;
width: 200px;
height: 50px;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
单元格空隙
border-spacing:属性定义单元格的空隙,该属性可以分离单元格间距。
他的两个值表示行间距与列间距。也可以定义一个值,行间距与列间距都是这个值
注意:表格的单元格间距不能与合并单元格一起使用,这样会不显示效果。并且这个属性不能使用margin代替。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,tr,td{
border: 1px solid #000;
width: 200px;
height: 50px;
}
table{
/* border-collapse: collapse; */
border-spacing: 10px 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
隐藏单元格
单元格边框处于分离状态时可以使用empty-cells属性设置是否隐藏空白单元格,
他的值是show(展示),hide(不展示)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,tr,td{
border: 1px solid #000;
width: 200px;
height: 50px;
}
table{
/* border-collapse: collapse; */
border-spacing: 10px 10px;
empty-cells: hide;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td></td>
</tr>
</table>
</body>
</html>