HTML_3th_表格

一、表格

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>

页面显示:







  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值