web前端学习（八）——HTML5中表格、边框的相关标签设置

news/2025/2/23 21:52:48

1.HTML中表格边框的相关标签

①表格由 <table> 标签来定义。

②每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

③边框属性通过 <table> 标签中的 border 属性进行设置，其中，border="0"表示无边框，border="1"默认就是带边框。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

④表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

⑤表格的标题使用 <caption> 标签进行定义。

⑥单元格边距通过 <table> 标签中的 cellpadding 属性进行设置，其中，cellpadding="0"表示无边距，cellpadding="10"就是带上了单元格边距。

⑦单元格间距通过 <table> 标签中的 cellspacing 属性进行设置，其中，cellspacing="0"表示无间距，cellspacing="10"就是带上了单元格间距。

下面我们来看10个小实例，这些实例将会运用到以上提到的所有标签及相应的属性。👇👇👇

实例一：无边框的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个无边框的表格</title>
	</head>
	
	<body>
		<h4>这个表格没有边框</h4>
		<table>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
		<hr/>
		<h4>这个表格也没有边框</h4>
		<table border="0">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例二：有边框的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例三：设置表格的水平标题和垂直标题

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>水平标题：</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<th>Sex</th>
				<th>Telephone</th>
			</tr>
			<tr>
				<td>songzihao</td>
				<td>man</td>
				<td>1234567890</td>
			</tr>
		</table>
		<hr/>
		<h4>垂直标题</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<td>songzihao</td>
			</tr>
			<tr>
				<th>Sex</th>
				<td>man</td>
			</tr>
			<tr>
				<th>Telephone</th>
				<td>1234567890</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例四：设置带标题的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<table border="1">
			<caption>Java三大特性</caption>
			<tr>
				<th>序号</th>
				<th>特性</th>
			</tr>
			<tr>
				<td>①</td>
				<td>封装</td>
			</tr>
			<tr>
				<td>②</td>
				<td>继承</td>
			</tr>
			<tr>
				<td>③</td>
				<td>多态</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例五：设置跨行或跨列的表格

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>单元格跨两列</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<th colspan="2">Telephone</th>
			</tr>
			<tr>
				<td>songzihao</td>
				<td>1234567890</td>
				<td>0987654321</td>
			</tr>
		</table>
		<hr/>
		<h4>单元格跨两行</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<td>songzihao</td>
			</tr>
			<tr>
				<th rowspan="2">Telephone</th>
				<td>1234567890</td>
			</tr>
			<tr>
				<td>0987654321</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例六：表格内添加表格或列表及列表项

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<td>
					<p>这是一个段落</p>
					<p>这是另一个段落</p>
				</td>
				<td>这个单元格包含一个表格：
					<table border="1">
						<tr>
							<td>A</td>
							<td>B</td>
						</tr>
						<tr>
							<td>C</td>
							<td>D</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>这个单元格包含一个列表
					<ul>
						<li>苹果</li>
						<li>香蕉</li>
						<li>菠萝</li>
					</ul>
				</td>
				<td>Hello world!!!</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例七：设置表格的单元格边距

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>没有单元格边距：</h4>
		<table border="1">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
		<hr/>
		<h4>有单元格边距：</h4>
		<table border="1" cellpadding="10">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例八：设置表格的单元格间距 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<h4>没有单元格间距：</h4>
		<table border="1">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
		<hr/>
		<h4>单元格间距="0"</h4>
		<table border="1" cellspacing="0">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
		<hr/>
		<h4>单元格间距="10"</h4>
		<table border="1" cellspacing="10">
			<tr>
				<td>First</td>
				<td>Row</td>
			</tr>
			<tr>
				<td>Second</td>
				<td>Row</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 

实例九：创建一个简单完整的表格（thead、tbody、tfoot） 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
		<style>
			thead {background-color: aqua;}
			tbody {background-color: chartreuse;}
			tfoot {background-color: crimson;}
		</style>
	</head>
	
	<body>
		<table border="1">
			<caption><strong>学生成绩单</strong></caption>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>成绩</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>560</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>男</td>
					<td>520</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>总分</td>
					<td colspan="2">1080</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

运行结果如下：

 

实例十：设置表格及单元格的背景（颜色、图片）

