HTML学习笔记之表格的使用

最新推荐文章于 2021-12-16 17:52:05 发布

SAP 皮德憨

最新推荐文章于 2021-12-16 17:52:05 发布

阅读量1.1k

点赞数 1

文章标签：博客 html

本文链接：https://blog.csdn.net/Liuchang54/article/details/49228943

版权

HTML学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.建立表格

主要用到四个标签：<table>,<tr>,<th>,<td>。

其中<table>和</table>标签为表格标签，主要用来定义一个表格元素；

<tr>和</tr>标签为表行标签，用来定义表格的一行；

<th>和</th>标签为表头标签,用来定义表格内的表头单元格，在表头单元格内的文字将以粗体的方式显示，当然表格并不一定都有表头；

<td>和</td>标签为单元格标签，用于定义表格的单元格。一对<td>和</td>标签将建立一个单元格,当然<td>和</td>标签必须放在<tr>和</tr>标签内。其语法格式为：

<table>
	<tr>
		<td>(<th>)第一行第一列单元格内容</td>(</th>)	
		<td>(<th>)第一行第二列单元格内容</td>(</th>)	
		······
		<td>(<th>)第一行第n列单元格内容</td>(</th>)	
	</tr>
	<tr>
		<td>第二行第一列单元格内容</td>
		<td>第二行第二列单元格内容</td>
		······
		<td>第二行第n列单元格内容</td>
	</tr>
	······
	<tr>
		<td>第m行第一列单元格内容</td>
		<td>第m行第二列单元格内容</td>
		······
		<td>第m行第n列单元格内容</td>
	</tr>
</table>

二.表格修饰

1.<table>标签有很多属性，主要有border,width,height,align,bgcolor,background,cellspacing,cellpadding等，这些属性有默认值

border属性设置边框尺寸,语法格式:<table border=数值> .border属性的值是数字，表示表格边框宽度所占的像素数。

width/height属性设置表格尺寸，语法格式:<table width=数值 height=数值>;width属性用于设置表格宽度，height属性用于设置表格高度，参数值可以是数字也可是百分比。

bgcolor属性用来设置表格的背景颜色，语法格式:<table bgcolor=#xxx>。

background属性用来设置表格的背景图像，语法格式:<table background=URL>.

cellspacing属性用来设置表格的间距，其语法格式如下:<table cellspacing=数值>;间距指的是表格单元格与格之间的距离。该属性的参数值取像素值，默认值为2。

cellpadding属性用来设置表格的边距，其语法格式如下:<table cellpadding=数值>;边距指的是表格单元格的内容与单元格边界之间空白距离的大小。该属性值的参数值取像素值。

align属性用来设置表格的位置,其语法格式如下:<table align=参数值>;align属性的参数值为left、center、right之一，分别表示位于其相邻文字的左侧，表格水平居中和表格位于与其相邻文字的右侧。

很多表格都有标题，用来提示表格的主题。表格标题使用专门的标签<caption>。它是双标签，语法格式如下：<caption align=参数值 valign=参数值>表格标题</caption>

align属性的参数值为left、center、right之一。它们分别表示表格的标题与表格的左边沿线对齐、位于表格中间还是与表格右边沿线对齐。该属性的默认方式是表格标题位于表格中间。

valign属性的参数值为top和bottom之一。它们分别表示表格标题位于表格的上方和下方。默认是表格标题位于表格的上方。

<caption>应放在<table>标签里面，在表格的行标签<tr>之前。

2.<tr>标签也有很多属性：height,align,valign,bordercolor,bgcolor等。

height属性主要用来设置表格内某行的高度，其语法格式如下：<tr height=数值>，数值为整数，其单位为像素。

align属性主要用来设置表格中该行单元格内文字上的水平对齐方式，其语法格式如下：<tr align=参数值>，其中参数值为left.center,right之一，分别表示该行中各单元格的内容是左对齐，水平居中还是右对齐的，align属性的默认方式为left；

valign属性主要用来设置表格中该行单元格内文字的垂直方向的对齐方式，其语法格式如下：<tr valign=参数值>，其中参数值为top，middle，bottom之一，分别表示该行中各单元格的内容是上对齐、垂直居中，还是下对齐的。默认为middle。

bordercolor属性用来设置表格中某行内边框的颜色，其语法格式如下：<tr bordercolor=# >，其中“#”取值为十六进制的颜色代码。

bgcolor属性用来设置表格中该行单元格的背景颜色，其语法格式如下：<tr bgcolor=#>，其中“#”取值为十六进制的颜色代码

3.<td>、<th>属性也有很多,主要是width,align,valign,bordercolor,bgcolor,background,colspan,rowspan等。

width属性用来设置表格中某单元格的宽度，其语法格式如下：<td width=数值>或<th width=数值>,此属性的参数值可以是数字或百分数。其中，数字表示此单元格的宽度所占的像素数；百分数表示此单元格的宽度占整个表格宽度的百分比。

align属性用来设置表格中某单元格内文字的水平对齐方式，其语法格式如下：<td align=参数值>或<th align=参数值>，参数值为left，center，right。

valign属性的参数表格中某单元格内文字的垂直方向的对齐方式，其语法格式如下：<td valign=参数值>或<th valign=参数值>，参数值为top,middle,bottom。

bordercolor属性用来设置表格内某单元格的边框颜色，其语法格式如下:<td bordercolor=#>或<th bordercolor=#>，其中，"#"取值为十六进制的颜色代码。

bgcolor属性用来设置表格中某单元格的背景颜色，其语法格式如下:<td bgcolor=#>或<th bgcolor=#>，其中，"#"取值为十六进制的颜色代码。

background属性用来设置表格中某单元格的背景图像，其语法格式如下:<td background=URL>或<th background=URL>。

rowspan属性用来设置表格中某单元格所跨的行数，其语法格式如下:<td rowspan=数值>或<th rowspan=数值>,默认值为1。

colspan属性用来设置表格中某单元格所跨的列数，其语法格式如下:<td colspan=数值>或<th colspan=数值>,默认值为1。

练习示例：

(1)

<html>
	<head>
		<title>无标题文档</title>
	</head>
	<body>
		<table width="390" border="1" cellpadding="0" cellspacing="0" align="center">
			<caption>联系表</caption>
			<tr bgcolor="#CCFF66">
				<th width="25">姓名</th>
				<td width="78"></td>
				<th width="25">性别</th>
				<td	width="78"></td>
				<th width="67">出生年月</th>
				<td width="117"></td>
			</tr>
			<tr bgcolor="#FFFF99">
				<th width="25">住址</th>
				<td colspan="5"></td>
			</tr>
			<tr	bgcolor="#CCFF66">
				<th>籍贯</th>
				<td></td>
				<th>专业</th>
				<td></td>
				<th>联系电话</th>
				<td></td>
			</tr>
		</table>
	</body>
</html>

运行结果：

(2)

<html>
	<head>
		<title>表格</title>
	</head>
	<body>
		<table width="300" height="100" border="1" bordercolor="red" cellpadding="0" cellspacing="0">
			<tr valign="top" height="33.3%">
				<th rowspan=3>表头一</th>
				<th>表头二</th>
				<th>表头三</th>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

运行结果：