文章目录
- 一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )
- 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 )
一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )
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 属性 : 属性值 为 像素值 ; 设置边框
- cellspacing 属性 : 属性值 为 像素值 ; 设置 单元格边框 之间的 间距
- cellpadding 属性 : 属性值 为 像素值 ; 设置 单元格边框 与 单元格内容 之间的 间距
- 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>
网页效果 :