03_HTML常用标签2（表格）

最新推荐文章于 2024-03-23 00:45:00 发布

软件开发初学者

最新推荐文章于 2024-03-23 00:45:00 发布

阅读量284

点赞数

分类专栏： # HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/u011743790/article/details/126353409

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格概述

表格在网页中是非常重要的一部分，在一些数据关联性比较强和数据分析页面起到了比较重要的作用。同时早期的网页中还使用表格来确定页面的布局。

在这里插入图片描述

1. 表格的主要作用

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

支出项目	单价（元）	数量	金额（元）
垃圾箱	30	12	360
垃圾牌	100	10	1000
宣传单	0.08	1000	80
合计	–	–	1440

相关标签及使用

1. 初入门（基本语法）

<table>
    <tr>
        <td>单元格内文字</td>
        <td>单元格内文字</td>
        <td>单元格内文字</td>
        <td>单元格内文字</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

在这里插入图片描述

<table></table>：是用于定义表格得标签。
<tr></tr>：用于定义表格中的行，必须嵌套在<table></table>标签中。
<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容。

2. 表头单元格标签

表头单元格标签用来突出显示表格的标题行。使得表格的每一列定义标题更加突出明显。一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

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

<th></th>：表示HTML表格的表头部分（table head的缩写）。

在这里插入图片描述

注：默认的th的内容文字样式会比其他单元格文字加粗显示，并且内容居中显示。

3. 表格相关属性（了解）

表格标签的这部分属性在实际开发中被CSS样式所替代掉，不是很常用。

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

注：这些属性都是需要写到table标签中。

<html>
<body>

<table border="1" align="center" cellpadding="10" cellspacing="0" width="350">
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>

  <tr>
    <td>张三</td>
    <td>男</td>
    <td>18</td>
  </tr>
  
  <tr>
    <td>李四</td>
    <td>男</td>
    <td>19</td>
  </tr>
</table>


</body>
</html>

在这里插入图片描述

4. 表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。在表格标签中，分别用：<thead> 标签表示表格的头部区域、<tbody> 标签表示表格的主体区域。这样可以更好的分清表格结构。

<html>
<body>

<table border="1" align="center" cellpadding="10" cellspacing="0" width="350">
 <thead>
     <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
 </thead>
  
 <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
  
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>19</td>
      </tr>
  <tbody>
      
  <tfoot>
     <tr>
        <td>合并行</td>
        <td>---</td>
        <td>---</td>
      </tr>
  </tfoot>
</table>

<thead></thead>：用于定义表格的头部。该标签内部必须拥有 tr 标签，一般位于表格的第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
<tfoot></tfoot>：用于定义表格的页脚，主要用于放置一些合并统计数据。

5. 合并单元格

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

<table>
    <thead>
    	<tr>
        	<td colspan="5">个人简历</td>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>姓名：</td>
            <td></td>
            <td>性别：</td>
            <td></td>
            <td rowspan="4">照片</td>
        </tr>
        ...
    </tbody>
</table>

在这里插入图片描述

这里，个人简历行就是合并了五列单元格。照片合并了四行数据。

5.1 合并单元格方式

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

在这里插入图片描述

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

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

5.3 合并单元格三部曲

先确定是跨行还是跨列合并。
找到目标单元格，写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
删除多余的单元格。

6. colgroup标签、col标签

有时，我们在表格的第一行需要对其中的某几列进行合并，这时我们就无法手动的对每一列进行宽度定义。该标签可以用来解决此问题，用于对表格中的列进行组合，以便对其进行格式化。

<table border="1" cellspacing="0" cellpadding="5" width="500" align="center">
        <colgroup width="40%"></colgroup>
        <colgroup width="15%"></colgroup>
        <colgroup width="15%"></colgroup>
        <colgroup width="15%"></colgroup>
        <colgroup width="15%"></colgroup>
        <thead>
            <tr>
                <th rowspan="2">名称</th>
                <th colspan="4">季度目标</th>
            </tr>
            <tr>
                <th>第一季度</th>
                <th>第二季度</th>
                <th>第三季度</th>
                <th>第四季度</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>测试1</td>
                <td>10</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
            </tr>
            <tr>
                <td>测试2</td>
                <td>15</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
            </tr>
        </tbody>

    </table>