HTML——表格、表格嵌套、表格布局

最新推荐文章于 2024-06-18 12:20:08 发布
最新推荐文章于 2024-06-18 12:20:08 发布
阅读量5.4w 收藏 184
点赞数 34
分类专栏： 前端入门——HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39228087/article/details/83047311
版权

表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="solid"  width="500px" height="150px" cellspacing="0" cellpadding="10" frame="solid" rules="solid" >
<thead>
<caption>课程表</caption>
<tr align="center" valign="center" bgcolor="pink">
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody align="center" valign="center">
<tr >
<td rowspan="2">语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
			 	</tr>
<tr>

<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td colspan="4">课间活动</td>
			
</tr>
</tbody>
<tfoot align="center" valign="center">
<tr>
<td>语文</td>
<td>数学</td>
<td >英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</tfoot>
</table>
</body>
</html>

展示效果：
cellspacing 属性规定单元格之间的空间。
请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。
valign="center"规定竖直居中
rowspan="2"占据并合并两个单元格

Document
课程表
星期一星期二星期四星期五
语文数学英语生物
数学英语生物
课间活动
语文数学英语生物
语文数学英语生物

表格嵌套

<!DOCTYPE html>
<html>

<head>
<title>表格属性</title>
<meta charset="utf-8">
</head>

<body>
<!-- 在以下表格标签中添加相应代码 -->
<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
<caption>课程表</caption>
<tr bgcolor="orange" align="center">
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td rowspan ="2">语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center">

<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center">
<td colspan="4">课间活动</td>
</tr>
<tr align="center">
<td rowspan="2" >
<table border="1"  cellspacing="0" cellpadding="5px" align="center">
<tr>
<td>前半节</td>
<td>后半节</td>
</tr>
<tr>
<td>诗词</td>
<td>古文</td>
</tr>
</table>
</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center">

<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</table>
</body>
</html>

展示效果：在td中添加表格

表格属性
课程表
星期一星期二星期四星期五
语文数学英语生物
数学英语生物
课间活动
前半节后半节
诗词古文
数学英语生物
数学英语生物

表格布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
</head>
<body>
<table  width="100%" height="100%" bgcolor="#f2f2f2">
<tr bgcolor="#14191e" height="60px"> <!-- 页头 -->
<td></td>
</tr>
<tr height="15px">					<!-- 空隙 -->
<td></td>
</tr>
<tr >					<!-- 主内容 -->
<td>
<table width="1024px" align="center" >
<tr>
<td width="400px" valign="top"  align="right">
<table bgcolor="#fff" width="100%">
<tr>
<td align="center" height="60px">html简介</td>
</tr>
<tr>
<td align="center" height="60px">html表格</td>
</tr>
<tr>
<td align="center" height="60px">html实例</td>
</tr>
<tr>
<td align="center" height="60px">css简介</td>
</tr>
<tr>
<td align="center" height="60px">css表格</td>
</tr>
<tr>
<td align="center" height="60px">css实例</td>
</tr>
<tr>
<td align="center" height="60px">JavaScript简介</td>
</tr>
<tr>
<td align="center" height="60px">JavaScript实例</td>
</tr>
<tr>
<td align="center" height="60px">关于我们</td>
</tr>
</table>
</td>
<td width="24px"></td>	<!-- 空隙 -->
<td width="600px" bgcolor="#fff">
<pre>
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
我的第一个标题
我的第一个段落。
例子解释
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
我的第一个标题
我的第一个段落。
例子解释
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
</pre>
</td>
</tr>
</table>
</td>
</tr>
<tr height="20px">					<!-- 空隙 -->
<td></td>
</tr>
<tr bgcolor="#14191e" height="100px"><!-- 页尾 -->
<td></td>
</tr>
</table>
</body>
</html>

展示效果：