①设置表格的背景图片 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1" background="E:\计算机专业学习资料和文件\HTML\image\tx.jpg">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

②设置表格的背景颜色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1" bgcolor="#00FFFF">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

③设置单元格的的背景图片及颜色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>这是一个带边框的表格</title>
	</head>
	
	<body>
		<table border="1" bgcolor="#00FFFF">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr>
				<td bgcolor="#DC143C">row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td background="E:\计算机专业学习资料和文件\HTML\image\tx.jpg">row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

 


http://www.niftyadmin.cn/n/712376.html

相关文章

C笔记

C笔记

2019独角兽企业重金招聘Python工程师标准>>> Head first C cppcourse c part K&R C Bible##Head first C P6:如果想检查program的exit status, windows使用echo %ErrorLevel%, Linux使用echo $? (钱的问题) P9:顺序执行两条命令 gcc zork.c -o zork &&…
阅读更多...
java私有_java关键字private(私有)

java私有_java关键字private(私有)

private关键字&#xff1a;是一个权限修饰符&#xff1b;用于修饰成员(成员变量和成啊元函数)&#xff1b;被私有化的成员只能在本类中有效&#xff1b;常用之一&#xff1a;将成员变量私有化&#xff0c;对外提供对应的set&#xff0c;get方法对其进行访问。提高对数据访问的安…
阅读更多...
移动安全：BYOD时代的系统升级管理

移动安全：BYOD时代的系统升级管理

所有智能手机用户都非常熟悉系统升级过程&#xff1a;每隔一段时间&#xff0c;你的设备都会收到升级推送&#xff0c;改变用户界面或者更改控制方法。 很多人不知道的是&#xff0c;用户界面外观的变化通常也包含那些会清理安全漏洞的补丁。 在消费电子世界中&#xff0c;这并…
阅读更多...
SpringMVC interceptor拦截器

SpringMVC interceptor拦截器

这是和登录有关的拦截器 创建拦截器的实现类 重写它的3个方法 Component public class TestInterceptor implements HandlerInterceptor {第一个方法: 请求在进入Handler之前, 该方法会被调用. 如果返回true, 则表示该请求会继续往下执行, 也就是才会执行到Handler 如果返回fal…
阅读更多...
常见shell操作

常见shell操作

一、find命令详细 find命令 -- 之查找指定时间内修改过的文件 比如我们要查找linux下指定时间内做过改动的文件&#xff0c;我们可以用find命令&#xff0c;其实find命令的功能十分强大&#xff0c;下面我们通过几个简单的例子来学习下find命令的简单用法&#xff1a; find /op…
阅读更多...
python struct 用法_Python标准库笔记struct模块的使用

python struct 用法_Python标准库笔记struct模块的使用

最近在学习python网络编程这一块&#xff0c;在写简单的socket通信代码时&#xff0c;遇到了struct这个模块的使用&#xff0c;当时不太清楚这到底有和作用&#xff0c;后来查阅了相关资料大概了解了&#xff0c;在这里做一下简单的总结。了解c语言的人&#xff0c;一定会知道s…
阅读更多...
从人机大战看智能安防三大趋势

从人机大战看智能安防三大趋势

安防三大智能化趋势 在安防智能化进程中&#xff0c;实际上要解决三个问题&#xff1a;数据结构化、业务智能化、应用大数据化。总的来说就是三大智能化趋势&#xff1a;结构化的智能、业务的智能、大数据的智能。 由于安防本身业务应用的需求决定了安防人工智能市场的潜在需求…
阅读更多...
java建立二叉查找树_Java创建二叉搜索树,实现搜索,插入,删除的操作实例

java建立二叉查找树_Java创建二叉搜索树,实现搜索,插入,删除的操作实例

Java实现的二叉搜索树&#xff0c;并实现对该树的搜索&#xff0c;插入&#xff0c;删除操作(合并删除&#xff0c;复制删除)首先我们要有一个编码的思路&#xff0c;大致如下&#xff1a;1、查找&#xff1a;根据二叉搜索树的数据特点&#xff0c;我们可以根据节点的值得比较来…
阅读更多...
最新文章

Copyright @ 2022~2023