HTML 表格

最新推荐文章于 2022-05-19 15:12:37 发布
最新推荐文章于 2022-05-19 15:12:37 发布
阅读量185 收藏
点赞数
分类专栏： HTML 文章标签： HTML 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80168132
版权

HTML 表格

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

表格实例

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<table border="1">
			<tr>
				<td>row 1, col 1</td>
				<td>row 1, col 2</td>
			</tr>
			<tr>
				<td>row 2, col 1</td>
				<td>row 2, col 2</td>
			</tr>
		</table>
	</body>
</html>

   在浏览器显示如下：

HTML 表格和边框属性

    如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

    使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头

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

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<table border="1">
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
			</tr>
			<tr >
				<td >row 1, col 1</td>
				<td >row 1, col 2</td>
			</tr>
			<tr>
				<td>row 2, col 1</td>
				<td>row 2, col 2</td>
			</tr>
		</table>
	</body>
</html>

  在浏览器显示如下：

 

没有边框的表格

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</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>
		<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>

 

表格中的表头(Heading)

 

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<h4>水平标题：</h4>
		<table border="1">
			<tr>
				<th>Name</th>
				<th>Telephone</th>
				<th>Telephone</th>
			</tr>
			<tr >
				<td>Bill Gates</td>
				<td>555 77 854</td>
				<td>555 77 854</td>
			</tr>
			<tr>
				<td>li ming</td>
				<td>336 98 521</td>
				<td>336 98 521</td>
			</tr>
		</table>
		<h4>垂直标题：</h4>
		<table border="1">
			<tr >
				<th>First Name：</th>
				<td>Bill Gtates</td>
			</tr>
			<tr>
				<th>Telephon</th>
				<td>555 77 854</td>
			</tr>
			<tr>
				<th>Telephon</th>
				<td>555 77 854</td>
			</tr>
		</table>
	</body>
</html>

带有标题的表格

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<table border="1">
			<caption>Monthly savings</caption>
			<tr>
				<th>Month</th>
				<th>Savings</th>
			</tr>
			<tr >
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>February</td>
				<td>$50</td>
			</tr>
		</table>
	
	</body>
</html>

跨行或跨列的表格单元格

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<h4>单元格跨两格</h4>
		<table border="1">
			<tr>
				<th>Month</th>
				<th colspan="2">Telephone</th>
			</tr>
			<tr >
				<td>Bill Gates</td>
				<td>285 999 582</td>
				<td>285 999 582</td>
			</tr>
		</table>
		
		<h4>单元格跨两列</h4>
		<table border="1">
			<tr>
				<th>First Name:</th>
				<td>Bill Gates</td>
			</tr>
			<tr>
				<th rowspan=2>Telephone:</th>
				<td>555 77 854</td>
			</tr>
			<tr>
				<td>555 77 854</td>
			</tr>
		</table>
	</body>
</html>

表格内的标签

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</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>apples</li>
						<li>banans</li>
						<li>pineaples</li>
					</ul>
				</td>
				<td>HTLLO</td>
			</tr>
		</table>
	</body>
</html>

