不二如是 发表于 2018-9-9 10:33:35

013 - 数据就应该整整齐齐(上)

本帖最后由 不二如是 于 2021-6-4 17:42 编辑

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



在线视频:

https://www.bilibili.com/video/BV1QW411N762?p=14



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



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必备的样式

边框属性:
border: 1px solid black;

第一个值用来设置边框宽度,第二个值设置边框类型(线,点),第三个值设置边框颜色。

添加样式:
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盒模型

https://xxx.ilovefishc.com/forum/201805/22/223112g0klu60c161ac21p.png

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



我们为数据2的td元素加载一张图片:
<td><img src="fc.png" alt=""></td>


当我们觉得表格内容比较拥挤时,就可以设置CSS样式的padding:
td{
            padding: 10px;
      }
**** Hidden Message *****




课后作业,完成了吗?

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集:014 - 数据就应该整整齐齐(下)



如果有收获,别忘了评分{:10_281:} :

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑☞(传送门)(不喜欢更要订阅{:10_297:} )

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif



cjj735243954 发表于 2018-9-16 17:10:03

-=

syf040916 发表于 2018-9-22 04:17:29

看隐藏内容

w877713458 发表于 2018-11-15 15:10:52

132

JustinZhu 发表于 2018-12-1 13:58:59

kkkk

MisterLiu 发表于 2019-1-19 10:38:46

DD{:10_256:}

chenzhiqing 发表于 2019-2-11 11:05:19

{:10_282:}

李小控 发表于 2019-2-16 17:05:34

加油↖(^ω^)↗

紫殇 发表于 2019-4-16 17:33:00

66666666666666666

xjyxjy123 发表于 2019-7-29 13:44:57

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

Hyoga 发表于 2019-8-4 12:09:35

感谢

药水哥 发表于 2019-8-30 11:17:28

所以不二比小甲鱼大10岁

大风包子 发表于 2019-9-4 08:45:55

666

aa887498 发表于 2019-9-4 21:02:31

CSS样式?

魂颜惑 发表于 2019-12-11 16:19:08

ding

295973261 发表于 2020-2-23 00:48:16

6

唐小贝 发表于 2020-3-4 18:51:10

可以

456789 发表于 2020-5-19 15:19:48

1

神秘小帅哥 发表于 2020-6-3 18:15:36

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

suweitiancai 发表于 2020-6-19 19:29:45

我尝试复制padding部分代码 但是没有成功设置内边距
页: [1] 2
查看完整版本: 013 - 数据就应该整整齐齐(上)