表格
表格是由行和列排列而成的一种结构
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>
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
