前端学习（HTML）日记 day.7（2023.1.19）

目录

1.3.表头单元格标签

 1.4.表格属性

1.5.表格结构标签

1.6.合并单元格

1.7.表格总结

---

1.3.表头单元格标签

一般表头单元格位于表格第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分（table head的缩写）

<table>
  <tr>
    <th>姓名<th>
    ...
  </tr>
  ...
</table>

表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示

效果如下

 1.4.表格属性

表格标签这部分属性我们实际开发不常用，后面通过CSS来设置。

目的有两个：

1.记住这些英语单词，后面CSS会使用。

2.直观感受表格的外观形态。

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度

1.5.表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分。

在表格标签中，分别用：<thead>标签 表格的头部区域、<tbody>标签 表格的主题区域。这样可以更好的分清表格结构。

1.<thaed></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。

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

3.以上标签都是放在<table></table>标签中。

1.6.合并单元格

特殊情况下，可以把多个单元格合并为一个单元格

1.合并单元格方式

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲：

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

2.找到目标单元格。写上合并方式=合并单元格的数量。比如：<td solspan="2"></td>。

3.删除多余的单元格。

得到结果如下

1.7.表格总结

1.表格的相关标签

我们学习了 table标签    tr行 标签   td单元格 标签   th表头单元格 标签   thead表格头部区域标签   tbody表格主体区域标签  

2.表格的相关属性

3.合并单元格