目录
1.概述
2.表格的基本结构
3.表格的属性
4.单元格合并
1.概述
表格的基本语法结构:
<table> <tr> <td>单元格内容</td> …… </tr> <tr> <td>单元格内容</td> …… </tr> </table>
其中< table>用于声明一个表格对象, <tr>用于声明一行,<td>用于声明一个单元格。
注意:表格中所以的<tr></tr>标记都必须放到<table></table>标记之间。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格示例</title>
</head>
<body>
<table width="300" border="2">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
结果:
2.表格的基本结构
从结构上看,表格可以分成表头、主体和表尾三个部分,分别用<thead、<tbody>和<tfoot>标记表示。
注意:
1.表头和表尾在一张表格中只能有一个,而一张表格可以有多个主体。
2.对于大型表格来说,应该将<tfoot>出现在<tbody>的前面,这样浏览器显示数据时有利于加快表格的显示速度。
3.<thead>、<tbody>、<tfoot>标记内部都必须使用。
表格结构划分的好处:1.可以先显示<tbody>的内容,而不必等整个表格下载完成后才能显示。
2.无论<thead>、<tbody>、 <tfoot>的顺序如何改变,<thead>的内容总是在表格的最前面,<tfoot>的内容总是在表格的最后面。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格基本结构</title>
</head>
<body>
<table width="300" border="2">
<thead>
<tr>
<th colspan="3" align="center">表头</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" align="center">这是表尾</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
结果:
表格相关标记的说明 | |
---|---|
元素 | 说明 |
tr | 单元行,由若干单元格横向排列而成 |
td | 单元格,包含表格数据 |
th | 单元格标题,与td作用相似,但一般作为表头行的单元格 |
table | 表格的最外层标记,代表一个表格 |
thead | 表头分组 |
tfoot | 表尾分组 |
tbody | 表格主体分组 |
colgroup | 列分组 |
caption | 表格标题 |
3.表格的属性
使用<table>标记可以设置表格的高度、宽度、边框线的粗细、对齐方式、背景颜色、背景图片、单元格间距和边距等表格属性。
表格的属性及其说明 | |
---|---|
属性 | 说明 |
align | 表格的对齐方式,通常是left (左对齐)、center (居中对齐)、right (右对齐 |
height | 表格高度 |
width | 表格宽度 |
bordercolor | 表格边框的颜色 |
bgcolor | 表格的背景颜色 |
border | 表格边框 |
background | 表格的背景图片 |
cellspacing | 单元格之间的间距 |
cellpadding | 单元格的内容与其边框的内边距 |
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格的属性</title>
</head>
<body>
<table border="2" width="400" bordercolor="red" height=60px cellspacing="2" align="center" bgcolor="pink">
<caption>表格标题</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>专业</th>
</tr>
<tr>
<td>123456</td>
<td>张三</td>
<td>软件工程</td>
</tr>
</table>
</body>
</html>
结果:
使用<table>标记可以从总体上设置表格属性,根据网页布局的需要,还可以单独对表格中的某行和某一个单元格进行属性设置。在HTML文档中,<tr>标记用来生成和设置表格中一行的标记,其属性的语法格式如下:
<tr height="行高" align="水平对齐方式" va1ign="垂直对齐方式" bgcolor="背景颜色">
其中valign属性(取值可以为top顶端对齐、middel居中对齐、bottom底端对齐)
例:对上面表格进行改动:在表格的第二行<tr>标记中,通过align属性设定表格水平方向为居中对齐:通过height属性设定表格高度为50像素;通过valign设定该行的垂直方向为顶端对齐:通过bgcolor属性设定该行的背景颜色为蓝色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格的行属性</title>
</head>
<body>
<table border="2" width="400px">
<caption>学生信息</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>专业</th>
</tr>
<tr align="center" valign="top" height=50px bgcolor="blue">
<td>8888</td>
<td>张三</td>
<td>软件工程</td>
</tr>
</table>
</body>
</html>
结果:
4.单元格合并
默认情况下,表格中每行的单元格高度和宽度都是一样的。跨行和跨列功能可以分别通过单元格的rowspan和colspan属性实现,其基本语法如下:
<td rowspan= "所跨行数”colspan=" 所跨列数">
注意:rowspan和colpan的属性值是一一个 具体的数值
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>合并单元格</title>
</head>
<body>
<table border="2" width="400px">
<tr>
<td>1</td>
<td>1</td>
<td rowspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td colspan="3">1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
结果: