【HTML】标签学习（下.1）

（大家好哇，标签学习（上）的部分告别了一小段落，今天我们将继续来学习HTML（下）的相关知识，大家可以在评论区进行互动答疑哦~加油！💕） 

目录

一. 表格标签 

1.1  表格的主要作用

1.2  表格的基本语法

1.3  表头单元格标签

1.4  表格属性 

1.5  表格结构标签

1.6  合并单元格

1.6.1 合并单元格方式:

1.6.2 目标单元格:(写合并代码) 

1.6.3 合并单元格步曲

1.7  表格总结

---

一. 表格标签 

（目标：能够书写表格）

 表格是实际开发中非常常用的标签：1.表格的主要作用  2.表格的基本语法.。

1.1  表格的主要作用

• 表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显的很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。
• 表格不是用来布局页面的，而是用来展示数据的。 

1.2  表格的基本语法

<table>

   <tr>

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

       ......

  </tr> 

  ......

</table>

1.  <table></table>是用于定义表格的标签。
2.  <tr></tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。 
3.  <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。 
4.  字母 td 指表格数据(table date)即数据单元格内容。 

1.3  表头单元格标签

• 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
• <th> 标签表示HTIML表格的表头部分(table head的缩写) 

个人信息表

姓名	性别	电话
小王	女	130xxx
小李	男	150xxx

<table>

   <tr>

       <th>  姓名  </th>

       ......

  </tr> 

  ......

</table>

 

1.4  表格属性 

• 表格标签这部分属性我们实际开发不常用，后面通过CSS来设置.。
• 目的有2个： 

1.  记住这些英语单词，后面CSS会使用。      
2.  直观感受表格的外观形态。

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

 这些属性要写到表格标签table里面。

 

1.5  表格结构标签

• 使用场景:因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。 
• 在表格标签中，分别用:<thead>标签  表格的头部区域，<tbody>标签  表格的主体区域，这样可以更好的分清表格结构。 

1. <thead></thead>:用于定义表格的头部<thead>内部必须拥有<tr>标签，一般是位于第一行。
2. <tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
3. 以上标签都是放在<table></table>标签中.。

1.6  合并单元格

• 特殊情况下，可以把多个单元格合并为一个单元格，这里会最简单的合单元格即可。 

1.6.1 合并单元格方式:

1. 跨行合并:rowspan="合并单元格的个数
2. 跨列合井:colspan="合并单元格的个数" 

 

1.6.2 目标单元格:(写合并代码) 

1. 跨行:最上顶侧单元格为目标，单元格，写合并代码。
2. 跨列:最左单元格为目标单元格，写合并代码

1.6.3 合并单元格步曲

1. 先确定是跨行还是跨列合并。
2. 找到目标单元格，写上合并方式=合并的单元格数量 。eg:<td colspan="2"> </td> 
3. 删除多余的单元格.。

 

1.7  表格总结

三大部分:1.表格的相关标签    2.表格的相关属性      3.合并单元格. 

1. <table></table>  ;   <tr></tr>行  ; <td></td>单元格 ;  <th></th>表头单元格 ; <thead>表格头部区域   ;   <tbody>表格主体区域。
2. <align> ;   <border>   ;  <cellpadding>  ;  <cellspacing>  ;  <width> 
3. 合并单元格。

（今日分享暂时到此为止啦！为不断努力的自己鼓鼓掌吧。今日文案分享：努力拼搏是最美姿态，超越自我是最佳状态。）