首页 > 代码库 > HTML学习之表格

HTML学习之表格

2024-07-21 21:09:13   214人阅读

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学习之表格


联系
我们