HTML入门学习笔记--表格标签(4)

其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表

1.什么是表格标签?

表格标签作用: 用来给一堆数据添加表格语义
其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

2.表格标签格式:

<table>
<tr>
<td>需要显示的内容</td>
</tr>
</table>

其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格
其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行
其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

3.注意点

3.1表格标签有一个边框属性border, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
3.2表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

1.宽度和高度的属性

可以给table标签和td标签使用

1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
1.2如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度

2.水平对齐和垂直对齐的属性

其中水平对齐可以给table标签和tr标签和td标签使用

垂直对齐只能给tr标签和td标签使用

2.1给table标签设置align属性, 可以控制表格在水平方向的对齐方式
2.2给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
2.3给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

2.4给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式
2.5给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式

注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

3.外边距和内边距的属性

只能给table标签使用

3.1.外边距就是单元格和单元格之间的距离, 我们称之为外边距
默认情况下单元格和单元格之间的外边距的距离是2px

3.2 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
默认情况下内边距是1

注意: 以上讲解的内容仅仅作为了解, 以后在企业开发中所有控制样式的都是通过CSS

在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服

细线表格的制作方式:

1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing = "1px"

注意点:

**table标签和tr标签以及td标签都支持bgcolor属性
但是以上内容仅仅作为了解, 因为样式以后都是通过css来控制**

1.表格标题

在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中

2.caption标签的注意点:

2.1caption一定要写在table标签中, 否则无效
2.2caption一定要紧跟在table标签后面

3.标题单元格标签

3.1.在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字

3.2.到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的

1.由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类

表格中存储的数据可以分为4类

1.1表格的标题
1.2.表格的表头信息
1.3.表格的主体信息
1.4.表格的页尾信息

2.表格的完整结构

<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>

caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

3.注意点:

3.1.如果我们没有编写tbody, 系统会系统给我们添加tbody
3.2.如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化

1.水平方向上的单元格合并

可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
例如:
<td colspan="2"></td>
含义: 把当前单元格当做两个单元格来看待

注意点:

1.由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
2.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并

2.垂直方向上的单元格合并

可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
例如:
<td rowspan="2"></td>
含义: 把当前单元格当做两个单元格来看待

快速移动选中的代码, 上下移动

往上移动 Ctrl + shift + ↑(方向键上)

往下移动 Ctrl + shift + ↓(方向键下)

快速合并和展开代码(合并和展开的是某一个标签)

合并: Ctrl + -

展开: Ctrl + +

快速合并和展开代码(合并和展开选中的所有标签)

合并: Ctrl + shift + -

展开: Ctrl + shift + +

快速新启一行

shift + enter