【HTML】HTML 表格 ② ( 表头单元格标签 | 表格标题标签 )

韩曙亮

发布于 2023-03-30 19:04:28

6.7K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、表头单元格标签

表头单元格可以在表格中用作第一排作为表格的表头使用 , 表头单元格中的文本设置可以与普通单元格中的文本设置不同 ;

表头单元格中的文本会居中 , 并且加粗显示 ;

表头单元格标签如下 :

<th></th>

表头单元格与普通单元格放置位置一样 , 也是放在 table 表格标签下的 tr 表格行标签下 , 如 :

		<!-- 表格标签 -->
		<table>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
		</table>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 表格标签 -->
		<table border="1" width="500" height="200" 
			   align="left" cellpadding="10" cellspacing="0">
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

二、表格标题标签

在 <table>表格标签中 , 可以使用表格标题标签 <caption> 为表格添加一个标题 ;

被添加的表格标题会显示在表格上方 , 并且居中显示 ;

表格标题标签用法 : 表格标题标签必须紧跟在 <table>表格标签后面 , 中间不要插入其它标签 , 否则设置无效 ;

		<!-- 表格标签 -->
		<table>
			<!-- 表格标题标签 -->
			<caption>表格标题</caption>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
		</table>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 表格标签 -->
		<table border="1" width="500" height="200" 
			   align="left" cellpadding="10" cellspacing="0">
			<!-- 表格标题标签 -->
			<caption>表格标题</caption>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :