HTML（五）——建立表格

最新推荐文章于 2024-02-16 23:45:17 发布
最新推荐文章于 2024-02-16 23:45:17 发布
阅读量668 收藏 6
点赞数
分类专栏： ● Web前端基础篇 文章标签： HTML table属性 外间距 内间距
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37084904/article/details/88102151
版权

1.表格的基本结构

建立表格需要用到<table></table>标签；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<!-- <tr>表示一行，<td>表示一列，<th>表示标题行 -->
<tr>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</tr>
<tr>
	<td>1-1</td>
	<td>1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<td>2-2</td>
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-2</td>
	<td>3-3</td>
</tr>
<tr>
	<td>4-1</td>
	<td>4-2</td>
	<td>4-3</td>
</tr>
</table>
</body>
</html>

运行结果：

 

2.合并单元格

单元格左右合并用colspan属性，上下合并用rowspan属性；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<!-- <tr>表示一行，<td>表示一列，<th>表示标题行 -->
<tr>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</tr>
<tr>
	<!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， -->
	<td colspan="2">1-1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 -->
	<td rowspan="2">2-3-2</td>
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-3</td>
</tr>
<tr>
	<td>4-1</td>
	<td>4-2</td>
	<td>4-3</td>
</tr>
</table>
</body>
</html>

运行结果：

 

3.用align属性设置对齐方式

设置表格内容居中用align属性，有left，center，right三个属性值，默认是left；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width=400> <!-- 表格宽度设置为400 -->
<!-- <tr>表示一行，<td>表示一列，<th>表示标题行 -->
<tr>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</tr>
<tr align="center">   <!-- 设置表格的第1行所有数据居中 -->
	<!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， -->
	<td colspan="2">1-1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 -->
	<td rowspan="2" align="center">2-3-2</td> <!-- 设置合并的第2列数据居中 -->
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-3</td>
</tr>
<tr>
	<td>4-1</td>
	<td>4-2</td>
	<td>4-3</td>
</tr>
</table>
</body>
</html>

运行结果：

 

4.用bgcolor属性设置表格背景颜色

设置表格背景颜色用bgcolor属性；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width=400 bgcolor="red"> <!-- 表格宽度设置为400，背景颜色为红色-->
<!-- <tr>表示一行，<td>表示一列，<th>表示标题行 -->
<tr>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</tr>
<tr align="center">   <!-- 设置表格的第1行所有数据居中 -->
	<!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， -->
	<td colspan="2">1-1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 -->
	<td rowspan="2" align="center" bgcolor="green">2-3-2</td> <!-- 设置合并的第2列数据居中，背景颜色为绿色-->
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-3</td>
</tr>
<tr bgcolor="yellow"><!-- 将表格的第4行设置为黄色 -->
	<td>4-1</td>
	<td>4-2</td>
	<td>4-3</td>
</tr>
</table>
</body>
</html>

运行结果：

 

5.用 cellpadding 属性和cellspacing 属性设定边距

5.1 cellspadding 属性设定表格单元格中的内容距离格线的距离（俗称“内间距”）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 表格宽度设置为400，背景颜色为红色，表格内容距离格线的距离为20px-->
<table border="1" width=400 bgcolor="red" cellpadding="20px">
<!-- <tr>表示一行，<td>表示一列，<th>表示标题行 -->
<tr>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</tr>
<tr align="center">   <!-- 设置表格的第1行所有数据居中 -->
	<!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， -->
	<td colspan="2">1-1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 -->
	<td rowspan="2" align="center" bgcolor="green">2-3-2</td> <!-- 设置合并的第2列数据居中，背景颜色为绿色-->
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-3</td>
</tr>
<tr bgcolor="yellow"><!-- 将表格的第4行设置为黄色 -->
	<td>4-1</td>
	<td>4-2</td>
	<td>4-3</td>
</tr>
</table>
</body>
</html>

运行结果：

可以明显第看到距离发生了变化！

 

 5.2 cellspacing 属性设定表格相邻单元格边线之间的距离。（俗称“外间距”）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 表格宽度设置为400，背景颜色为红色，表格内容距离格线的距离为20px，相邻单元格边线的距离为20px-->
<table border="1" width=400 bgcolor="red" cellpadding="20px" cellspacing="20px">
<!-- <tr>表示一行，<td>表示一列，<th>表示标题行 -->
<tr>
	<th>1</th>
	<th>2</th>
	<th>3</th>
</tr>
<tr align="center">   <!-- 设置表格的第1行所有数据居中 -->
	<!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， -->
	<td colspan="2">1-1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 -->
	<td rowspan="2" align="center" bgcolor="green">2-3-2</td> <!-- 设置合并的第2列数据居中，背景颜色为绿色-->
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-3</td>
</tr>
<tr bgcolor="yellow"><!-- 将表格的第4行设置为黄色 -->
	<td>4-1</td>
	<td>4-2</td>
	<td>4-3</td>
</tr>
</table>
</body>
</html>

运行结果：

表示各边框之间的距离为20px； 

 

