HTML网页设计：七、表格

最新推荐文章于 2024-09-29 23:49:31 发布
最新推荐文章于 2024-09-29 23:49:31 发布
阅读量2w 收藏 266
点赞数 52
分类专栏： HTML 文章标签： html 网页设计 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xfjssaw/article/details/115188686
版权

表格

HTML系列文章目录

  1. HTML网页设计：一、HTML的基本结构
  2. HTML网页设计：二、网页的基本标签
  3. HTML网页设计：三、图像标签之＜img＞标签
  4. HTML网页设计：四、超链接
  5. HTML网页设计：五、行内元素和块元素
  6. HTML网页设计：六、列表
  7. HTML网页设计：七、表格
  8. HTML网页设计：八、媒体元素
  9. HTML网页设计：九、网页的简单布局
  10. HTML网页设计：十、iframe内联框架
  11. HTML网页设计：十一、表单

文章目录

1.表格的定义

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

其定义格式如下：

	<table>
		<tr>
			<td>第一行第一列</td>
			<td>第一行第二列</td>
		</tr>
		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr>
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>

网页显示如下：
在这里插入图片描述

1.表格的常用属性

（1）border属性：表格和边框属性，如果不定义边框属性，表格将不显示边框。

代码示例如下：

	<table border="1px">
		<tr>
			<td>第一行第一列</td>
			<td>第一行第二列</td>
		</tr>
		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr>
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>

网页显示如下：
在这里插入图片描述
（2）cellspacing属性：规定单元格之间的空间。

一个具有标题和表头，取消单元格之间间距的表格代码示例如下：

	<table border="1px" cellspacing="0">
		<caption>一个表格</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>

网页显示如下：
在这里插入图片描述

（3）cellpadding属性：规定单元边沿与其内容之间的空白。

代码示例如下：

	<table border="1px" cellspacing="0" cellpadding="10">
		<tr>
			<td>第一行第一列</td>
			<td>第一行第二列</td>
		</tr>
		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr>
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>

网页显示如下：
在这里插入图片描述

（4）bgcolor属性：向表格或表格单元添加背景颜色。
（5）background属性：向表格或表格单元添加背景图像。
（6）align属性：规定表格或单元格中内容的水平对齐方式。属性值可以取left左对齐、right右对齐、center居中对齐这三种。

align属性练习代码示例：

	<table border="1px" cellspacing="0" width="500px" align="center">
		<tr>
			<td align="right">第一行第一列</td>
			<td align="right">第一行第二列</td>
		</tr>
		<tr align="center">
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr align="left">
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>

网页显示如下：
在这里插入图片描述

3.跨行、跨列单元格

表格中的跨列单元格使用colspan属性，跨行单元格使用rowspan属性。

代码示例如下：

	<table border="1" cellspacing="0" width="400px">
		<caption>课程表</caption>
		<tr>
			<th rowspan="2">时间\星期</th>
			<th colspan="5">星期</th>
		</tr>
		<tr>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
		</tr>
		<tr>
			<th rowspan="2">上午</th>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
		</tr>
		<tr>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
		</tr>
		<tr>
			<th rowspan="2">下午</th>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
		</tr>
		
	</table>

网页显示如图：
在这里插入图片描述
所有代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格学习</title>
</head>
<body>
<!--	不带边框的表格-->
	<table>
		<tr>
			<td>第一行第一列</td>
			<td>第一行第二列</td>
		</tr>
		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr>
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>
	<br/>
<!--	带边框的表格-->
	<table border="1px">
		<tr>
			<td>第一行第一列</td>
			<td>第一行第二列</td>
		</tr>
		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr>
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>
	<br/>
<!--取消单元格间距	带边框的表格 带标题和表头-->
	<table border="1px" cellspacing="0" >
		<caption>一个表格</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>
	<br/>
<!--	规定单元边沿与其内容之间的间距为10-->
	<table border="1px" cellspacing="0" cellpadding="10">
		<tr>
			<td>第一行第一列</td>
			<td>第一行第二列</td>
		</tr>
		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr>
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>	
	<br/>
<!--	align属性练习-->
	<table border="1px" cellspacing="0" width="500px" align="center">
		<tr>
			<td align="right">第一行第一列</td>
			<td align="right">第一行第二列</td>
		</tr>
		<tr align="center">
			<td>第二行第一列</td>
			<td>第二行第二列</td>
		</tr>
		<tr align="left">
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</table>	
	<br/>
<!--	跨行列练习-->
	<table border="1" cellspacing="0" width="400px">
		<caption>课程表</caption>
		<tr>
			<th rowspan="2">时间\星期</th>
			<th colspan="5">星期</th>
		</tr>
		<tr>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
		</tr>
		<tr>
			<th rowspan="2">上午</th>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
		</tr>
		<tr>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
			<td>语文</td>
		</tr>
		<tr>
			<th rowspan="2">下午</th>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
		</tr>
		
	</table>
