马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-6-4 17:42 编辑
在线视频：
课程思维导图
1、table元素
table元素用来在网页中实现一个表格。
在以前的网页开发时代，可以用来做布局并且拥有很多属性，而在H5的时代，这些属性都被废弃了：
原因很简单：
最简单的一个表格：<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
table元素最外层，内层就是一行一行的tr元素。
表头往往还有一行，所以在第一个tr元素中，内嵌表头格th元素。
其他行的都是表格td元素。
默认th元素有加粗居中效果，td元素只是左对齐的普通文本。
使用表格元素，当表格中的元素长短不一时，由浏览器自动布局。
随便修改一个td元素内容：<td>数据2我是一段乱码abcdefg</td>
表头2和数据2还是和上面一样的布局，整体没有乱。
在我们的印象中，表格不是有边框吗？
别急，请往下看。
2、table必备的样式
边框属性：
第一个值用来设置边框宽度，第二个值设置边框类型（线，点），第三个值设置边框颜色。
添加样式： table, th, td {
border: 1px solid black;
}
</style>
我们通过元素选择器（CSS后续会介绍到），给table，th，td三个元素都设置了边框。
上面的写法等价于：table{
border: 1px solid black;
}
th{
border: 1px solid black;
}
td{
border: 1px solid black;
}
注意哈，无法为“td元素”添加边框的哦～
拆开后，我们就发现为什么会出现双边线了，因为有重叠。
我们只需要为最外层的table设置：table{
border-collapse: collapse;
}
border-collapse（传送门）设置表格的边框是否被合并为一个单一的边框。
设置其值为“collapse”，便会合并重叠的边框：
3、caption元素
caption元素定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后：<table>
<caption>标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
4、初见CSS盒子模型
关于盒子模型，我们会在后续的CSS部分仔细讲到，本次只需要用即可。
鱼油如果需要自学请看：实用Tips - 30 - 一次搞定#IE/W3C盒模型
内边距padding，就是边框到元素内容的距离。
我们为数据2的td元素加载一张图片：<td><img src="fc.png" alt=""></td>
当我们觉得表格内容比较拥挤时，就可以设置CSS样式的padding：
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-9-9 10:33:35
置顶卡
千斤顶
显身卡
发表于 2018-9-16 17:10:03
发表于 2019-1-19 10:38:46
