HTML学习笔记08-表格

最新推荐文章于 2025-08-18 16:25:29 发布

原创最新推荐文章于 2025-08-18 16:25:29 发布 · 1.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML

本文介绍了HTML表格的基本用法，包括如何创建简单的表格结构、定义表头、实现单元格跨行和跨列显示，以及如何利用<thead>、<tbody>和<tfoot>标签对表格进行组织。

HTML表格

表格由<table>标签来定义，表格的行由<tr>标签来定义，表格的列由<td>标签来定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

border=1是设置边框的粗细，不需要边框，可以去掉

使用<th>标签定义表头，大部分浏览器会把表头加粗居中显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<th>表头1</th>
		<th>表头2</th>
	</tr>
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

跨格表格使用colspan属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<th colspan="2">单元格跨两格</th>
	</tr>
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

跨列表格使用rowspan属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<th>表头1</th>
		<th>表头2</th>
	</tr>
	<tr>
		<td rowspan="2">单元格跨两列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

<thead>:表格的页眉主要用来放表头

<tbody>:表格的主体主要用来放表格的内容

<tfoot>:表格的页脚主要用来放类似统计数据的东西

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>60</td>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td>
            <td></td>
            <td>150</td>
        </tr>
    </tfoot>
    </table>

标签

#HTML