前端初学者----网页中的表格

在为大家讲解新的知识之前内，先为大家补充一下上一篇文章中标签内容的视频讲解，由于小丸子的失误导致视频优酷没有上传成功只能为大家提供网盘地址，为初学小白们提供下载地址，讲解的不好还请您见谅担待；链接永久有效哦😄
这是网盘地址：提取码是：tq94

❀❀❀不要走开，接下来是正文内容：❀❀❀

今天主要为大家带来的是网页中的表格内容，表格顾名思义，就类似于我们电脑中常见的excel表格；他的主要作用是：在网页中用来展示数据；将对应的数据展示在我们的页面中；对于网页有些了解的同学就说了：“小丸子，我们现在都不怎么用表格布局了，为啥你还要说表格呢？”
我查三个数，你给我闭嘴；接下来我告诉你为啥我还要说一下表格中的相关内容：

• 网页布局初期，最开始页面布局就是使用表格布局但是在表格布局的过程中仍要嵌套多层的表格，
• 表格嵌套必须遵顼的原则是：表格(table)>行(tr)>列(td);这样的规则，这种规则会导致我们的页面结构混乱，操作DOM(后面课程中会涉及到)的时候不易查找元素
• 表格就相当于我们快递行业中的邮局，部分快递到达不了的地方仍然有邮局的存在，作为基础设施的表格也会一直存在我们前端发展的舞台上面

所以综上所述：表格必须要学，部分功能中还是需要使用表格的。

圆(言)规(归)正转(传)了，今天的主要内容真的来了：看到上面的课程表没有，这里面就用到了我们今天学到的相关内容，就是——表格

一、表格含义

存储数据的单元格，能够清除的将数据进行相关的展示；优点：易于数据的显示，清晰可见数据结构；

二、表格的组成

网页中的表格是由：表格，行，列，单元格组成；也就是：table>tr>td

三、如何在网页中实现表格

网页中的表格是由标签组成的：

• 表格标签：table=双标签；
• 行标签tr=table row的缩写；
• 单元格标签td=table data的缩写；
• 表格的标题行th=table header cell的缩写，在这里th替换的是td(单元格)不是行

四、网页中表格的基本结构

网页中表格布局的基本代码结构：

<table>
<!--这是第一行内容-->
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<!--这是第二行内容-->
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<!--这是第三行内容-->
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>

以下是运行效果
网页中表格布局的基本代码结构：

123	123	123
123	123	123
123	123	123

五、观察以上代码分析效果

六、表格的缺陷

只能填写存储相关数据，不能够清除的显示出，相关的数据结构，表格结构？如何优化表格结构，那就是接下来的相关属性了

七、表格(table)的相关属性

7-1：表格的边框

含义：为了能够更加清除的显示出表格的相关结构，相关框架，我们使用表格的边框属性，来进行显示美化网页中的表格；
HTML标签属性：border=“2”,代表的表格边框的粗细程度；

7-2：表格的宽度

含义：为了将数据横向完整的展示，和表格的美化；
HTML标签属性：width=“200”,代表的表格的宽度；
注意：这里宽的取值为数值，单位可以为：px/%；px可以省略；

7-3：表格的高度

含义：为了将数据纵向完整的展示，和表格的美化；
HTML标签属性：height=“200”,代表的表格的高度；
注意：这里高的取值为数值，单位可以为：px/%；px可以省略；

7-4：表格的颜色

HTML标签属性：bgcolor=“red”,代表的表格的背景颜色；
注意：这里颜色的取值可以为：合法的颜色英文单词/rgb值/#16进制的颜色单词；

7-5：表格的水平对齐方式

HTML标签属性：align=“left”,代表的表格的水平对齐方式；
默认值：表格显示左对齐，取值分别可以为：left/right/center；

7-6：单元格与单元格之间的间距（单元格间距）

HTML标签属性：cellspacing=“20px”;默认值为2；单元格与单元格之间的间距，取值为像素值；

