HTML 表格

最新推荐文章于 2025-03-25 21:26:20 发布

文丑颜不良啊

最新推荐文章于 2025-03-25 21:26:20 发布

阅读量1.2k

点赞数

分类专栏： HTML 与 CSS 文章标签： html 前端 html 表格

本文链接：https://blog.csdn.net/jiaomubai/article/details/126991203

版权

HTML 与 CSS 专栏收录该内容

22 篇文章

订阅专栏

html 中的表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 即指表格数据（table data），即数据单元格的内容。一般而言，数据单元格的内容可以包含文本、图片、列表、段落、表单、水平线、表格等等。

一个简单的表格示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表格示例</title>
</head>
<body>

    <table border="1">
        <tr>
            <td></td>
            <td>张三</td>
            <td>李四</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </table>
    <hr />

</body>
</html>

上图所示就是一个简单的表格示例，没有什么特别复杂的逻辑。<table> 标签中间的内容都是表格的内容，如果要知道这个表格有多少行的话就直接看 <table> 标签中定义了几个 <tr> 标签，有几个 <tr> 标签，就证明该表格有多少行。如上图所示，该表格就有 4 行。那么要想知道表格的每一行都有多少列的话，则直接看每个 <tr> 标签内有几个 <td> 标签即可。如上图所示，该表格的每一行多有三列。也就是说，上图我们创建了一个 4 行 3 列的表格。

表格中需要展示的内容写在数据单元格的开始标签 <td> 与结束标签 </td> 中间。观察上面的代码可以发现，<table> 标签中设置了 border 属性的值。border 属性用来规定围绕表格的边框的宽度。border 属性会为每个单元格设置边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。可以通过设置 border="0" 或不设置此属性来显示没有边框的表格。如下图所示，可以观察一下边框为 0、1、10 时的表格的展示情况。（代码文后展示）

还可以通过 <th> 标签来为表格设置表头，通过 <caption> 标签为表格设置标题。一般来说浏览器会将表头加粗显示。如：

注意：<th> 标签与 <td> 标签同级，都是单元格维度的。（代码文后展示）

一般来说，还会涉及到单元格合并的表格。那这种的话是通过在 <td> 或者 <th> 标签中设置 rowspan(合并行) 或 colspan(合并列)的属性来实现的。（代码文后展示）如：

该开始时说过，表格的数据单元格的内容不仅仅是简单的文字，还可能包含列表、段落，甚至表格等。（代码文后展示）如：

还有，我们可以通过 <table> 标签的 cellpadding 属性来设置单元格边距，即单元格的内容与当前单元格边框的距离，也可以通过 cellspacing 属性来设置单元格间距，即单元格与单元格之间的距离。（代码文后展示）如：

html 表格综合实践：通过引入外部 css 样式来实现较美观的表格。需要在 html 文件的头部 <head> 中使用 <link> 标签来表明引入的外部 css 样式。

所涉及到的完整代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表格示例</title>
    <!-- html 引入外部样式 -->
    <link rel="stylesheet" type="text/css" href="../resource/css/tableStyle.css">
