Bootstrap

HTML中的table标签属性

表格

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

在这里插入图片描述
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>

在这里插入图片描述

;