单元格边距(Cell padding）

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</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>
		
		<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>

单元格间距(Cell spacing）

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</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>
		
		<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>
		
		<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>

 

HTML表格标签

 

 

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

 

参考：

https://www.yuque.com/docs/share/1585d5d3-b029-4a17-bbe7-d5eeee35fd48

冷月醉雪
关注
专栏目录
HTML表格--table
CSDN
02-26 223
table thead  标题 tr  行 th  表头 td  列 cellspacing 单元格和单元格之间的距离 cellpadding 单元格内内容和边框的距离 text-align:  文本对齐方式  style="border-collapse:collapse  专门用于做表格细线边框 &lt;!DOCTYPE html&gt; &lt;html lang="en"...
HTML表格
时光的博客
06-01 169
1、表格由 &lt;table&gt; 标签来定义。2、每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。3、字母 td 指表格数据（table data），即数据单元格的内容。4、数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。注意：表格的表头使用 &lt;th&gt; 标签进行定义。大多数浏览器会把表头显示...
HTML学习笔记（三）
CSPsy的博客
08-01 826
文章目录1. 表格2. 对文字4. 链接标签 <a> 1. 表格 什么是表格 ？ 表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。 它常见被用来显示、展示表格式数据。 创建表格 每个表格由一个 <table> 标签开始。 每个表格行由 <tr> 标签开始。 每个表格数据由 <td> 标签开始。 <!DOCTYPE html> <html> <h
HTML——表格
有1%的念头，就要用120%的努力去实现
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
HTML table 标签合并的方法，先合并再删除
dxm809的博客
10-28 1898
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;table
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
首先，我们要了解默认情况下，HTML表格会根据其内容自适应地调整宽度和高度。然而，为了更好地控制表格的布局和视觉效果，我们可以使用`WIDTH`和`HEIGHT`属性来手动设定表格尺寸。这两个属性允许你为表格指定一个...
表格生成器 Html表格生成器 v1.0
11-10
《Html表格生成器 v1.0：打造个性化数据展示的新利器》 在信息化时代，数据的展示和交流已经成为日常工作中不可或缺的一部分。而HTML表格作为网页中最常见、最实用的数据展示工具，其灵活性和广泛性不言而喻。然而...
table_go:简单、灵活、快速的 html 表格生成器
06-08
简单、灵活、快速的 html 表格生成器 安装 将此行添加到应用程序的 Gemfile 中： gem 'table_go' 然后执行： $ bundle 或者自己安装： $ gem install table_go 用法 HAML 中的示例（或更多此处： : ） = ...
实验三-HTML表格与HTML表单.doc
07-15
HTML 表格与 HTML 表单 HTML 表格是 HTML 中的一种基本结构元素，用于组织和显示数据。HTML 表格由多个表格单元格组成，每个单元格可以包含文本、图像、表单元素等内容。HTML 表格的基本结构由 `<table>` 标记定义...
web前端学习（八）——HTML5中表格、边框的相关标签设置
★★光亭★★
12-24 2万+
web前端学习（八）——HTML5中表格、边框的相关标签设置
前端系列之HTML（表格）
热门推荐
十二指环的博客
01-18 5万+
了解表格应用场景表格基本结构如何操作表格？添加、删除行与列表格属性<caption></caption>定义表格的标题表格跨行跨列表格嵌套案例：表格网页布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格布局</title> </head> <body> <table width="100
05网页前端HTML——表格标签
lemon_wsm的博客
07-31 559
一表格标签： 标签 说明 &lt;table&gt; 表格标签 &lt;tr&gt; 行标记 &lt;td&gt; 单元格标记 &lt;th&gt; 表头标记 属性标签： 属性名 说明 width 设置表格宽度 heigth 设置表格高度 bordercolor 设置表格边框颜色 bgcolor 背...
html设置表头格式
行善之人必有余庆
05-19 7200
设置表头格式 c管理表 物品名 类型 领取人 领取人所属部门 数量 圆珠笔 文具 李丽 PHP 1
HTML 去除表格单元格边框间隙
HXZ
02-28 5856
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <table border="1" > <tr> <th>NAME</th> <th>AGE</th...
Excel学习之VBA（一）
冷月画心的博客
11-22 2059
1.如何将【开发工具】选项卡添加到Excel页面     默认情况下，因为大多数人并不经常用到【开发工具】选项卡，所以微软将其隐藏了起来，打开方式如下：     1.1.office2010及其以上版本：           （1）.【文件】===》【选项】===》【自定义功能区】===》【主选项卡】===》在功能区的“复选                                  ...
HTML编译器
冷月醉雪的博客
04-27 7219
HTML 编辑器推荐   Notepad++：https://notepad-plus-plus.org/ Sublime Text：http://www.sublimetext.com/ HBuilder：http://www.dcloud.io/   Notepad++     Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文...
HTML URL 编码
冷月醉雪的博客
05-10 6046
URL 编码参考手册 ASCII 字符 URL-编码 space %20 ! %21 " %22 # %23 $ %24 % %25 &amp; %26 ' %27 ( %28 ) %29 * %2A + %2B , %2C - %2D . ...
html表格
最新发布
05-27
HTML表格是一种用于展示数据的标准化格式，可以使用HTML的<table>、<tr>、<td>等标签来创建表格。 以下是一个简单的HTML表格示例： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table> ``` 在上面的示例中，<table>标签定义了一个表格，<tr>标签定义了表格中的行，<td>标签定义了行中的单元格，<th>标签定义了表头单元格。通过使用这些标签，可以创建出一个包含多行和多列的表格。 HTML表格还支持合并单元格、添加边框、设置单元格宽度等操作，可以根据需要进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值