HTML学习笔记（三）

最新推荐文章于 2022-03-01 15:00:55 发布

neoxuhaotian

最新推荐文章于 2022-03-01 15:00:55 发布

阅读量1.8k

点赞数

分类专栏： html/css/javascript 文章标签： html border table 数据库

本文链接：https://blog.csdn.net/neoxuhaotian/article/details/6596280

版权

html/css/javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

七表格的应用

1，

表格常用元素标签及说明
标签	说明
<table>	表格标记
<tr>	行标记
<td>	列标记
<th>	表头标记
<caption>	表格标记

实例代码：

<html>
<head>
	<title>表格的定义</title>
</head>
<body>
	<table width="500" border="1">
		<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		</tr>
		<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		</tr>
</body>
</html>

2，插入表格<table>

基本语法：

<table>

<tr>

</tr>

</table>

<table>表示插入表格

<tr>表示插入一行

<td>表示插入一列

3，设置表格标题<caption>

基本语法：

<table>
	<caption>插入表格标题</caption>
	<tr>
	</tr>
	<tr>
	<td></td>
	</tr>
</table>

在HTML文件中，使用成对的<caption></caption>标记给表格插入标题。

该标记应用于<table>标记与<tr>标记之间的任何位置

实例代码：

<html>
<head>
	<title>插入表格标题</title>
</head>
<body>
	<table width="500" border="1" align="center">
		<caption>计算机相关信息</caption>
		<tr>
		<td>dreamweaver</td>
		<td>access</td>
		<td>c++</td>
		</tr>
	</table>
</body>
</html>

4，设置表格表头<th>

表格表头使用的事粗体样式显示，默认对齐方式是居中对齐

基本语法：

<table>

<tr>

</tr>

</table>

在HTML文件中，要将某一行作为表格文件的表头，只要将该行包含的列标记<td>改为<th>即可

<html>
<head>
	<title>设置表格表头</title>
</head>
<body>
	<table width="500" border="1" align="center">
	<tr>
	<th>网页设计</th>
	<th>数据库开发</th>
	<th>程序设计</th>
	</tr>
	<tr>
	<td>dreamweaver</td>
	<td>access</td>
	<td>c++ 	</td>
	</tr>
	</table>
</body>
</html>

5，设置划分结构表格<thead><tbody><tfoot>

所谓划分结构表格，指将一个表格分成三部分在网页上显示，分别使用<thead></thead>，<tbody></tbody>，<tfoot></tfoot>

基本语法：

<thead></thead>表示定义一组表头行

<tbody></tbody>表示定义表格主体部分

<tfoot></tfoot>表示为表格添加一个标注

实例代码：

<html>
<head>
	<title>设置划分表格结构</title>
</head>
<body>
	<table width="500" border="1" align="center">
		<thead>
			<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			</tr>
		</thead>
		<tbody>
			<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			</tr>
		</tfoot>
	<table>
</body>
</html>

6，设置表格的宽度和高度width和height

基本语法：

<table width="" height="">
	<tr>
	<td></td>
	</tr>
</table>

width用于设置表格的宽度，height属性用于设置表格的高度

实例代码：

<html>
<head>
	<title>设置表格的宽度和高度</title>
</head>
<body>
	<table width="500" height="40" border="1">
		<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		</tr>
	</table>
</body>
</html>

7设置表格的边框属性border

表格中的属性在单元格中也适用

表格边框属性
属性名称	说明
border	边框粗细
bordercolor	边框颜色
bordercolorlight	亮边框颜色
bordercolordark	暗边框颜色

基本语法：

<table border="" bordercolor="">
	<tr>
	<td></td>
	</tr>
</table>

实例代码：

<html>
<head>
	<title>设置表格边框属性</title>
</head>
<body>
	<table width="500" height="40" border="1" bordercolor="blue">
		<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		</tr>
	</table>
</body>
</html>

8，设置表格边框样式frame , rules

利用frame属性可以设置表格边框的样式

利用rules属性可以设置表格内部边框属性

frame常见属性
属性值	说明
above	显示上边框
border	显示上下左右边框
below	显示下边框
hsides	显示上下边框
lhs	显示左边框
rhs	显示右边框
void	不显示边框
vsides	显示左右边框

rules常见属性
属性值	说明
all	显示所有内部边框
groups	显示介于行列边框
none	不显示内部边框
cols	仅显示列边框
rows	仅显示行边框

基本语法：

<table frame="" rules="">
	<tr>
	<td></td>
	</tr>
</table>

9，设置表格背景bgcolor

在HTML文件中，表格的默认背景为白色，table中的bgcolor属性可以设置表格的背景颜色

基本语法：

<table bgcolor="">
	<tr>
	<td></td>
	</tr>
</table>

10，调整行内容水平对齐aiign

在网页文件中，行内容的方式有左对齐（left），右对齐（right），和居中对齐（center）。设置水平对齐方式需要<tr>标记的align属性值。常用的align属性值有left，right，center

基本语法：

<table>
	<tr align="">
	</tr>
</table>

11，调整行内容垂直对齐valign

在网页文件中，行内容的垂直对齐方式有顶端对齐（top），居中对齐（middle），底部对齐（bottom）和基线（baseline）。设置垂直对齐方式需要设置<tr>标记的valign属性值。常用的valign属性值有top，middle，bottom和baseline。

基本语法：

<table>
	<tr valign="">
	</tr>
</table>

12，设置跨行rowspan

在网页制作过程中，有时需要对网页中的表格进行单元格的纵向合并，这在网页中叫做设置跨行

基本语法：

<table>	
	<tr>
	<td rowspan="2"></td>
	</tr>
</table>

13，设置跨列colspan

在网页制作过程中，有时需要对网页中的表格进行单元格的横向合并，这在网页中叫做设置跨列

基本语法：

<table>	
	<tr>
	<td colspan="2"></td>
	</tr>
</table>

14，设置单元格间距cellspacing

在网页文件中，使用表格进行排版时，为了布局的美观，常常需要对单元格的间隔进行设置，这样可以使网页中的表格显得不是过于紧凑。

基本语法：

<table cellspacing="">
	<tr>
	<td></td>
	</tr>
</table>

实例代码：

<html>
<head>
	<title>设置单元格间距</title>
</head>
<body>
	<table width="500" border="1" cellspacing="0">
		<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		</tr>
	</table>
	<table width="500" border="1" cellspacing="5">
		<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		</tr>
	</table>
</body>
</html>

15，设置单元格边距cellpadding

在网页文件中，单元格的边距指的是单元格中内容与单元格边框的距离

基本语法：

<table cellpadding="">
	<tr>
	</tr>
</table>

16，表格嵌套

在单元格中插入表格叫做嵌套表格

实例代码：

<html>
<head>
	<title>表格嵌套</title>
</head>
<body>
	<table width="500" border="1" align="center">
		<tr>
		<td width="170"> </td>
		<td width="157"> </td>
		<td width="121"> </td>
		</tr>
		<tr>
		<td>
			<table width="100%" border="1">
				<tr>
				<td> </td>
				</tr>
				<tr>
				<td>导航列表</td>
				</tr>
				<tr>
				<td> </td>
				</tr>
			</table>
		</td>
		<td rowspan="2"> </td>		
		</tr>
		<tr>
		<td> </td>
		</tr>
	</table>
</body>
</html>