[html5入门-15]Html布局中简单的table的制作方法

在古老的浏览器网页中，相当部分布局是由table表格完成的，本文分享一下table标签的一些用法和常用属性设置。

如下图所示，一个基本的单元格table除了整体宽高属性之外还包括内部的标题单元格th，每一行的属性tr，以及基本单元格td，分别对这些基本组成部分进行属性设置即可做出所要求的表格。

以上图表格的实现代码为例：

	
		
		
		
	
	
		

			

				
日期

				
天气现象
				
气温
				
风向
				
风力
		
			
			

				
22日星期五
				
白天
				

				
晴转多云
				
高温7℃
				
无持续风向
				
微风
			
			

				
夜间
				

				
晴
				
低温-4℃
				
无持续风向
				
微风
			
		
	

1.设置表格整体属性table

包括表格的宽width，高height，单元格边框border，单元格之间距离cellspacing（若不设置此项为0，单元格则会成为一个个独立分开的小格子），设置单元格内容到边框距离cellpadding。

2.设置表格行tr

表格分为几行就有几个tr，再在每一行里面设置th或td。

3.设置标题单元格th

标题th往往会占几列，需要使用colspan设置所占列数，在下方的基本单元格td中就会按顺序占据一定列数。

4.设置基本单元格td

Td的数量要根据th所在的列数设置好，当td需要占两行时，需要用rowspan设置所在行数，而在下一个tr设置中，就不需要设置这个已经独占两行的td了。

5.可通过一些常用的属性设置单元格背景颜色，插入图片等，当cellspacing不为0时，也可以利用border-collapse：collapse属性将两个单元格之间的边框合并增强美观。

Table单元格的设置主要注意区分tr，th和tr，以及注意colspan和rowsspan所占的列数和行数，基本操作上很简单。