Table 标签

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流！ ----------------------

Table标签是HTML中一个很重要的标签元素，在传统的网页布局方式就是用table来进行布局。表格布局的一个好处就是把内容固定到网页上，内容不会随便的移动和改变。其实table表格，原来是用于，保存数据的，保存有格式清晰的数据。表格中可以包含任何的内容，故在使用DIV+CSS之前，网页的布局都是采用表格来完成的。

布局的思想----排版，和用什么方式来布局无关
排版的一种思路：从大到小排版；从左向右/从上到下排

Table标签的框架

<span style="font-size:18px;"><table>
<colgroup>直列标签</colgroup>
	<caption> 表名内容 </caption>
	<thead>
		<tr>
			<th> 表头1 </th>
			<th> 表头2 </th>
			  ..................
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> 内容列1 <td>
			<td> 内容列1 <td>
				..................
		</tr>
		..................
	</tbody>
	<tfoot>
		<tr>
			<td> 表尾 </td>
			...................
		</tr>
	</tfoot>
</table></span>

    使用表格的框架来确定内容有一个好处就是，如果在后台中一不小心将表头行、表尾行以及内容行代码写混乱了，不会影响表格的结果内容展示，但是，如果没有使用框架的话，结果的显示就全部给乱了。下面是两个分别使用框架和不使用框架的显示效果：

无框架，行位置变乱

1.1	1.2	1.3
h1	h2	h3
2.1	2.2	2.3
r1	r2	r3
3.1	3.2	3.3
表格行位置顺序写乱了，不存在框架的时候，显示效果基本乱套了

有框架，框架位置变乱

1.1	1.2	1.3
h1	h2	h3
2.1	2.2	2.3
r1	r1	r1
表格行位置顺序写乱了，存在框架的时候，显示效果不变
3.1	3.2	3.3

Table 标签属性

属性	值	描述
align	leftcenterright	规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定表格的背景颜色。
border	pixels	规定表格边框的宽度。如果不设置默认为0，不显示边框
cellpadding	pixels%	规定单元格边沿与其内容之间的空白。默认为2px,
cellspacing	pixels%	规定单元格之间的空白。默认为2px,单元格之间有一段空白.
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的 不显示表格外边框 只是显示上边线。 只是显示下边线。 显示水平边框(上下边框)。 显示左边边框。 显示右边边框。 显示垂直边框(左右边框) 显示所有边框 显示所有边框
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的: 不显示内边线，都不可见。 显示框架之间的分界线 显示水平分割线线，即行之间的分割线。 显示垂直分割线线，即列之间的分割线 显示所有的内格线，默认值
summary	text	规定表格的摘要。
width	%pixels	规定表格的宽度。

table标签其它属性

 bordercolorlight/bordercolordark：分别用来控制表格的亮边框（左和上）和暗边框（右和下），通过这两个属性可以设置表格的凹陷和凸起的效果，以黑(black)白(white)颜色对比最为明显,但是在高版本的浏览器中凹陷效果比较明显，凸起效果不是很明显，低版本的浏览器中效果比较明显，这里就不提供代码和效果了。

跨行和跨列

    跨行和跨列是通过标签td的来实现的，跨行用属性 rowspan ;单元格跨三行。跨列用属性 colspan 来实现。跨行或者列，对应位置上的单元格就应该删除。跨x行或者y列，就应该删除x-1或y-1个单元格，只是保留当前跨的单元格。实例如下：

<span style="font-size:18px;">	<table width="500" border="1" bordercolor="blue" cellspacing="0" cellpadding="5">
		<caption> 合并行和列 </caption>
		<tbody>
			<tr>
				<td>1.1</td>
				<td>1.2</td>
				<td>1.3</td>
			</tr>
			<tr>
				<td colspan="2" align="center">2.1</td>
				<!--<td >2.2</td>-->
				<!--valign = 'top/middle/bottom/baseline'-->
				<td rowspan="2" align="center" valign="middle">2.3</td>
			</tr>
			<tr>
				<td>3.1</td>
				<td>3.2</td>
				<!--<td>3.3</td>--><!--合并行，这个单元格就over了-->
			</tr>
		</tbody>
	</table></span>

效果如下：

合并行和列

1.1	1.2	1.3
2.1		2.3
3.1	3.2

细线表格

    从上面的实例可以看出，当设置了border=“1”，显示边框，设置cellspacing=“0”,外边距为0。但是显示的结果中表格的线条的宽度比较宽，为2px。如果我们需要一个像素宽的表格边线，这两个属性是无法设置的。其实细线表格不是真的边框细线，而是通过模拟出来的。

