您的位置: 首页  >  文章  >  HTML基础（五）---表格标签

HTML基础（五）---表格标签

分类: 文章 • 2024-06-22 19:10:40

一、表格的应用与创建

1、表格标签的语法格式

HTML基础（五）---表格标签

        table是表格标签，tr是一行，td是一个单元格

二、tabel表格标签属性

1、table表格标签的基础属性

        第一、width属性：定义表格的宽度，宽度有两种情况：一种是精确值，比如500，不会随着浏览器的缩减或增大而改变表格大小；二种是百分比，例如50%，会随着浏览器的缩减或增大而改变表格大小

        第二、border属性：规定围绕表格的边框宽度

        第三、cellspacing属性：规定单元格之间的距离（间距）

        第四、cellpadding属性：规定单元格边沿与其内容之间的空白

2、table表格标签的其他属性

    第一、align属性：规定表格相对周围元素的对齐方式，分别有left、center、right三个值，主要针对整个表格

    第二、bgcolor属性：规定表格的背景颜色

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>表格标签</title>
</head>
<body>
	<table border="1" width="50%" cellpadding="10" cellspacing="0" align="center">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
			<td>c</td>
		</tr>
	</table>
</body>
</html>

三、Tr标签属性

1、tr标签的属性和值

       tr标签是table表格标签的行标签，下面介绍tr标签属性

      第一、align属性：定义表格行的内容水平对齐方式，分别有left、center、right三个值，主要针对表格内容

      第二、valign属性：规定表格行中内容的垂直对齐方式，分别有top（顶端）、middle（居中）、bottom（底端）、baseline（基线，针对大小不同的字体统一于底部进行对齐），主要针对表格内容

      第三、width属性：规定表格单元格的宽度

      第四、height属性：规定表格单元格的高度

      第五、colspan属性：规定单元格可横跨的列数

      第六、rowspan属性：规定单元格可横跨的行数

四、td标签属性

1、td标签的属性和值

      第一、width规定表格单元格的宽度

      第二、height规定表格单元格的高度

      第三、colspan规定单元格可横跨的列数

      第四、rowspan规定单元格可横跨的行数

<!DOCTYPE html>
<html>
<head>
	<title>表格标签其他属性</title>
</head>
<body>
	<!-- table标签属性 -->
	<table border="1" cellpadding="0" cellspacing="0" width="500" align="center" bgcolor="#CCC">	
		<!-- tr标签属性 -->
		<tr align="center" valign="top" height="40" bgcolor="green">
			<!-- td标签属性 -->
			<td width="300" bgcolor="red">1</td>
			<td height="100">2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>A</td>
			<td>B</td>
			<!-- 在表格中插入图片 -->
			<td><img src="img_01.jpg"></td>
		</tr>
		<tr>
			<!-- 列合并 -->
			<td colspan="2">a</td>
			<!-- 行合并 -->
			<td rowspan="2">c</td>
		</tr>
		<tr>
			<td>s</td>
			<td>d</td>
		</tr>
	</table>
</body>
</html>

五、细线表格的做法

    普通表格与细线表格

HTML基础（五）---表格标签

因为在table中的边框设置为1时，单元格的左右两边都有间距，所以最少都是两个像素，显示出来就不是细线表格边框，而细线表格边框是一像素的，下面介绍细线表格一像素做法

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>一般表格与细线表格</title>
</head>
<body>
	<div><h3>以下是一般表格</h3></div>
	<div>
		<table border="1" width="500" cellspacing="0">
			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
			</tr>
		</table>
	</div>
	<div><h3>以下是细线表格</h3></div>
	<div>
		<!--细线边框做法: 
			给定tabel背景为黑色并将间隔像素设置为1，然后每个tr再把背景设置为白色 -->
		<table width="500" bgcolor="#333" cellspacing="1">
			<tr bgcolor="#fff">
				<!-- 在做内容时一定要加宽度，保证每个单元格宽度一致 -->
				<td width="100">1</td>
				<td width="100">2</td>
				<td width="100">3</td>
			</tr>
		</table>
	</div>
</body>
</html>

HTML基础（五）---表格标签

六、表格的其他标签

1、表格的其他标签

       第一、<th> 标签定义 HTML 表格中的表头单元格，就是表头，相当于标题的作用

       第二、<caption> 标签定义表格的标题，并不包含在表格当中

       第三、<thead> 标签用于组合 HTML 表格的表头内容

       第四、<tbody> 标签用于组合 HTML 表格的主体内容

       第五、<tfoot> 标签用于组合 HTML 表格的页脚内容

       书写内容是先写thead在写tfoot在写tbody，显示时会划分区域，最上方是thead、往下依次是tbody和tfoot，不会根据html代码中的thead、tbody、tfoot的顺序来绝对显示顺序

       如果需要进行复杂的表格搭建，可以在table当中嵌套table

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
<head>
	<title>其他标签</title>
</head>
<body>
	<table border="1" width="500">
		<!-- thead用于组合 HTML 表格的表头内容 -->
		<thead>
			<!-- 以下是表格的标题 -->
			<caption>课程表</caption>
			<tr>
				<!-- 以下是单元格表头，相当于列标题 -->
				<th>head-1</th>
				<th>head-2</th>
				<th>head-3</th>
				<th>head-4</th>
				<th>head-5</th>
			</tr>
		</thead>
		<!-- tfoot用于组合 HTML 表格的页脚内容 -->
		<tfoot>
			<tr>
				<td>tfoot-1</td>
				<td>tfoot-2</td>
				<td>tfoot-3</td>
				<td>tfoot-4</td>
				<td>tfoot-5</td>
			</tr>
		</tfoot>
		<!-- tbody用于组合 HTML 表格的主体内容 -->
		<tbody>
			<tr>
				<td>tbody-1</td>
				<td>tbody-2</td>
				<td>tbody-3</td>
				<td>tbody-4</td>
				<td>tbody-5</td>
			</tr>
			<tr>
				<td>tbody-6</td>
				<td>tbody-7</td>
				<td>tbody-8</td>
				<td>tbody-9</td>
				<td>tbody-10</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

HTML基础（五）---表格标签

 七、利用表格标签制作购物图标表格（类似京东）

   利用表格标签制作购物图标表格，点击表格内图片，可以打开对应的商品页面，以下是效果图：

HTML基础（五）---表格标签

 以下是html代码：

<!DOCTYPE html>
<html>
<head>
	<title>京东排版</title>
</head>
<body>
	<!-- 京东表格排版 -->
	<table border="0" cellspacing="1" cellpadding="0" bgcolor="#aaa" width="600" align="center">
		<!-- 标题 -->
		<tr bgcolor="#fff" height="240">
			<!-- 表格商品1 -->
			<td colspan="2"><a href="https://item.jd.com/7408023.html" target="_blank"><img src="images/tu1.jpg" /></a></td>
			<!-- 表格商品2 -->
			<td><a href="https://item.jd.com/32782291733.html" target="_blank"><img src="images/tu2.jpg" /></a></td>
		</tr>
		<tr bgcolor="#fff" height="150">
			<!-- 表格商品3 -->
			<td><a href="https://item.jd.com/32837978346.html" target="_blank"><img src="images/tu3.jpg" /></a></td>
			<!-- 表格商品4 -->
			<td><a href="https://item.jd.com/18013636497.html" target="_blank"><img src="images/tu4.jpg" /></a></td>
			<!-- 表格商品5 -->
			<td><a href="https://item.jd.com/5066434.html" target="_blank"><img src="images/tu5.jpg" /></a></td>
		</tr>
	</table>
</body>
</html>

 

相关推荐