1. 程式人生 > >HTML中如何為表格新增標題(新增的標題與表格相對靜止)(標題)

HTML中如何為表格新增標題(新增的標題與表格相對靜止)(標題)

<!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>之外不起作用。)