1. 首先需要去掉表格的边框并设置表格的背景颜色，背景颜色设置为我们想要的边框颜色。
2. 然后设置单元格的外边距为细线的宽度，即cellspacing属性，要显示多少个像素的边线就设置cellspacing值为多少。
3. 然后设置单元格的背景颜色。[通过整行设置较快一些]

单元格的背景颜色会将表格的背景颜色给覆盖掉，但是外边距部分的颜色不会被覆盖，就呈现出一种细边框的表格。代码和效果如下：

<span style="font-size:18px;">		<table bgcolor="red" width="500" cellspacing="1" cellpadding="5">
		  <caption>细线表格</caption>
		  <tbody>
			<tr border="1" bgcolor="yellow">
				<td>1.1</td>
				<td>1.2</td>
				<td>1.3</td>
			</tr>
			<tr border="1" bgcolor="yellow">
				<td>2.1</td>
				<td>2.2</td>
				<td>2.3</td>
			</tr>
			<tr border="1" bgcolor="yellow">
				<td>3.1</td>
				<td>3.2</td>
				<td>3.3</td>
			</tr>
		  </tbody>
		</table></span>

细线表格

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

直列化格式

    直列话格式主要是将某一列用特定的颜色进行显示，通过table下面有一个标签<colgroup>或者是标签<col>。我使用的是<colgroup>标签。这个标签有几个属性：align/valign/span/bgcolor. span：直列话的列数，bgcolor：值列化列的背景颜色。默认的是1，只是值列化第1列，如果设置 span=“2”，那么前面两列将被直列化，显示的背景颜色和bgcolor设置的一样，以此类推，需要直列化多少列就写几。但是往往是想直列化某一列，通过上面的方式已经做不到了。采用下面的方式：

写两个成对的<colgroup></colgroup>标签。第一个标签中设置属性span为需要直列化的列的索引。第二个标签中设置要显示的颜色，bgcolor就OK了。代码例子如下：

<span style="font-size:18px;">  <table width="500" border="1" cellspacing="0" bordercolor="blue">
	<caption align="center">值列化表格，就是控制列样式</caption>
	<!--下面这一句话将第1列显示为红色-->
	<!--<colgroup bgcolor="red" ></colgroup>-->
	<!--下面这一句话将前两列列显示为红色-->
	<!--<colgroup bgcolor="red" span="2"></colgroup>-->
	<!--下面这一句话将索引为3的列显示为红色，也就是说将第4列显示为红色，如果要让第x列变色，就将span赋值为x-1-->
	<colgroup span="3"></colgroup>
	<colgroup bgcolor="red"></colgroup>
	<thead>
		<tr>
			<th>h1</th>
			<th>h2</th>
			<th>h3</th>
			<th>h4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1.1</td>
			<td>1.2</td>
			<td>1.3</td>
			<td>1.4</td>
		</tr>

		<tr>
			<td>2.1</td>
			<td>2.2</td>
			<td>2.3</td>
			<td>2.4</td>
		</tr>

		<tr>
			<td>3.1</td>
			<td>3.2</td>
			<td>3.3</td>
			<td>3.4</td>
		</tr>
	<tfoot>
		<tr>
			<td>r1</td>
			<td>r2</td>
			<td>r3</td>
			<td>r4</td>
		</tr>
	</tfoot>
  </table></span>

效果如下：

值列化表格，就是控制列样式

h1	h2	h3	h4
1.1	1.2	1.3	1.4
2.1	2.2	2.3	2.4
3.1	3.2	3.3	3.4
r1	r2	r3	r4

浏览器之间的差异

测试使用的浏览器为：IE11，FireFox 29.0，Chrome：34.0

• 边框颜色的继承：IE11中单元格颜色不会继承表格table的边框颜色属性，FireFox/Chrome 则会继承table的边框颜色属性
• 边框颜色的处理：IE11和FireFox 在对表格的颜色边框进行处理的时候，会存在暗边和亮边效果，亮边框为左边框和上边框为，暗边框为右边框和下边框。亮边框的颜色较暗边框的颜色浅一些。但是Chrome则没有这样的问题
• 单元格边框线的粗细：在单元格的边框线宽和表格的边框线宽上没有浏览器之间的差异，单元格的线宽都为1px，和表格线宽无关
• <caption>标签的align属性：IE11和Chrome 只是支持，top和bottom两种值，分别将表名显示在表格主体的上边和下边。而Firefox则支持left/top/right/bottom 四中值，分别将表名显示在表格主体的左边、上边、右边和下边。

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流！ ----------------------