HTML5 表格标签的使用总结

表格

表格现在还是比较常用的一种标签, 但不是用来布局的，常用来处理, 显示表格式数据

创建表格

在HTML网页中 要想创建表格 就需要使用表格相关的标签 创建表格的基本语法如下

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

在上面的语法中包含三队HTML 标签 
分别为 <table></table> <tr></tr> <td></td> 
他们是创建表格的基本标签,缺一不可,下面我们来一一进行具体解释

1. table 用于定义一个表格
2. tr用于定义表格中的一行 必须嵌套在 table标签中 在table中包含几对 tr 就有几行表格
3. td /td: 用于定义表格中的单元格 必须嵌套在 <tr></tr> 标签中 , 一对<tr></tr>中包含几对<td></td> 就表示该行中有多少列(或多少个单元格)

示例

     <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
        </tr>
        
    </table>

示例结果：（没有边框，需要用border标签来设置，见后面表格属性）

<tr></tr> 中只能嵌套 <td></td>
<td></td> 标签 他就像一个容器 可以容纳所有的元素

表格属性

表头标签

表头一般位于表格的第一行或第一列 其中文本加粗居中 设置表头非常简单 只需要用表头标签<th></th>替代相应的单元格标签<td></td>即可

表格结构

在使用表格进行布局时,可以将表格划分为头部，主题和页脚(页脚因为有兼容性问题,我们不在赘述),具体 表示如下
<thead></thead>: 用于定义表格的头部
必须位于<table></table>标签中,一般包含网页的 Logo 和导航等头部信息
<tbody></tbody>: 用于定义表格的主体
位于<table></table>标签中 一般包含网页中除头部和底部之外的其他内容

示例

     <table>
         <thead>表格举例</thead>
         <tbody>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
        </tr>
        </tbody>
    </table>

表格标题

表格的标题: caption

定义和用法: caption 元素定义表格标题

<table>
	<caption> 我是表格标题 </caption>
</table>

（表格标题会自动居中，而之前的表格头部并不会）

合并单元格

跨行合并: rowspan 跨列合并 : colspan

合并单元格的思想:

​ 将多个内容合并的时候, 就会有多余的东西, 把它删除，例如 把3个 td 合并成一个 那就多余了2个需要删除

​ 公式 : 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

示例：

        <table border="1">
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
            <tr>
              <td>January</td>
              <td>$100.00</td>
              <td rowspan="2">$50</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$10.00</td>
            </tr>
          </table>

表格不要纠结于外观, 那是CSS的作用