7-7：单元格与内容之间的间距（单元格边距）

HTML标签属性：cellpadding=“20px”;默认值为1；单元格与内容之间的间距，取值为像素值；

八、行(tr)标签中的相关属性

8-1：行的高度

含义：显示每一行的高度；
HTML标签属性：height=“20”,代表的是本行的高度；

8-2：行的背景颜色

含义：显示每一行的颜色；
HTML标签属性：bgcolor=“red”,代表的是本行的颜色；

8-3：行内容的水平对齐方式

含义：行的内容水平方向上面对齐；
HTML标签属性：align=“left”,代表的是本行内容的水平对齐方式；默认值为左对齐，取值可以为：left/right/center；

8-4：行内容的垂直对齐方式

含义：行的内容垂直方向上面对齐；
HTML标签属性：valign=“top”,代表的是本行内容的垂直对齐方式；默认值为居中，取值可以为：top/middle/bottom；

九、列(td)标签中的相关属性

9-1：单元格的高度

含义：显示每一行的高度；
HTML标签属性：height=“20”,代表的是本行的高度，一个单元格影响了一整行；

9-2：单元格的宽度

含义：显示每一列的宽度；
HTML标签属性：width=“20”,代表的是本行的高度，一个单元格影响了一整列；

9-3：单元格的背景颜色

含义：显示每一个单元格的背景颜色；
HTML标签属性：bgcolor=“red”，能够设置单元格的背景颜色；

9-4：单元格的背景图片

含义：显示每一个单元格的背景图片；
HTML标签属性：background=“背景图片路径”，能够设置单元格的背景图片；

9-4：单元格的水平合并(水平合并的列)

含义：横向合并单元格；
HTML标签属性：colspan=“2”，从合并的单元格起，向后数，并将其后续多余的单元格删除；
图例：

9-4：单元格的垂直合并(垂直合并的列)

含义：纵向合并单元格；
HTML标签属性：rowspan=“2”，从合并的单元格起，向后数，并将其后续多余的单元格删除(删除每一行的对应的单元格)；
图例：

9-5：单元格内容水平方向上对齐

含义：内容水平方向对齐，左中右；
HTML标签属性：align=“left”，默认情况下，内容居左对齐；
上面两个图的文本默认都是左对其的哦！！！！

9-6：单元格内容垂直方向上对齐

含义：内容垂直方向对齐，上中下；
HTML标签属性：valign=“middle”，默认情况下，内容垂直居中对齐；

十、表格中的分组标签

分组标签的作用，主要是讲数据区域进行划分，一个完整的表格中表头是用来标注数据信息显示的是什么内容；真正展示数据区域的内容在主体区域；所有的操作数据均在主体区域，为了方便后续学习，建议大家学会使用分组标签

10-1：表格的头部标签

含义：起到头部分组的作用；thead标签

10-2：表格的主体标签

含义：起到主体分组的作用；tbody标签

10-3：表格的尾部标签

含义：起到尾部分组的作用；tfoot标签

注意啦！！！！注意啦！！！注意啦！！！敲黑板了

有一个小小的秘密我忘了在以上内容提起到：看到最后的一定能够学会，网页表格中的所有的标签都是双标签，都是双标签，都是双标签；重要的内容我说三遍，我不会告诉别人的；
为了让咱们初学者能够详细的了解表格中的相关内容；我会给你们几个我上课时候经常使用制作的案例，只要你能把案例全部都做完的话，我详细你应该是把表格的全部内容学会了；
金刚芭比小丸子，在后面的课程中等你
案例素材如下：

案例一：考察文本颜色，表格背景颜色，标签的使用，单元格合并

---

案例二：稍微有些复杂，考察网页中标签的使用和表格的相关属性；

---

案例三：表格的百分比布局；

温馨提示：以上内容不明白的朋友们可以留言我看到后会第一时间回复大家，同时微信公众号也会即将上线；