HTML中如何为表格添加标题（添加的标题与表格相对静止）（<table><caption>标题</caption></table>）

最新推荐文章于 2024-08-11 23:38:32 发布

杨宗健

最新推荐文章于 2024-08-11 23:38:32 发布

阅读量1.5w

点赞数 3

分类专栏： HTML新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/60780453

版权

HTML新手学习专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>表格的标题</title>
        <base target="_self">
    </head>
    <body>
        <!--最初的表格-->
    	<h3 align="center">表格的标题</h3>
    	<table border="1" cellspacing="2" cellpadding="2" width="300px" height="100px" align="center">
        	<tr>
            	<td>北京</td>
                <td>上海</td>
            </tr>
            <tr>
            	<td>深圳</td>
                <td>广州</td>
            </tr>
        </table>
        <br><br><br><br>
        <!--表格标题不改变位置，只改变表格的位置，观察标题是否一直和表格对齐-->
        <h3 align="center">表格的标题</h3>
        <table border="1" cellspacing="2" cellpadding="2" width="300px" height="100px" align="right">
        	<tr>
            	<td>北京</td>
                <td>上海</td>
            </tr>
            <tr>
            	<td>深圳</td>
                <td>广州</td>
            </tr>
        </table>
        <br><br><br><br><br><br><br><br><br><br><br>
        <!--正确的表格标题（标题一直和表格整体对齐，不论怎么改变表格位置，标题一直相对表格在原先的位置上）-->
        <table border="1" width="300px" height="100px" align="center" cellspacing="2" cellpadding="2">
        	<caption><h3>表格的标题</h3></caption>
            <tr>
            	<td>北京</td>
                <td>上海</td>
            </tr>
            <tr>
            	<td>深圳</td>
                <td>广州</td>
            </tr>
        </table>
    </body>
</html>

添加表格标题的方法（标签）：

<caption>标题内容</caption>（这对标签必须写在<table></table>之间才能起作用，写在<table></table>之外不起作用。）