入门2.HTML表格

HTML表格

主要内容：
了解表格应用场景
表格基本结构
如何操作表格
表格属性
表格跨行跨列
案例：表格网页布局

数据的展示
HTML表格

<table border="1">表格
	<caption></caption>表格标题，居中显示
	<thead>
	<tr>行
		<th>表格头，内容居中，加粗显示</th>
	</tr>
	</thead>
	<tbody>
	<tr>行
		<td>单元格</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>行
		<td>单元格</td>
	</tr>
	</tfoot>
</table>

带结构的表格
表格划分三部分：表头，主体，脚注
thead:表格的头（放标题之类内容）
tbody:表格的主体（放数据主体）
tfoot：表格的脚（放表格的脚注）

表格属性
width  		  pixels,%  		 规定表格的宽度
align  		  left,center,right  表格相对周围元素的对齐方式
border 		  pixels    		 规定表格边框的宽度
Bgcolor  	  rgb(x,x,x) #xxxxxx,colorName   背景颜色
cellpadding   pixels,%   		单元边沿与其内容之间的空白
cellspacing   pixels,%   		单元格之间的空白
frame   	  属性值    			规定外侧边框的哪个部分可见
rules  		  属性值   			规定内侧边框的哪个部分可见


tr标签属性
bgcolor   colorName  #xxx  rgb(x,x,x)

跨列属性colspan ="2"
跨行属性rowspan ="2"

表格嵌套
嵌入表格说明：1要有完整表格结构，2要放在<td>标签中

3.布局案例

<table width="100%" bgcolor="#f2f2f2">
	<caption></caption>表格标题，居中显示
	<thead>
	<tr height="80px" bgcolor="red">行
		<td width="240px" bgcolor="blue" valign="top">
			<table border="1">表格
				<tr>行
					<th>表格头，内容居中，加粗显示</th>
				</tr>
				<tr>行
					<td>单元格</td>
				</tr>
			</table>
		</td>
	</tr>
	</thead>
	<tbody>
	<tr height="20px" bgcolor="red">行
		<td>单元格</td>
	</tr>
	</tbody>
	<tfoot>
	<tr height="180px" bgcolor="red">行
		<td>单元格</td>
	</tr>
	</tfoot>
</table>

表格网页布局时，不设置border边框，只是作为网页结构的排版。

单元格宽度的和=表格宽度

MOOK :Massive Open Online Course

总结：
1尽量少的使用表格嵌套
2尽量少的使用表格跨行跨列
否则会增加代码的整体维护成本

HTML表格
基本语法与结构
带表头的表格 th
带标题的表格caption
带结构的表格 thead tbody tfoot
表格属性 border width cellpadding cellspacing bgcolor
colspan跨列属性 rowspan跨行属性

Next：
表单网页，各种表单元素的使用，属性及表单交互内容…