表格标签

表格标签
标签名称说明
table表格标签标记当前内容开始是一张表格
caption表格描述对表格中的内容进行文字描述
thead表头表格的头部,通常是对后续数据的说明
tr表格行(table row)表示表格中的一行数据
th表头数据(table head data)表示表头中某一格的数据,包含具体的数据
tbody表体表示表格中的具体数据部分
td表格数据(table data)表示表格题中要呈现的某一格数据,包含具体数据
ftoot表尾通常用于对表格中的数据进行总结的信息,比如小计等
属性名称说明
table:width表格宽度使用像素单位描述表格显示的宽度
table:border表格边线使用像素单位描述表格边线的宽度
table:align表格对齐方式

left:表示表格向左对齐

right:表示表格向右对齐

center:表示表格居中对齐

td:rowspan表格跨行当前格跨越多行
td:colspan表格跨列当前格跨越多列

简单表格:

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单表格的使用</title>
	</head>
	<body>
		<!--
			表格标签
		-->
		<table border="1px" width="150px">
			<tr>
				<td>1000顶点</td>
				<td>7</td>
				<td>7</td>
				<td>7</td>
				<td>1000</td>
			</tr>
			<tr>
				<td>普通</td>
				<td>5</td>
				<td>5</td>
				<td>5</td>
				<td>500</td>
			</tr>
			<tr>
				<td>垃圾</td>
				<td>0</td>
				<td>0</td>
				<td>0</td>
				<td>10</td>
			</tr>
		</table>
	</body>
</html>

表格使用建议:

 1.不建议使用表格布局,因为使用表格不够灵活,另外一方面由于表格的特性,需要将表格的所有标签加载完毕之后才能够呈现界面。

 2.在对解析速度没有要求的地方可以使用表格提升开发效率,通常内网管理系统,或者管理界面。

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<style type="text/css" media="screen" id="test">
		
	</style>
</head>
<body>
	<table border=1 align="center"  cellspacing="1" width="300" height="300" >
		<tr align="center">
			<td rowspan="2">A</td>
			<td colspan="2">B</td>
		</tr>
		<tr width="" align="center">
			<td>E</td>
			<td rowspan="2">C</td>
		</tr>
		<tr align="center">
			<td colspan="2">D</td>
		</tr>
	</table>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值