HTML-CSS(三)表格

表格制作

简单介绍关于表格的相关标签

表格：适合显示大量数据

标签

caption:表格标题（双标签）

tr:（双标签）定义行 ，可以在该标签设置该列的height属性，但是width没有作用
th:（双标签）定义列，可以设置height和width，用于首行的单元格，用于声明或者标注
td:（双标签）定义列 ，可以设置height和width，但是会产生单元格所处的行（高度）和列（宽度）发生宽度和高度影响

th与td区别是：th 加粗并居中，适用于表头
td ：//每列等宽 可以在每列上设置width：xxxxpx； 设置宽度之后文字默认靠左，实现居中可以使用align=“center”

col :(单表签)控制每一列宽度，高度设定可以在tr上设置，以及文字居中也在tr设置
<colgroup span='x' width=' '></colgroup>作用：将多个col合并成一个分组，可以将很多连续并且属性值一致的col标签用一个colgroup表示；span表示合并的个数

属性

border：表示边框大小；默认情况下border=’ '就是1px的，可以选择不填1px，但是不能少写border属性

cellspacing:单元格间隙；

cellspadding:单元格内部内边距空间

align:左右对齐方式（默认：center）

valign:上下对齐方式（默认：center）

width\height:height，width都会联动影响

colspan=‘x’：列单元格合并 原理：将将多个单元格合并成一个 （x表示可以占据几个单元格的宽度）

rowspan=‘x’:行单元格合并 原理：将将多个单元格合并成一个 （x表示可以占据几个单元格的高度）

上下合并和左右合并原理一样，你要合并几个，那么你就要
删除对应的单元格

<table border="1px" cellspacing="0" cellpadding="">
	<tr>
		<th width="100px" align="center">Header</th> 
		<th width="100px" align="center">Heade2</th> 
		<th   width="100px" align="center">Heade3</th> 
		</tr>
		<tr>
		<td width="100px" align="center" colspan=2>Data1</td>
		<td width="100px" align="center" >Data2</td>
		</tr>
</table>

Header	Heade2	Heade3
Data1		Data2

优化：给每一行的每一列都要写一行设置宽高，属实太过于麻烦和繁琐了，可以用col单表签，解决，每一个col就是一列，可以在col上设置宽度

table border="1px" cellspacing="0" cellpadding="">
	第一列 <col width='100px'>
	第二列<col width='100px'>
	第三列<col width='200px'>
	<tr align="center">
		<th >Header</th> 
		<th >Header2</th> 
		<th rowspan=2 >Heade3</th> 
		</tr>
	<tr align="center">
		<td >Data</td>
		<td >Data</td>
	</tr>
</table>

Header	Header2	Heade3
Data	Data

进一步优化：可以看到如果列数过多，那么就要写很多个col，这样就会显得很麻烦。所以可以使用colgroup标签，将多个连续且属性和属性值一致的col标签合成一组

Header	Header2	Heade3
Data	Data

<table border="1px" cellspacing="0" cellpadding="">
	<colgroup span='2' width='100px'></colgroup>
	<col width='200px'>
	<tr align="center">
		<th >Header</th> 
		<th >Header2</th> 
		<th rowspan=2 >Heade3</th> 
		</tr>
	<tr align="center">
		<td >Data</td>
		<td >Data</td>
	</tr>
</table>

动动小手点点赞

日期	天气情况	出行情况
2012

<table border="1px" cellspacing="0" cellpadding="">
			<caption>动动小手点点赞</caption>
			<thead>
				<tr>
					<th>日期</th>
					<th>天气情况</th>
					<th>出行情况</th>
				</tr>
             <thead>
   			 <tbody>
				<tr>
					<th>2012</th>
					<th><img src="../img/可爱二.jpg" width="100px" ></th>
					<th><img src="../img/可爱二.jpg" width="100px" ></th>
				</tr>
			</tbody>
		</table>

规范标准

根据w3c标准 table被规定划分三部分 <thead></thead> <tbody></tabody> <tfoot></tfoot>这些都是浏览器自动生成的，但我们书写时尽量按照w3c标准

<table border="" cellspacing="0" cellpadding="">
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>

注意：在一个table中tbody是可以出现多次，但是thead和tfoot只能出现一次，虽然你写多个浏览器还是照样会解析，但是为了符合w3c规范，尽量每一个表格只写一个