布局
html简介
html表格
html实例
css简介
css表格
css实例
JavaScript简介
JavaScript实例
关于我们
 
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
我的第一个标题
我的第一个段落。
例子解释
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
我的第一个标题
我的第一个段落。
例子解释
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
HTML 表格详解（简单易懂较详细）
m0_74107848的博客
03-10 1063
HTML 表格是网页中展示数据的重要工具。通过<table><tr><th><td>等标签，可以创建结构清晰、样式美观的表格。标签名描述示例<table>定义表格<table><tr>定义表格中的一行<tr><th>定义表格的表头单元格<th><td>定义表格中的数据单元格<td><thead>定义表格的头部<thead><tbody>定义表格的主体<tbody><tfoot>定义表格的脚部<tfoot>属性名描述示例border设置表格的边框设置单元格内容与边框之间的距离。
前端学习（初识HTML 下）——表格、表单和元素
weixin_43866830的博客
03-13 4702
这里写目录标题一、HTML表格1.表格基本结构 一、HTML表格 1.表格基本结构 表格的基本结构就是 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html课程表</title> </head> <body> <table border="1"> <caption>课程表</capti
表格表单的嵌套.html
09-18
比较简单的表单与表格的嵌套，只是做一个引导作用，实际意义不大，
html 表格的嵌套
yangshuolll的专栏
10-03 6269
忙了一下午 完成了老师给我的html 作业   表格的嵌套 做的好搓~~ 表格的嵌套
html中表格和表单嵌套以及css基础知识
sz1125218970的博客
12-08 6928
笔记
html 表格嵌套
QQ654097375的博客
05-11 1032
   表格的嵌套就是表格里再有表格，表格的嵌套作用一方面是外观更为漂亮，另一面出于布局的需要，或者两者皆有。只要在外表格（最外面的表格）的&lt;td&gt;&lt;/td&gt;标签间加入对应的table标签就行。 &lt;table border=8 bordercolor=#u0099cc width=100%&gt; &lt;tbody&gt; &lt;tr&gt; ...
html表格嵌套
行善之人必有余庆
05-19 8985
表格嵌套 网站logo 网站banner 网站导航 网页导航 网页导航 网站导航 网页导航 网页导航
HTML表格标记教程(47):表格嵌套
12-04
出于这些原因，引入嵌套表格。由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。这样一来各司其职，互不冲突。 文件范例：10-47.htm 制作表格嵌套。01 <!– ——————...
标记语言——CSS布局
12-12
点击这里返回软件开发网　HTML教程　栏目．想浏览CSS教程请点这里。 上文：标记语言——打印样式。...很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 稍后在"技巧延伸"中,将会讨论Wind
HTML(5)——列表表格
最新发布
m0_74386799的博客
06-18 683
列表标题列表描述......
最新Android表格框架布局源码及电子书汇总
本文旨在详细解读与“Android应用源代码——表格框架布局”相关的一系列知识点。由于Android系统在移动开发领域的重要性，对表格框架布局的研究和实践显得尤为重要，尤其是对于开发Android应用程序的开发者们。从...
表格行嵌套子表格实现
03-26
Flex AdvanceDataGrid 表格行嵌套子表格实现，实现子表格显示数据功能，暂时原理实现的不完善，有需要的或者高手能帮忙细化下最好了。
HTML之表格篇——表格的嵌套
xyjikl
06-29 1万+
表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。 下面将从最简单的表格嵌套开始演示和讲解，不会太难的。 两张表格的嵌套：
表格嵌套表格数据
m0_57768704的博客
06-08 636
表格嵌套表格数据通常我们做联表查询，为了接收返回的数据我们往往需要书写一个类，这个类包含着接收两张表的数据字段，如下图： 这是一种写法，但是如果面对一张表里的字段太多，那就得一个个去将这些字段写进类里，这种写法还可能让你的代码看上去比较繁杂，辨识度也会打一个折扣；那我们就来讲一下如何取代这种写法：在类里嵌套一个表数据，然后在读取数据时这样写： 这样就能在一张表数据里嵌套另一张表的数据了。...
HTML_表格实例
热门推荐
Twilight's Blog
01-01 1万+
html表格的几种形式
HTML之表格篇-表格嵌套表格
if_smile的博客
12-09 8797
嵌套表格一： 效果如图所示代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; tabl
利用html设置嵌套式表格,表格嵌套 HTML
weixin_39657825的博客
06-23 4987
嵌套表格就是在一个大的表格中，再嵌进去一个或几个小的表格，即插入到表格单元格中的表格。如果用一个表格布局页面，并希望用另一个表格组织信息，则可以插入一个嵌套表格。表格的嵌套一方面是为使页面的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要思路清晰，对表格的整体嵌套构架做到心...
day010：HTML表单与表格的嵌套
ZuoQi的博客
03-19 5648
一：表单与表格嵌套： <form> <table border="" cellspacing="" cellpadding="" bgcolor="" align=""> <tr> <td></td> </tr> </table> </form> 注：一定是表单form在外层，表格table在内层！！！ 二：代码举例 用户信息收集表 代码如下： 运行结果如下： ...
HTML表格嵌套
思过留痕
01-29 1160
注意： 表格的嵌套只能在td标签内 在上图的基础上，对最后一行的合并单元格进行嵌套两行两列的单元格
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值