HTML中的table标签属性

HTML 专栏收录该内容
7 篇文章 1 订阅

表格

表格是由行和列排列而成的一种结构

HTML表格由table标签以及一个或多个tr、th或td标签组成:

table标签用来定义表格,整个表格包含在<table>和</table>标签中;

tr标签用来定义表格中一个行,它是单元格的容器,每行可以包含有多个单元格,由<tr>和</tr>标签表示;

td标签和th标签用来定义单元格,所有单元格都在tr标签内,每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示,具体的表格内容放置在这一对td标签或th标签之中,其中th标签中的内容默认以粗体、居中的方式显示。其语法如下: 

<table>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>

<table是<tr的上层标签
<tr必须在一个<table</table里面,它不能单独使用,相当于<table的属性标签.
<table标示一个表格,<tr标示这个表格中间的一个行,<td、<th标示行中的一个列,需要嵌套在<tr</tr中间。

 table标签属性

下列标签属性一般不建议使用,而是通过样式属性来实现

1.border标签属性:设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框;

实际开发中不建议使用border标签属性实现边框效果,建议通过为table、th和td设定border样式属性实现。

代码如下:

2.width标签属性:设定表格的宽度,该标签属性属性值如下:

不建议通过width标签属性设置表格宽度,建议向table标签添加width样式属性进行设置。

代码如下:

3.align标签属性:指定表格相对于周围标签的对齐方式,该标签属性属性值如下:

不建议通过align标签属性设置表格相对于周围标签的对齐方式,建议向table标签添加样式属性进行设置:

         a.实现左右对齐可以通过float样式属性实现

         

          b.居中对齐可以通过margin样式属性实现:margin: 0 auto;   

代码如下:

4.cellspacing 标签属性:设定单元格之间的间距(单位:px)。

不建议通过cellspacing标签属性设置单元格之间的间距,建议向table标签添加border-spacing样式属性进行设置

代码如下:

5.cellpadding标签属性:设定单元边沿与单元内容之间的间距(单位:px)

不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距,建议向td或th标签添加padding样式属性来实现

6.bgcolor标签属性:设置表格背景颜色,属性值如下:

不建议通过bgcolor标签属性设置表格背景颜色,建议向table标签添加background-color样式属性实现这一效果

7.border-collapse样式属性:设置表格的边框是否被合并为一个单一的边框,属性值如下:

代码如下: 

 

   用标签属性完成一个普通表格,代码如下:

<table border="10px" width="50%" align="center" cellspacing="0" cellpadding="5 px" bgcolor="aqua" >
	<tr>
		<td> 1 </td> <td> 1 </td> <td> 1 </td>				
	</tr>
	<tr>
		<td> 1 </td> <td> 1 </td> <td> 1 </td>
	</tr>
	<tr>
		<td> 1 </td> <td> 1 </td> <td> 1 </td>
	</tr>
</table>

显示效果如下:

 

上述代码一般不使用,通过为table、th和td设定样式属性实现,代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>	
		<style>
			table{				
				border: 1px solid black;
				width: 20%;	
				/*float:right;*/
				margin: 0 auto;
				border-spacing:0 ;
				background-color: red;
				border-collapse: collapse;
			}
			td{				
				border: 1px solid black;
				padding: 10px;
			}			
		</style>
	</head>
	<body>        
		<table >
			<tr>
				<td> 1 </td> <td> 1 </td> <td> 1 </td>				
			</tr>
			<tr>
				<td> 1 </td> <td> 1 </td> <td> 1 </td>
			</tr>
			<tr>
				<td> 1 </td> <td> 1 </td> <td> 1 </td>
			</tr>
		</table>
	</body>
</html>

 标签属性和样式属性都能实现基本功能,但如果同时存在,样式属性会覆盖标签属性。

 tr标签属性

1.align标签属性:设置表格行中单元格内容的水平对齐方式,该标签属性有多个值:

不建议通过标签属性的方式设置单元格内容的水平对齐方式,建议向tr标签添加text-align样式属性设置表格行中单元格内容的水平对齐方式

2.valign标签属性:设置表格行中单元格内容的垂直对齐方式,该标签属性有多个值:

