您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

HTML-表格布局

1.0table标签

1.1table标签是表格布局标签,可以通过表格之间的嵌套合并来实现多所需要的表格。

<table>表格标签
<tr>行标签
<th>表头标
<td>列标签
<thead>定义表头
<tbody> 元素用于对 HTML 表格中的主体内容进行分组
< tfoot> 元素用于对 HTML 表格中的表注(页脚)

通过如图方式实现 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格布局</title>
</head>
<body>
<table border="1">
	<tr>
		<th>序号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>信仰</th>
	</tr>
	<tr>
		<td>1</td>
		<td>张三</td>
		<td>男</td>
		<td>无</td>
	</tr>

	<tr>
		<td>2</td>
		<td>王四</td>
		<td>男</td>
		<td>伊斯兰</td>
	</tr>

	<tr>
		<td>3</td>
		<td>赵一</td>
		<td>女</td>
		<td>耶稣教</td>
	</tr>
</table>
	
</body>
</html>

 

1.2table常用属性

border---用于设置表格边框的大小,用正整数设定,正整数越大表格边框越大。
height\width---用于设置表格的长宽,此设定只能改变<tr>和<td>,单位是px和%。如果行和列都设置了不同的高宽则取最大值。
align---用于设置表格的对齐方式,对齐方式一共有三种,分别是:left左对齐(默认),right右对齐,center中间对齐。
bgcolor---用于设定表格的背景颜色,具体颜色可参照颜色表。
background---用于设定表格的背景图案,当同时设定了背景颜色和背景图案时,显示背景图案。
cellpadding---用于设定表格的单元格和边距之间的距离。
cellspacing---用于设定表格的单元格和单元格之间的距离。

2.0表格的合并和嵌套

合并:<table>表格的合并有两个属性分别是:colspan---即合并列向单元格。rowspan---即合并横向单元格。

嵌套:表格的单元格里面也可以包含其他的HTML元素,只要它们全部包含于单元格内即可。当一个表格的单元格内是另一个表格时,就创建了一个“嵌套表格”,同理也可以通过与form表单结合来实现更加整洁美观的效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格嵌套和合并</title>
</head>
<body>
	<table width="500" border="1">
		<tr>
			<td colspan="4" align="center">顺丰快递</td>
		</tr>
	    <tr>
			<td rowspan="2">地址:光彩小道863h号</td>
			<td>寄件人:</td>
			<td>王麻子</td>
			<td>tel:155xxxxxxxx</td>
		</tr>
		<tr>
	    	<td>收件人:</td>
	    	<td>王小麻子</td>
			<td>tel:144xxxxxxxx</td>
		</tr>

	</table>
</body>
</html>


3.0小笔记

1.注意无论横向纵向合并时,属性均在<td>中放入,即<td colspan="x"></td>,且合并之后的表格无需填充直接完成后续表格即可;

2.在嵌套以及与form表单结合时,注意双标签的位置,需要多加练习以达到熟练掌握。

 

 

 

 

 

 

 

 

 

 

 

 

 

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进