HTML学习（三）——表格

最新推荐文章于 2024-04-13 18:51:12 发布

交易程序猿

最新推荐文章于 2024-04-13 18:51:12 发布

阅读量612

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/codemonkeysama/article/details/51017805

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表格基本结构

<table>

...

</table>

其中，<tr> </tr>规定了表格有多少行；<th> </th>用来设定第一行的表格内容，也就是表格的标题栏位（自动加粗、居中）；<td> </td>用来设置其余行的表格内容，也就是表格的数据栏位。

这样就制作出了一个四列数行的表格。

<table></table>标记可以设置如下属性：

属性名称	设置数值	说明
border	像素	表格外边框线的宽度
cellspacing	像素	绝对设置，单元格框线的宽度（包括外边框）
	百分比	相对设置，单元格框线的宽度（包括外边框）
cellpadding	像素	绝对设置，单元格内数据与边框的距离
	百分比	相对设置，单元格内数据与边框的距离
width	像素	绝对设置，设置表格的总宽度
	百分比	相对设置，设置表格的总宽度
height	像素	绝对设置，设置表格的总高度
	百分比	相对设置，设置表格的总高度
align	left	表格往网页左边靠
	center	表格居于网页中间
	right	表格往网页右边靠
background	URL	表格的背景图片
summary	字符串	给表格的注释信息,不会显示在网页上
bordercolor	英文/十六	边框颜色
bordercolorlight	英文/十六	边框的亮色
bordercolordark	英文/十六	边框的暗色
bgcolor	英文/十六	表格的背景颜色

注意，在表格设置align属性后，表格就失去了自动换行的特性，也即如果同时有多个表格依次向下排列，在第一个表格设置align属性后，如果表格的左边或右边有足够空间，下面的表格会自动填充上来。

<table> </table>还可以设置frame和rules属性，它们都属于边框设置，其中frame属性必须要在border属性设置不为零的情况下才会其效果：

属性名称	设置值	说明
frame	void	不显示表格边线
	above	只显示表格上边线
	below	只显示表格下边线
	hsides	只显示表格上下边线
	vsides	只显示表格左右边线
	lhs	只显示表格左边线
	rhs	只显示表格右边线
	border/box	会显示表格所有边线
rules	rows	只显示横行的格框线
	cols	只显示竖列的格框线
	all	显示全部格框线
	groups
	none	不显示任何格框线

<tr></tr> <th></th> <td></td>标记的常用属性（优先级比table的标记大）：

属性名称	设定值	说明
height	像素	绝对设置，设置行高度
	百分比	相对设置，设置行高度
bgcolor	英文/十六	设置单元格或行的颜色
align (水平方向)	left	单元格内容居左
	center	单元格内容居中
	right	单元格内容居右
valign (垂直方向)	top	单元格内容居上
	middle	单元格内容居中
	bottom	单元格内容居下
nowrap (在tr中无效)	无	阻止单元格内容换行

拆分与合并单元格

这里的属性只对单元格有效，也即对<td></td>和<th></th>有效，对<tr></tr>无效：

属性名称	设定值	说明
colspan	数字	输入多少数字，代表向右合并多少单元格
rowspan	数字	输入多少数字，代表向下合并多少单元格

作业

<html>

	<head>
		<title>表格作业</title>
	</head>
	<body>
		<table border="2" width="350" cellpadding="3">
			<tr align="center"><th colspan="2">稱謂</th><th width="55">姓名</th><th width="35">年齡</th><th width="150">備註</th></tr>
			<tr align="center"><td rowspan="3" valign="middle">長輩</td><td>父</td><td>鄧飲豐</td><td align="left">58</td><td rowspan="8" valign="top"><ul><li><i>吳純純是越南來的女傭，中學畢業。</i></li><li><i>咪咪是我養的寵物。</i></li><li><i>Lucky是老爸最喜歡的伯獅丁狗。</i></li></ul></td></tr>
			<tr align="center"><td>母</td><td>吳春美</td><td align="left">55</td></tr>
			<tr align="center"><td nowrap>祖母</td><td>蔡招弟</td><td align="left">76</td></tr>
			<tr align="center"><td rowspan="2" valign="middle">同輩</td><td>兄</td><td>鄧來發</td><td align="left">27</td></tr>
			<tr align="center"><td>弟</td><td>鄧村長</td><td align="left">22</td></tr>
			<tr align="center"><td colspan="2">幫傭</td><td>吳純純</td><td align="left">22</td></tr>
			<tr align="center"><td rowspan="2" valign="middle">寵物</td><td>狗</td><td>Lucky</td><td align="left">3</td></tr>
			<tr align="center"><td>貓</td><td>咪咪</td><td align="left">2</td></tr>
		</table>
	</body>
</html>