</head>
<body>

    <h3>无边框(border = 0)的表格</h3>
    <table border="0">
        <tr>
            <td></td>
            <td>张三</td>
            <td>李四</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </table>
    <hr />

    <h3>边框为1(border = 1)的表格</h3>
    <table border="1">
        <tr>
            <td></td>
            <td>张三</td>
            <td>李四</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </table>
    <hr />

    <h3>边框为10(border = 10)的表格</h3>
    <table border="10">
        <tr>
            <td></td>
            <td>张三</td>
            <td>李四</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </table>
    <hr />

    <h3>带有标题和表头的表格</h3>
    <table border="2">
        <caption>学生语数外成绩表</caption>
        <tr>
            <th></th>
            <th>张三</th>
            <th>李四</th>
        </tr>
        <tr>
            <th>语文</th>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <th>数学</th>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <th>英语</th>
            <td>90</td>
            <td>90</td>
        </tr>
    </table>
    <hr />

    <h3>单元格合并</h3>
    <table border="2">
        <tr>
            <td>第一行第一列</td>
            <td colspan="2">合并列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td rowspan="2">合并行</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>第五行第一列</td>
            <td>80</td>
            <td>90</td>
        </tr>
    </table>
    <hr />

    <h3>表格内标签</h3>
    <table border="2">
        <tr>
          <td>
           <p>这是一个段落</p>
           <p>这是另一个段落</p>
          </td>
          <td>这个单元格包含一个表格:
           <table border="1">
           <tr>
             <td>A</td>
             <td>B</td>
           </tr>
           <tr>
             <td>C</td>
             <td>D</td>
           </tr>
           </table>
          </td>
        </tr>
        <tr>
          <td>这个单元格包含一个列表
           <ul>
            <li>apples</li>
            <li>bananas</li>
            <li>pineapples</li>
           </ul>
          </td>
          <td>HELLO</td>
        </tr>
    </table>
    <hr />

    <h3>设置单元格间距与边距</h3>
    <table border="2" cellpadding="10" cellspacing="10">
        <tr>
            <td></td>
            <td>张三</td>
            <td>李四</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>85</td>
            <td>80</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </table>
    <hr />


    <h2>HTML 表格综合实践</h2>
    <!-- 以表格的形式实现标题等, 设置表格居中
        该表格有两行一列, 第一行为标题, 第二行为一个时间戳标记
     -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <!-- 设置标题居中, 高度为 60, 以及使用 css 样式中 class 为 biaoti 的样式 -->
            <td align="center" class="biaoti" height="60">受理员业务统计表</td>
        </tr>
        <tr>
            <td align="right" height="25">2022-09-22</td>
        </tr>
    </table>
    <!-- 新的表格, 承接上一个表格, 设置表格居中、单元格间距为 1、单元格边距为 4、单元格背景色以及使用的样式
        上一个表格为该表格设置了标题
     -->
    <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
        <!-- 第1行开始, 合并之后共有7列, 合并之前共有12列 -->
        <tr>
            <!-- 第1列为受理员列, 为合并行, 合并了2行2列, 使用了3个样式 -->
            <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td>
            <!-- 第2列为受理数列, 合并了2行, 使用了3个样式, 列宽占表格总宽度的10% -->
            <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td>
            <!-- 第3列为自办数列, 合并了2行, 使用了3个样式, 列宽占表格总宽度的10% -->
            <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td>
            <!-- 第4列为直接解答数列, 合并了2行, 使用了3个样式, 列宽占表格总宽度的10% -->
            <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
            <!-- 第5列为拟办意见列, 合并了2列(即第2行的第5列(同意)和第6列(比例)), 使用了3个样式 -->
            <td colspan="2" class="btbg font-center titfont">拟办意见</td>
            <!-- 第6列为返回修改列, 合并了2列, 使用了3个样式 -->
            <td colspan="2" class="btbg font-center titfont">返回修改</td>
            <!-- 第7列为工单类型列, 合并了3列, 使用了3个样式 -->
            <td colspan="3" class="btbg font-center titfont">工单类型</td>
        </tr>
        <!-- 第1行结束 -->

        <!-- 第2行开始, 为每列设置内容, 第2行与第1行为合并行 -->
        <tr>
            <!-- 从第5列开始赋值, 因为第1列、第2列、第3列和第4列已经在第一行赋过值了
                使用了3个样式, 列宽占表格总宽度的8% -->
            <td width="8%" class="btbg font-center">同意</td>
            <!-- 第6列赋值, 第5列和第6列同属于第1行的第5列(拟办意见列)
                使用了3个样式, 列宽占表格总宽度的8%
                因为第5列和第6列属于第1行第5列(拟办意见列)的合并列, 所以第1行第5列(拟办意见)列宽占表格总宽度的16%
             -->
            <td width="8%" class="btbg font-center">比例</td>

            <!-- 第7列和第8列赋值, 第7列为数量列, 第8列为比例列, 使用了3个样式, 列宽各占表格总宽度的8%
                同属于第1行第6列(返回修改列)的合并列, 所以第1行第6列列宽占表格总宽度的16% -->
            <td width="8%" class="btbg font-center">数量</td>
            <td width="8%" class="btbg font-center">比例</td>

            <!-- 第9列、第10列和第11列赋值, 第9列为建议件列, 第10列为诉求件列, 第11列为咨询件列, 
                使用了3个样式, 列宽各占表格总宽度的8%
                同属于第1行第7列(工单类型列)的合并列, 所以第1行第7列列宽占表格总宽度的24% -->
            <td width="8%" class="btbg font-center">建议件</td>
            <td width="8%" class="btbg font-center">诉求件</td>
            <td width="8%" class="btbg font-center">咨询件</td>
        </tr>
        <!-- 第2行结束 -->

        <!-- 第3行开始, 即受理组数据赋值开始 -->
        <tr>
            <!-- 第1列与第2列同属于第1行第1列的合并列(第1行第1列合并了2行2列), 所以表格第1行第1列列宽占表格总宽度的14% -->
            <!-- 第1列为受理处列, 合并了5行, 使用了3个样式, 列宽占表格总宽度的7% -->
            <td width="7%" rowspan="5" class="btbg1 font-center">受理处</td>
            <!-- 第2列为张三列, 使用了1个样式, 列宽占表格总宽度的7% -->
            <td width="7%" class="btbg2">张三</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
        </tr>
        <!-- 第3行结束 -->

        <!-- 第4行开始, 该行为第3行的合并行 -->
        <tr>
            <!-- 从第2列开始赋值, 第1列为受理处列, 在第3行已经赋值过
                该列为李四列, 使用了1个样式 -->
            <td class="btbg2">李四</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
        </tr>
        <!-- 第4行结束 -->

        <!-- 第5行开始, 该行为第3行的和并行 -->
        <tr>
            <!-- 从第2列开始赋值, 第1列为受理处列, 在第3行已经赋值过, 使用了1个样式 -->
            <td class="btbg2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第5行结束 -->

        <!-- 第6行开始, 该行为第3行的合并行 -->
        <tr>
            <!-- 从第2列开始赋值, 第1列为受理处列, 在第3行已经赋值过, 使用了1个样式 -->
            <td class="btbg2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第6行结束 -->

        <!-- 第7行开始, 该行为第3行的合并行 -->
        <tr>
            <!-- 从第2列(总计列)开始赋值, 第1列为受理处列, 在第3行已经赋值过, 使用了2个样式 -->
            <td class="btbg2 font-center">总计</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
        </tr>
        <!-- 第7行结束, 即受理组数据赋值结束 -->

        <!-- 第8行开始, 即话务组数据赋值开始 -->
        <tr>
            <!-- 第1列与第2列同属于第1行第1列的合并列(第1行第1列合并了2行2列), 所以表格第1行第1列列宽占表格总宽度的14% -->
            <!-- 第1列为话务组列, 合并了5行, 使用了3个样式, 列宽占表格总宽度的7% -->
            <td width="7%" rowspan="5" class="btbg1 font-center">话务组</td>
            <!-- 第2列为张三列, 使用了1个样式, 列宽占表格总宽度的7% -->
            <td width="7%" class="btbg2">张三</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第8行结束 -->

        <!-- 第9行开始, 该行为第8行的合并行 -->
        <tr>
            <!-- 从第2列开始赋值, 第1列为话务组列, 在第8行已经赋值过, 使用了1个样式 -->
            <td class="btbg2">李四</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
        </tr>
        <!-- 第9行结束 -->

        <!-- 第10行开始, 该行为第8行的合并行 -->
        <tr>
            <!-- 从第2列开始赋值, 第1列为话务组列, 在第8行已经赋值过, 使用了1个样式 -->
            <td class="btbg2">王五</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第10行结束 -->

        <!-- 第11行开始, 该行为第8行的合并行 -->
        <tr>
            <!-- 从第2列开始赋值, 第1列为话务组列, 在第8行已经赋值过, 使用了1个样式 -->
            <td class="btbg2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第11行结束 -->

        <!-- 第12行开始, 该行为第8行的合并行 -->
        <tr>
            <!-- 从第2列开始赋值, 第1列为话务组列, 在第8行已经赋值过, 使用了2个样式 -->
            <td class="btbg2 font-center">总计</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
            <td class="btbg2 font-center">20</td>
        </tr>
        <!-- 第12行结束, 即话务组数据赋值结束 -->
      </table>

</body>
</html>

样式代码为：

@charset "utf-8";
/* CSS Document */
.tabtop13 {
	margin-top: 13px;
}
.tabtop13 td{
	background-color:#ffffff;
	height:25px;
	line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
	font-family: 微软雅黑;
	font-size: 26px;
	font-weight: bold;
	border-bottom:1px dashed #CCCCCC;
	color: #255e95;
}
.titfont {
	
	font-family: 微软雅黑;
	font-size: 16px;
	font-weight: bold;
	color: #255e95;
	background: url(../images/ico3.gif) no-repeat 15px center;
	background-color:#e9faff;
}
.tabtxt2 {
	font-family: 微软雅黑;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
	color:#327cd1;
}
.tabtxt3 {
	font-family: 微软雅黑;
	font-size: 14px;
	padding-left: 15px;
	color: #000;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 20px;
}

本文参考自：HTML 表格 | 菜鸟教程