标准的表格结构
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>