程序员的时光
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-创建表格
cc098818的博客
08-12 614
1、表格的基本结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的基本结构</title> </head> <body> <table border="1">//边框 <tr> <th&...
从入门到精通HTML5——PDF——网盘链接
02-27
　7.1.1　表格的基本构成——table、tr、td 119 　7.1.2　表格的标题——caption 120 　7.1.3　表格的表头——th 121 　7.2　设置表格基本属性 123 　7.2.1　表格的宽度——width 123 　7.2.2　表格的高度——height...
html表格的建立
qq_41722101的博客
02-02 314
&amp;amp;lt;table width=&amp;quot;200&amp;quot; border=&amp;quot;1&amp;quot;使表格有了边框&amp;amp;gt; &amp;amp;lt;tr&amp;amp;gt; &amp;amp;lt;td&amp;amp;gt;姓名&amp;amp;lt;/td&amp;amp;gt; &amp;amp;lt;td
html创建表格
Lavender的博客
10-06 1044
创建一个表格要用到的标签： 表格的开始和结束； 当表格内容特别多时，加上此标签后，就要等此表格下载完之后才会显示； 表格的一行； 表格的一列； 表格的头部的一个单元格，表格表头； colspan="x" 水平合并x个td； rowspan="x" 竖直合并x个td； Title my table ee ww ss
HTML创建表格
qq_51049931的博客
07-08 1万+
制作网页时，使用表格可以更清晰的排列数据，是网页制作中使用最多的形式之一。 一、创建并设置表格属性 1.表格的基本标记——table、tr、td 表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记） 行：表格中的水平间隔； 列：表格中的垂直间隔； 单元格：表格中行与列相交所产生的区域。 基本语法： ...
用html5创建表格
small_rain_的博客
08-16 6372
 1.表格的基本结构       :一个表格只允许出现一对，html5不再支持它的任何属性       :表示表格的行数，html5不再支持它的任何属性       :写在内，表示该行有多少个单元格，html5中，只有colspan和rowspan两个属性          表格的基本结构                                 
HTML视频资源压缩包
05-23
这个视频可能涵盖了HTML的基本构建块——元素（如`<p>`用于段落，`<h1>`至`<h6>`用于标题），以及元素的属性（例如`class`和`id`）。同时，它可能讲解了如何设置文本样式，包括内联样式（如`<b>`、`<i>`）和使用`...
atlas-book-html-sample
06-20
《阿特拉斯图书样本——深入理解HTML》 阿特拉斯图书样本是O'Reilly Atlas工具链的一个测试案例，它提供了一个基础的项目框架，适用于那些希望了解或使用HTML的开发者和设计者。在这个压缩包中，我们可以看到一个名...
基于HTML家乡主题网页项目的设计与实现——上海介绍(5页) HTML+CSS
08-10
这些知识点的学习和实践对于初学者来说非常重要，可以帮助他们建立起扎实的前端开发基础，并为将来更深入的学习和项目开发打下良好的基础。此外，该项目还强调了代码的简洁性和易用性，适合初学者快速上手并理解每个...
html网页制作代码大全：庆余年——电影网站7页，不包含js 有登陆注册，表格 table布局 ，有的登录注册页面，内嵌 css
08-10
对于初学者而言，这是一个非常好的起点，可以帮助他们快速掌握网页设计的核心技能，并逐步建立起自己的作品集。同时，对于希望进一步提高自己技能的学生来说，该项目也提供了丰富的灵感和实用的代码示例，有助于他们...
HTML之如何创建表格？
热门推荐
花果山的和尚的博客
06-19 2万+
表格由 &lt;table&gt; 标签来定义。每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border属性指定有无边框，不写border属性或者赋值为0，创建的表格都将没有边框;赋值的大小...
带有标题的表格<caption>标题</caption>刚写是垂直的别急，写出下面第一行就会被表格挤成水平显示
Boa_lucky_queen的博客
12-26 990
打样小稿 数据统计表 单价 数量 总价 $120 1件 $120 $120 2件 $240
使用HTML创建强大的表格
CSDN blog of twy
11-12 517
表格的基本标记——table、tr、td 表格宽度和高度——width、height 表格的标题——caption（默认情况下，大部分可视化浏览器在表格的上方中央显示表格的标题） 表格的表头——th 表格对齐方式——align（left、right、center） 表格的边框宽度——border 表格边框颜色——bordercolor 单元格间距——cellspacing（单元格外）...
html5表格制作教程,html怎么做表格
weixin_32778881的博客
06-05 7472
html做表格的方法：首先新建一个html，并在“”中间填入表格内容；然后在“”中间输入样式表的样式；最后设置单元格的宽度高度等等样式即可。本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑html做个表格的步骤如下：1、首先新建一个html，点击中间，先填入表格内容；2、内容根据需求来写即可，示例代码如下：功课表语文7:00-7:407:50-8:3...
【HTML】如何使用html制作一个简易的表格？
最新发布
萌萌白白的博客
02-16 9224
如何使用html制作一个简易的表格
HTML基础之创建简单表格
沃和莱特的博客
03-11 2052
HTML基础之创建简单的表单
html5中快速创建表格,在HTML5画布内创建表格
weixin_29038345的博客
06-30 599
$(function() {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var data = "" +"" + $("#mytable").html() +"" +"";var DOMURL = self.URL || self.webkitURL || self;var img ...
怎么用html创建表格,HTML创建表格
weixin_39725873的博客
06-15 836
创建表格想在网页上展示上述表格效果可以使用以下代码：创建表格的四个元素：table、tbody、tr、th、td1、…：整个表格以标记开始、标记结束。2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。3、…：表格的一行，所以有几对tr表格就有几行。4、…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。5、…：表格的头部的一...
《HTML基础语言及制作网页的规范》
HTML语言建立了网页的规范和标准，自出现以来一直在发展。 HTML最初是由Tim Berners-Lee于1991年创建的。在Web的早期阶段，HTML是用于创建静态页面的主要工具，通过使用标记（tag）来实现文本格式化、链接、图像...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值