不建议通过标签属性的方式设置单元格内容的垂直对齐方式,建议向tr标签添加vertical-align样式属性设置表格行中单元格内容的垂直对齐方式

3.bgcolor标签属性:设定表格行的背景颜色,属性值如下:

不建议通过bgcolor标签属性设置表格行的背景颜色,建议向tr标签添加background-color样式属性实现这一效果

通过为table、th和td设定样式属性实现,代码如下:

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
	
			table{
				border: 1px solid black;
				width: 20%;	
				/*float:right;*/
				margin: 0 auto;
				border-spacing:0 ;
				background-color: red;
				border-collapse: collapse;
			}
			tr{
				height: 50px;
				text-align: center;
				vertical-align: top;
				background-color: salmon;				
			}
			td{		
				border: 1px solid black;
			}
			
		</style>
	</head>
	<body>
		<table >
			<tr valign="top">
				<td> 1 </td> <td> 1 </td> <td> 1 </td>			
			</tr>
			<tr>
				<td> 1 </td> <td> 1 </td> <td> 1 </td>
			</tr>
			<tr>
				<td> 1 </td> <td> 1 </td> <td> 1 </td>
			</tr>
		</table>
	</body>
</html>

上述代码显示效果:

 标签属性和样式属性都能实现基本功能,但如果同时存在,样式属性会覆盖标签属性。

th和td标签属性 

1.width标签属性与height标签属性:设定单元格的宽度和高度,标签属性属性值如下:

建议向th标签或td标签添加width样式属性和height样式属性设置单元格宽度和高度。

2.bgcolor标签属性:设定单元格背景颜色,该标签属性有多个值:

建议向th标签和td标签添加background-color样式属性设定单元格背景颜色

3.align标签属性:设置单元格内容的水平对齐方式,该标签属性有多个值:

建议向th标签或td标签添加text-align样式属性设置单元格内容的水平对齐方式。

4.valign标签属性:设置单元格内容的垂直对齐方式,该标签属性有多个值:

建议向th标签或td标签添加vertical-align样式属性设置单元格内容的垂直对齐方式。

5.colspan样式属性:设置单元格横跨多少列。

6.rowspan样式属性:设置单元格横跨多少行

7.nowrap标签属性:设定单元格的内容是否换行

如果没有nowrap标签属性,则单元格内文字自动换行!

使用table表的知识完成如下操作:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>2013年度图书销售统计</title>
		<style>
			table{
				border: 1px solid black;
				width:50%;
				margin: 0 auto;
				border-spacing:0 ;
			}
			tr{
				border: 1px solid black;
				text-align: center;
			}
			td{
				border: 1px solid black;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="9">2013年度图书销售统计</td> 
			</tr>
			<tr>
				<td rowspan="2">图书分类</td> <td colspan="2">一季度</td><td colspan="2">二季度</td><td colspan="2">三季度</td><td colspan="2">四季度</td>
			</tr>
			<tr>
				  <td>销售量</td> <td>销售额</td> <td>销售量</td> <td>销售额</td> <td>销售量</td> <td>销售额</td> <td>销售量</td> <td>销售额</td>
			</tr>
			<tr>
				<td>小说</td> <td>23521</td> <td>¥599,940.00</td> <td>18423</td> <td>¥44,841.00</td> <td>32125</td> <td>¥829,870.00</td><td>25100</td> <td>¥586,564.00</td>
			</tr>
			<tr>
				<td>文艺</td> <td>7643</td><td>¥180,423.00</td><td>8010</td><td>¥192,420.00</td><td>10289</td><td>¥321,717.00</td><td>9012</td><td>¥266,134.00</td>
			</tr>
			<tr>
				<td>励志/成功</td> <td>13328</td><td>¥428,371.00</td><td>15021</td><td>¥592,987.00</td><td>13496</td><td>¥471,620.00</td><td>10130</td><td>¥386,845.00</td>
			</tr>
			<tr>
				<td>童书</td> <td>20328</td><td>¥358,891.00</td><td>24030</td><td>¥392,713.00</td><td>27444</td><td>¥461,770.00</td><td>18027</td><td>¥328,451.00</td>
			</tr>			
		</table>
	</body>
</html>

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值