HTML_3th_表格

最新推荐文章于 2022-03-10 22:16:10 发布

weqpo

最新推荐文章于 2022-03-10 22:16:10 发布

阅读量393

点赞数

分类专栏： HTML 文章标签： html5 表格 table colspan rowspan

本文链接：https://blog.csdn.net/weqpo/article/details/57075232

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、表格

1、基本结果：行、列、单元格

1）表格标签<table></table>

2）行标签<tr></tr>

3）单元格标签<td></td>

2、基本语法

<table border="1">
	<tr>
		<td>第1个单元格的内容</td>
		<td>第2个单元格的内容</td>
		······
	</tr>
	<tr>
		<td>第1个单元格的内容</td>
		<td>第2个单元格的内容</td>
		······
	</tr>
	······
</table>

3、对齐方式

1）表格的对齐：align=left(左对齐,默认)、center(中间)、right(右对齐)
2）单元格的对齐：align= align=left(左对齐,默认)、center(中间)、right(右对齐)；valign=top(顶部)、middle(居中,默认)、bottom(底部)

4、表格跨列

表格跨列是针对单元格为对象来说的，在单元格标签中使用colspan属性来定义单元格所跨的列数。

5、表格跨行
表格跨行是针对单元格为对象来说的，在单元格标签中使用rowspan属性来定义单元格所跨的行数。

二、举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
		<p>表格1</p>
		<table>
			<tr>
				<td>第一个</td>
				<td>第二个</td>
				<td>第三个</td>
			</tr>
			<tr>
				<td>第四个</td>
				<td>第五个</td>
				<td>第六个</td>
			</tr>
			<tr>
				<td>第七个</td>
				<td>第八个</td>
				<td>第九个</td>				
			</tr>
		</table>
		
		<p>表格2</p>
		<table border="1">
			<tr>
				<td>第一个</td>
				<td>第二个</td>
				<td>第三个</td>
			</tr>
			<tr>
				<td>第四个</td>
				<td>第五个</td>
				<td>第六个</td>
			</tr>
			<tr>
				<td>第七个</td>
				<td>第八个</td>
				<td>第九个</td>				
			</tr>
		</table>
		
		<p>表格3</p>
		<table border="1">
			<tr>
				<td rowspan="2">第一个</td>
				<td>第二个</td>
				<td>第三个</td>
			</tr>
			<tr>
				<td>第四个</td>
				<td>第五个</td>
			</tr>
			<tr>
				<td>第七个</td>
				<td colspan="2">第九个</td>				
			</tr>
		</table>
	</body>
</html>

页面显示：