HTML学习之表格

浏览数：28 / 时间：2015年06月09日

HTML建立表格：

§使用表格可以划分页面的布局

格式：<table>..</table>

<table>

<tr><td>表格中的一行数据</td></tr>

<tr><td>表格中的二行数据</td></tr>

<tr><td>表格中的三行数据</td></tr>

</table>

测试实例如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
	<table border="1">
		<tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>  
		<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
		<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr> 
 	</table>

</body>
</html>

<table>标签的属性：

border 设置表格边框

caption 设置表格标题

align 设置表格在网页中的布局

width 设置表格宽度

height 设置表格高度

cellspacing 设置表格各单元格之间距离

cellpadding 设置单元格内部与文本之间的间距

bordercolor 设置表格边框颜色

bordercolorlight 设置表格亮面颜色

Bordercolordark 设置表格暗面颜色

测试程序如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
	<table border="1" width="50%" height="100" bordercolorlight="#FF0000" bordercolordark="#00FF00">
	
		<tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>  
		<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr> 
	    <tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
	</table>
</body>
</html>

<tr>标签的属性： bgcolor设置背景颜色。align 设置行对齐方式。 valign 设置单元格垂直对齐方式

测试程序如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
		<table  width="400" border="1">
			<tr bgcolor="#0099FF"><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>  
			<tr align="right"><td>表格中的二行数据</td><td>表格中的二行数据</td></tr> 
	    	<tr valign="top"><td height="50">表格中的三行数据</td><td>表格中的三行数据</td></tr>
		</table>
</body>
</html

<td>和<th>标签的属性：

bgcolor 设置单元各背景颜色

rowspan 设置单元格所占行数

colspan 设置单元格所占的列数

align 设置对齐方式

valign 设置单元格垂直对齐方式

width 设置单元格宽度

height 设置单元格高度

测试程序如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
<table  width="400" border="1">
	<tr><td bgcolor="#0099FF">表格中的一行数据</td><td align="center">表格中的一行数据</td></tr>  
			<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr> 
	    	<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
	</table>
		
		
		<hr>
		<B>rowspan</B>
		
      	<table  width="400" border="1">
			<tr> <td rowspan="3">一行数据</td> <td>第一行数据</td></tr>  
			<tr>						       <td>第二行数据</td></tr> 
	    	<tr>                               <td>第三行数据</td></tr>
		</table>
		
		<hr>
		<B>colspan</B>
		
		<table  width="400" border="1">
			<tr><td colspan="2">第一行数据</td></tr>  
			<tr><td>第二行数据</td><td>第二行数据</td></tr> 
	    	<tr><td>第三行数据</td><td>第三行数据</td></tr>
		</table>
		
		<hr>
		<B>th</B>
		
		<table border="1">
			<tr><th>表格中的一行数据</th><th>表格中的一行数据</th></tr>
			<!--前者用来显示数据的名称，后者用来显示数据的内容。-->
			<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr> 
	    	<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
	</table>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML学习之表格