表格

表格会使用

1. 表格

• 用来展示数据

• 可以让数据显示整齐规范

2. 列表

• 列表用来布局

• 列表可以页面布局整齐规范

3. 表单

• 表单用来收集用户信息

目标：

• 理解：

  • 能说出表格用来做什么

  • 表格的基本结构组成

• 应用：

  • 能够熟练写出n行n列的表格

  • 能够简单的合并单元格

1.创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>
    <tr>
        <td>单元格内的文字<td>
        ...
    <tr>
    ...
</table>

要深刻体会表格、行、单元格他们的构成。

在上面的语法中包含基本的三对HTML标签，分别为table、tr、td,他们是创建表格的基本标签，缺一不可，下面对他们进行具体的解释

1. table用于定义一个表格标签

2. tr标签用于定义表格中的行，必须嵌套在table标签中。

3. td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4. 字母td指表格数据（table data），即数据单元的内容，表格最适合的地方就是用来存储数据的。

总结

• 表格的主要目的是用来显示特殊数据的

• 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列标签

• <tr></tr>中只能嵌套<td></td>类的单元格

• <td></td>标签，他就像一个容器，可以容纳所有的元素

2.表格属性

3.表头单元格标签th

• 作用：

  • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

• 语法：

  • 只需要用表头标签替代相应的单元格标签即可

     

    th也是一个单元格，只不过和普通的td单元格不一样，它会让自己里面的文字居中且加粗

4. 表格标题caption

定义和用法

<table>
    <caption>我是表格标题</caption>
</table>

注意：

1. caption元素定义表格标签，通常这个标签会被居中且显示于表格之上。

2. caption标签必须紧随table标签之后。

3. 这个标签只存在表格里面才有意义。

5.合并单元格

合并单元格是我们比较常用的一个操作，但是不会合并的很复杂

5.1 合并单元格2种方式

• 跨行合并：rowspan="合并单元格的个数"

• 跨列合并：clospan="合并单元格的个数"

5.2 合并单元格顺序

合并的顺序按照 先上后下 先左后右 的顺序

5.3 合并单元格三步曲

1. 先确定是跨行还是跨列合并

2. 根据 先上后下 先左后右 的原则找到目标单元格 然后写上合并方式还有要合并的单元格数量

比如： 3. 删除多余的单元格（把那一个单元格代码删掉）

6.总结表格

1. 表格提供了HTML中定义表格式数据的方法。

2. 表格中由行中的单元格组成。

3. 表格中没有列元素，列的个数取决于行的单元格个数。

4. 表格不纠结于外观，那是CSS的作业

5. 表格的学习要求：能手写表格结构，并且能简单合并单元格

7. 拓展阅读

表格划分结构（了解）

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用：thead,tbody,tfoot来标注，这样更好的分清表格结构（只有CSS可以弄颜色）

注意：

1. <thead></thead>:用于定义表格的头部。用来放标签之类的东西。<thead>内部必须拥有<tr>标签！

2. <tbody></tbody>:用于定义表格的主体。放数据本体。

3. <tfoot></tfoot>:放表格的脚注之类。

4. 以上标签都是放到table标签中，不一定三个标签都要有，每个标签里面可以有多行。

5.