【HTML】为网页添加表格

1、表格

1.1、创建表格

<table>										//定义一个表格
	<tr>									//定义表格中的一行，嵌套在<table></table>中

   	 	<td>单元格内的文字</td>				//定义表格中的单元格，嵌套在<tr></tr>中

      	...
    </tr>
    ...
</table>

1.2、< table>标签的属性

1.3、< tr>标签的属性

• < tr>标签无宽度属性width，其宽度取决于表格标签< table>。
• 对< tr>标签应用valign属性，用于设置一行内容的垂直对齐方式。

1.4、< td>标签的属性

• 在标签的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。
• 当对某一个标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。
• 当对某一个标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

1.5、< th>表头标签及其属性

1.6、表格的结构

< thead>< /thead>：定义表格的头部,包含网页的logo和导航等头部信息。
< tfoot>< /tfoot >：定义表格的页脚，包含网页底部的企业信息等。
< tbody>< /tbody>：定义表格的主体，包含网页中除头部和底部之外的内容。
一个表格只能定义一对< thead>< /thead>、一对< tfoot></ tfoot >和多对< tbody></ tbody >，它们必须按< thead>< /thead>、< tfoot>< /tfoot >和< tbody>< /tbody >的顺序使用。之所以将 < tfoot></ tfoot >置于< tbody></ tbody >之前，是为了使浏览器在收到全部数据之前即可显示页脚。

1.7、CSS控制表格样式

1.7.1、CSS控制表格边框

• border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。
• 当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。
• 行标签无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。

table{
	width:280px;
	height:280px;
	border:1px solid #F00;    /*设置table的边框*/
} 
td,th{ border:1px solid #F00; }    /*为单元格单独设置边框*/

1.7.2、CSS控制表格边距

行标签< tr>无内边距属性padding和外边距属性margin。

th,td{
border:1px solid #30F;  /*为单元格单独设置边框*/
padding:20px; /*为单元格内容与边框设置20px的内边距*/
margin:20px;   /*为单元格与单元格边框之间设置20px的外边距*/
 }

1.7.3、CSS控制单元格宽高

对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者。

td{
	width:20px;
	Height:20px;
}