013 - 数据就应该整整齐齐（上）

不二如是

上一集： 012 - 被安排的明明白白

---

在线视频：

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

1、table元素

table元素用来在网页中实现一个表格。

在以前的网页开发时代，可以用来做布局并且拥有很多属性，而在H5的时代，这些属性都被废弃了：

原因很简单：

语义和实现分离

最简单的一个表格：

1. <table>
   
2.     <tr>
   
3.         <th>表头1</th>
   
4.         <th>表头2</th>
   
5.     </tr>
   
6.     <tr>
   
7.         <td>数据1</td>
   
8.         <td>数据2</td>
   
9.     </tr>
   
10. </table>

复制代码

table元素最外层，内层就是一行一行的tr元素。

表头往往还有一行，所以在第一个tr元素中，内嵌表头格th元素。

其他行的都是表格td元素。

默认th元素有加粗居中效果，td元素只是左对齐的普通文本。

使用表格元素，当表格中的元素长短不一时，由浏览器自动布局。

随便修改一个td元素内容：

1. <td>数据2我是一段乱码abcdefg</td>

复制代码

表头2和数据2还是和上面一样的布局，整体没有乱。

在我们的印象中，表格不是有边框吗？

别急，请往下看。

---

2、table必备的样式

边框属性：

1. border: 1px solid black;

复制代码

第一个值用来设置边框宽度，第二个值设置边框类型（线，点），第三个值设置边框颜色。

添加样式：

1.   table, th, td {
   
2.             border: 1px solid black;
   
3. 
   
4.         }
   
5.     </style>

复制代码

我们通过元素选择器（CSS后续会介绍到），给table，th，td三个元素都设置了边框。

上面的写法等价于：

1. table{
   
2.             border: 1px solid black;
   
3. 
   
4.         }
   
5.         th{
   
6.             border: 1px solid black;
   
7.         }
   
8.         td{
   
9.             border: 1px solid black;
   
10.         }

复制代码

注意哈，无法为“td元素”添加边框的哦～

拆开后，我们就发现为什么会出现双边线了，因为有重叠。

我们只需要为最外层的table设置：

1. table{
   
2.             border-collapse: collapse;
   
3.         }

复制代码

border-collapse（传送门）设置表格的边框是否被合并为一个单一的边框。

设置其值为“collapse”，便会合并重叠的边框：

---

3、caption元素

caption元素定义表格的标题。

<caption> 标签必须直接放置到 <table> 标签之后：

1. <table>
   
2.     <caption>标题</caption>
   
3.     <tr>
   
4.         <th>表头1</th>
   
5.         <th>表头2</th>
   
6.     </tr>
   
7.     <tr>
   
8.         <td>数据1</td>
   
9.         <td>数据2</td>
   
10.     </tr>
    
11. </table>

复制代码

---

4、初见CSS盒子模型

关于盒子模型，我们会在后续的CSS部分仔细讲到，本次只需要用即可。

鱼油如果需要自学请看：实用Tips - 30 - 一次搞定#IE/W3C盒模型

                               
登录/注册后可看大图

内边距padding，就是边框到元素内容的距离。

我们为数据2的td元素加载一张图片：

1. <td><img src="fc.png" alt=""></td>

复制代码

当我们觉得表格内容比较拥挤时，就可以设置CSS样式的padding：

1. td{
   
2.             padding: 10px;
   
3.         }

复制代码

游客，如果您要查看本帖隐藏内容请回复

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：014 - 数据就应该整整齐齐（下）

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

cjj735243954

-=

syf040916

看隐藏内容

w877713458

132

JustinZhu

kkkk

MisterLiu

DD

chenzhiqing

李小控

加油↖(^ω^)↗

紫殇

66666666666666666

xjyxjy123

无法为td元素设置边框，那为啥还要写

Hyoga

感谢

药水哥

所以不二比小甲鱼大10岁

大风包子

666

aa887498

CSS样式?

魂颜惑

ding

295973261

6

唐小贝

可以

456789

1

神秘小帅哥

注意哈，无法为“td元素”添加边框的哦～
这句话有问题吧，应该是不能为tr添加吧

suweitiancai

我尝试复制padding部分代码 但是没有成功设置内边距