HTML 表格介绍

HTML 表格介绍

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

• ：tr 表示表格的一行。
• ：td 表示表格的数据单元格。
• ：th 表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格的基础语法

以下是HTML 表格的基础语法:

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

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

表头单元格标签

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

<th>标签表示HTML表格的表头部分(table head的缩写)。

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

表格的结构标签

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

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

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

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

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

例子：

<table width="200" border="1" cellspacing="1">
     <thead>  
   		  <tr>
              <th>姓名</th>  
              <th>性别</th> 
              <th> 年龄</th>
         </tr> 
     <thead>
     <tbody>
		  <tr>
              <td>刘德华</td>  
              <td>男</td> 
              <td> 56 </td>
         </tr>
       	  <tr>
              <td>张学友</td>  
              <td>男</td> 
              <td> 58 </td>
         </tr>
          <tr>
              <td>郭富城</td>  
              <td>男</td> 
              <td> 51 </td>
         </tr>
          <tr>
              <td>黎明</td>  
              <td>男</td> 
              <td> 57 </td>
         </tr>
    </tbody>
</table>

表格中的一些常用属性

这些属性都是写在<table>标签中

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

合并单元格

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

合并单元格方式

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

例如：

<table width="500" height="249" border="1" cellspacing="0">
  <tr>
    <td></td>
    <td colspan="2">合并2列</td>
  </tr>
  <tr>
    <td rowspan="2">合并2行</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>	

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

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

合并单元格三部曲：

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

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

3.删除多余的单元格。