</body>
</html>
嵩華想睡觉
关注
专栏目录
第十讲 利用表格规划网页的布局
叫你不要乱扔东西
03-05 5373
我们在设计一个图文混排的网页或分栏的文字网页时，常常会感到文字及图片的定位不听使唤。利用表格的帮助，可以将它们按我们的需要放到任何位置。　　利用表格组织网页的内容，可以使网页更整洁美观。对于图文混排的网页，利用表格可以大大提高网页制作的效率。在隐藏表格框线后，浏览者几乎感受不到表格的存在。实际上FrontPage提供的各网页模板，就是用表格来组织的。一、几种典型的网页布局　　如果希望自己制作的网页
网页设计‘表格’
qq_45080888的博客
08-17 138
网页设计‘表格’
WEB前端网页设计-Bootstrap5 表格
君逍遥o
04-30 2046
WEB前端网页设计-Bootstrap5 表格
HTML常用标签--列表，表格，表单
最新发布
2301_82005922的博客
09-29 807
上一次我们大概了解了编写网页元素的一部分标签，现在让我们来熟悉一些另外的一些常用标签吧！
《网页设计基础——表格与表单》
Dustpolaris的博客
12-04 1769
一、表格的基础框架； 二、表格的常用样式； 三、表单的基础框架； 四、表单的常用样式；
【网页设计】在网页中绘制表格（HTML）
○( ＾皿＾)っHiahiahia…的博客
07-17 5906
在网页中制作一个表格的知识点： th:table head tr:table row td:table data单元格 表格制作简单尝试： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head&...
网页设计简单表格
m0_46569088的博客
12-13 428
表格 代码： <tr> <td>星期</td> <td>星期一</td> <td>星期一</td> <td>星期一</td> <td>星期一</td> <td>星期一</td> <td>星期一</td> <td>星期一</td> </tr> <tr> <td rowspan="
Web网页设计·HTML篇（6）·表格
s1316339343的博客
04-11 1778
这章我们学习表格，日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行统计为此、HTML语言提供了一系列的表格标签，本节将对这些标签进行详细的讲解。
网页表格制作
12-22
利用网页脚本对输入内容进行按拼音首字母的排序
HTML设计表格
zxh996的博客
07-02 1711
HTML设计表格前言一、HTML中表格元素的认识二、表格案例1.案例代码及效果图2.案例代码分析总结 前言 前端的学习中HTML中的表格相信大家也了解了，这是一块简单而又易乱的知识点，所以我为大家简单的梳理了一下知识点，仅供参考学习。 一、HTML中表格元素的认识 二、表格案例 1.案例代码及效果图 代码如下（示例）： <table border="1"> <caption>我的课表</caption> <thead> <t
网页设计：如何设计细线条的表格.pdf
10-07
网页设计中的表格是一种重要的布局工具，特别是在展示数据和组织信息时。然而，设计细线条的表格可以提升网页的视觉效果，使其看起来更加精致和专业。本文将深入探讨三种设计细线条表格的方法，以及它们的优缺点和...
HTML表格标记教程(1):制作表格
09-28
HTML表格是网页设计中不可或缺的一部分，它允许我们将数据有组织地呈现给用户。在这个HTML表格标记教程中，我们将深入理解如何使用基本的HTML表格元素来创建和格式化表格。 首先，我们要了解构成HTML表格的三个核心...
程序员学习前端基础教程网页设计用好HTML表格标记及属性
01-08
表格是HTML的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。 　常用表格标记 … 表格指令 。 相关属性 :  · ALIGN 调整  · ...
【网页前端设计HTML】表格
weixin_53597021的博客
07-14 1650
表格的主要作用表格的基本语法⭐表格的主要作用表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。总结：表格不是用来布局页面的,而是用来展示数据的。如图所示：⭐表格的基本语法。
HTML网页设计：六、列表
热门推荐
xfjssaw的博客
03-23 1万+
列表         列表分为两种类型，有序列表和无序列表。有序列表使用编号来记录项目的顺序，无序列表用项目符号来标记列表项。 列表的主要标签如下表： 标签 描述 <ol> 有序列表 <ul> 无序列表 <dl> 自定义列表 <dt> 自定义列表中上层项目 <dd> 自定义列表中下层项目 <li> 列表项目 1.有
用表格实现网页设计
qq_44369304的博客
06-06 1877
一个简陋的大体网页布局图 把网页分成表格的形式 实现过程遇到的难点 表格与网页布局的转换 ✔在实现过程中，把网页布局转换为表格需要对表格的格式很熟悉，理清楚行和单元格。 ✔一行用标签包含起来，里一个单元格内容用标签包含起来。 实现代码如下： <tr> <td > <b>三月推荐</b><br><br> 《XXX的异世界冒险》<br> 《XXX的奇妙物语
HTML 表格
京津追梦人
07-28 283
表格 表格从table标签开始，表格中的行从tr标签开始，表格中的数据从td开始。 有边框的表格--> 1行1列 50 1行3列 10 20 30 2行3列 10 20 30
HTML 表格
weixin_44799437的博客
10-29 201
1，表格的基本结构 每个表格有三个必须标签，< table >,< tr >,< td >三个标签用来创建表格，语法格式： < table >< /table >标签用于定义一个表格。< tr >用来定义表格中的一行，必须嵌套在< table >< /table >之中，表格中可以有多对< tr...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值