从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
复习：从零开始学前端：链接跳转 — 今天你学习了吗？（CSS：Day03）
文章目录
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第四节课：讲述了表格的基本标签和如何制作表格一、表格标签二、很多时候要用div来模拟table，为什么呢？三、表格属性四、表格结构化标签五、单元格的合并六、练习前言
第四节课：讲述了表格的基本标签和如何制作表格
一、表格标签
作用以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式(主要是用来展示数据的)
格式：
table：定义表格tr：定义行td：定义单元格th：定义单元格表头(突出重要性)
基本语法
<table><tr><td></td></tr></table>
二、很多时候要用div来模拟table，为什么呢？
为什么不使用表格布局：
table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。对用户的体验度更好，很多时候如果页面过大，而table又位于页面的第一屏，就需要考虑用div来模拟table了。
三、表格属性
*注意：以上属性在企业开发中我们会用css去代替，这里仅仅是去了解
四、表格结构化标签
使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.在表格标签中，分别用:标签表格的头部区域、标签表格的主体区域、标签定义表格的页脚（脚注或表注）。这样可以更好的分清表格结构。使语义更清晰。
<table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot></table>
五、单元格的合并
特殊情况下,可以把多个单元格合并为一个单元。
合并单元格的方式：
跨行合并：rowspan="目标单元格"。跨列合并: colspan="合并单元格的个数"。
目标单元格：
跨行合并：最上侧为目标单元格，写合并代码跨列合并:最左侧单元格为目标单元格,写合并代码
合并单元格的步骤：
1. 首先确定先是跨行合并还是跨列合并2. 找到目标单元格.写上合并方式=合并的单元格数量。比如: <td colspan= “2”></td>3. 删除多余的单元格
六、练习
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title></head><body><table border="1px" align="center" cellspacing="0px"><thead><tr><th>书名</th><th>著者</th><th>出版社</th><th>出版时间</th><th>单价</th><th>热度</th></tr></thead><tbody><tr align="center"><td>翻译美学理论</td><td>刘宓庆</td><td>外语教学与研究出</td><td>-3-1</td><td>49.9￥</td><td><img src="./hot.png" width="30px" height="30px"></td></tr><tr align="center"><td>医学英语入门</td><td>姜瑾</td><td>苏州大学出版社</td><td>-11-1</td><td>38￥</td><td><img src="./hot.png" width="30px" height="30px"></td></tr><tr align="center"><td>医学英语翻译与写作教程</td><td>王燕</td><td>重庆大学出版社</td><td>-9-1</td><td>27￥</td><td><img src="./hot.png" width="30px" height="30px"></td></tr><tr align="center"><td>医学英语读写译教程</td><td>德江、刘明</td><td>中南大学出版社</td><td>-2-1</td><td>24￥</td><td><img src="./hot.png" width="30px" height="30px"></td></tr><tr align="center"><td>翻译概论</td><td>姜倩、何刚强</td><td>上海外语教育出版</td><td>-9-1</td><td>428￥</td><td><img src="./hot.png" width="30px" height="30px"></td></tr><tr align="center"><td>简明中西翻译史</td><td>谢天振、何绍斌</td><td>外语教学与研究出版社</td><td>-11-1</td><td>29.8￥</td><td><img src="./hot.png" width="30px" height="30px"></td></tr><tr align="center"><td>“传神达意”翻译理论研究</td><td>门顺德</td><td>上海外语教育出版社</td><td>-12-1</td><td>38￥</td><td><img src="./hot.png" width="30px" height="30px"></td></tr></tbody><tfoot><td colspan="6" bgcolor="pink" align="center">以上作为参考，以实物为主。</td></tfoot><!-- colspan：合并列，横向合并rowspan：合并行，纵向合并 --></table></body></html>
预习：从零开始学前端：表单制作 — 今天你学习了吗？（CSS：Day05）
------千里之行，始于足下。
