HTML表格标签

前言

表格的主要作用：用于展示数据和布局

---

目录

一，表格的标签的语法

各标签意义解释：

 二.表格的常用属性

三.表格结构标签（了解）

四.合并单元格

目标单元格

效果展示：

 合并单元格三部曲

五.表格的嵌套

---

一，表格的标签的语法

<table>
      <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
      </tr>
</table>

• table：定义整个表格
• tr：定义表格中的一行
• td：定义表格中的一个单元格
• th：定义表头单元格通常在表格的第一行或第一列使用 地位与td同地位（会使文字加粗居中显示）

各标签意义解释：

 表格标签效果展示

总结： 

1.   td/th必须包含在tr里面
2.   tr必须包含在table里面
3.   td中可以添加文本，图片，链接，视频，表格等

 二.表格的常用属性

*注：这些元素都是写到 table 中（width，height也可以写到tr td th 中）

表格属性	属性值	单位	解释
align	center：居中 left：居左 right：居右		设置表的对齐方式
border	>=0的数	像素	设置表格边框（默认值0）
cellpadding	>=0的数	像素	边距 设置单元格与文字间的距离（默认值1）
cellspacing	>=0的数	像素	间距 设置单元格与单元格间空隙的距离（默认值2）
width	>=0的数	像素	设置表格的宽度
height	>=0的数	像素	设置表格的高度

*注：

•        如果table与tr同时设置高和宽，那么会以tr为准
•         如果tr和td同事设置宽和高，那么谁的值大以谁为准

间距与边距的区别展示

将间距扩大

---

 将边距扩大

三.表格结构标签（了解）

thead ——定义表格头部。thead 中必须要有tr    一般位于第一行题目

tbody ——定义表格主体。放于主体部分。

四.合并单元格

• 跨行合并：rowspan="合并单元格数量"
• 跨列合并：colspan="合并单元格数量"

  语法：

<table>
      <tr>
         <td rowspan="2"><td>
       </tr>
</table>

目标单元格

• 跨行：以上侧单元格为目标单元格
• 跨列：以左侧单元格为目标单元格

效果展示：

 合并单元格三部曲

1. 确定跨行还是跨列
2. 找到目标单元格写上合并方式和合并单元格数量
3. 删除多余单元格

五.表格的嵌套

：表格中嵌套一个表格

语法：

<table>
      <tr>
         <td>
             <table>
                    <tr>
                        <td></td>
                     </tr>
             </table>
         </td>
      </tr>
<table>