【HTML】HTML 表格 ① ( 表格标签 | 行标签 | 单元格标签 | table 表格属性 | border 属性 | align 属性 | width 属性 | height 属性 )

韩曙亮

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

5K00

代码可运行

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

运行总次数：0

代码可运行

文章目录

一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )

HTML 表格由 3 种标签组成 : 表格涉及的标签都是双标签 ;

表格标签 : 表格最外围的标签 , 用于包裹整个表格 ; 其中包含若干 tr 行标签 ;

	<table>整个表格内容</table>

行标签 : 标签内是一行的内容 , 其中包含若干 td 标签 ;

	<tr>表格中一行的内容</tr>

单元格标签 : 表格中一个单元格中的内容 , 只包含一个单元格的文本 ;

	<td>单元格文本内容</td>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 整个表格内容 -->
		<table>
			<!-- 表格中一行的内容 -->
			<tr>
				<!-- 表格中单个单元格内容 -->
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 )

table 表格属性 :

border 属性 : 属性值为像素值 ; 设置边框 , 默认 0 像素无边框 ;
cellspacing 属性 : 属性值为像素值 ; 设置单元格边框之间的间距 , 默认 2 像素 ;
cellpadding 属性 : 属性值为像素值 ; 设置单元格边框与单元格内容之间的间距 , 默认 1 像素 ;
width 属性 : 属性值为像素值 ; 设置表格宽度 ;
height 属性 : 属性值为像素值 ; 设置表格高度 ;
align 属性 : 可设置 left , center , right 等属性值 ; 用于设置整体表格在网页中的水平对齐方式 ;
- 设置 left , 表格在网页左侧 ;
- 设置 center , 表格在网页水平居中 ;
- 设置 right , 表格在网页右侧 ;

代码示例 :

<!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="center" cellpadding="10" cellspacing="0">
			<!-- 表格中一行的内容 -->
			<tr>
				<!-- 表格中单个单元格内容 -->
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :