2.1.7保留-表格相关元素

最新推荐文章于 2023-08-31 10:24:21 发布
最新推荐文章于 2023-08-31 10:24:21 发布
阅读量600 收藏
点赞数
分类专栏： HTML5_CSS3_JavaScript 
<!DOCTYPE html>
<html>
	<head>
		<title>2.1.7保留-表格相关元素</title>
		<metia http-equiv="Content-Type" content="text/html;charset="GBK" />
	</head>
	<body>
		<p>
			HTML5保留了定义表格的如下标签。<br>
			1、table：用于定义表格，table元素只能包含<br>
			0个或1个caption子元素（定义表格标题），<br>
			0个或1个thead子元素（定义表格头），<br>
			0个或1个tfoot子元素（定义表格脚），<br>
			多个tr子元素（定义表格行），<br>
			多个tbody子元素（定义表格体）。<br>
			该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。
			<blockquote>
			除此之外，该元素还可以指定如下几个属性：<br>
			1.cellpadding：指定单元格内容和单元格边框之间的间距。该属性既可是像素值，也可是百分比。<br>
			2.cellspacing：指定单元格之间的间距。该属性值既可以是像素值，也可是百分比。<br>
			3.width：指定表格的宽度，该属性值既可是像素值，也可是百分比。<br><br>
			HTML5删除了table元素所有的align、bgcolor、border等属性，如果完全按HTML5的建议，
			table元素的cellpadding、celspacing、width属性也不应该指定，而是应该全部放到CSS中定义。
			</blockquote><br><br>
			
			2、caption：用于定义表格标题，该元素只能包含文本、图片、超链接、文本格式化元素和表单控件元素等。<br><br>
			
			3、tr：定义表格行，该元素只能包含td或者th两种元素，
			该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br><br>
			
			4、td：定义单元格，该元素和div元素一样，可以包含各种类型的子元素，
			包括在td元素里包含table子元素再次插入一个表格。<br>
			该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br>
			<blockquote>
			除此之外，该元素还可以指定如下几个属性：<br>
			1.colspan：指定该单元格跨多少列，该属性值就是一个简单数字。<br>
			2.rowspan：指定该单元格可横跨的行数。<br>
			3.height：指定表格的高度，该属性值既可是像素值，也可是百分比。<br>
			4.width：指定表格的宽度，该属性值既可是像素值，也可是百分比。<br><br>
			HTML5删除了td元素原有的align、bgcolor、valign等属性，如果完全按HTML5的建议
			td元素的height、width属性也不应该指定，而是应该全部放到CSS中定义。
			</blockquote><br><br>
			
			5、th：定义表格页眉的单元格，和td标签的用法几乎完全一样，
			只是浏览器呈现th元素时有一定差别。<br><br>
			
			6、tbody：定义表格的主体，该元素只能包含tr子元素。<br>
			该元素可以指定id、style和class等普通属性，也可以指定onclick等事件属性。<br>
			style和class等普通属性也可以指定onclick等事件属性。<br>
			使用tbody标签，可以将一个表格分为几个独立的部分。
			tbody元素可以将表格中的一行或几行合并成一组，当我们使用Ajax编程时常常需要动态修改表格中某几行，
			这就需要使用tbody元素了。<br>
			在tbody元素中，必须使用tr子元素来定义表格行，tbody元素本事不会生成任何输出内容。
			一旦我们使用tbody将多行定义为一组，一个tbody元素就是表格中一个独立的部分，
			即不能从一个tbody跨越到另一个tbody中。<br><br>
			
			7、thead：定义表格头，用法与tbody基本相似，指定功能稍有差别。<br><br>
			
			8、tfoot：定义表格脚，用法与tbody基本相似，指定功能稍有差别。<br><br>
			
			thead、tfoot、tbody元素可以让我们对表格中的行进行分组，
			每个tbody就是一组，可以多行（在Ajax编程中经常用到该元素）。
			除此之外，当创建某个表格时，也许希望拥有一个标题行，可以是多个数据行组成的组，
			以及位于底部的一个统计行。这样就可以让浏览器能对表格标题和页脚之间的表格内容进行滚动。
			而且，当打印长表格内容时，表格头和表格脚将被打印在包含表格数据的每个页面上。
		</p>
		
		<p>
			事例：<br>
			1、简单表格<br>
			<table style="width:400px" border="1">
				<caption><b>疯狂Java体系图书</b></caption>
				<tr>
					<th>书名</th>
					<th>作者</th>
				</tr>
				<tr>
					<td>疯狂Java讲义</td>
					<td>李刚</td>
				</tr>
				<tr>
					<td>轻量级Java EE企业应用实战</td>
					<td>李刚</td>
				</tr>
			</table>
			<br>
			
			2、跨行、跨列表格<br>
			<table style="width:240px" border="1">
				<tr>
					<td rowspan="2">跨2行的单元格</td>
					<td>普通单元格1</td>
				</tr>
				<tr>
					<td>普通单元格2</td>
				</tr>
				<tr>
					<td colspan="2">跨2列的单元格</td>
				</tr>
				<tr>
					<td>普通单元格</td>
					<td>普通单元格</td>
				</tr>
			</table>
			<br>
			
			3、使用thead、tbody、tfoot元素的表格<br>
			<table border="1" style="width:400px">
				<caption><b>疯狂Java体系图书</b></caption>
				<thead>
					<tr>
						<th>书名</th>
						<th>作者</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="2" style="text-align:right">现总计：2本图书</td>
					</tr>
				</tfoot>
				<tbody>
					<tr>
						<td>疯狂Java讲义</td>
						<td>李刚</td>
					</tr>
					<tr>
						<td>轻量级Java EE企业应用实战</td>
						<td>李刚</td>
					</tr>
				</tbody>
			</table>
			<br>
			如果决定使用thead和tfoot元素，建议按如下次序来使用它们：thread、tfoot、tbody，
			浏览器自动会将tfoot元素的内容呈现在表格最下面，不仅如此，只能在table元素内使用这些标签。
			<br><br>
		</p>
		
		<p>
			除此之外，如果需要在页面中为某列整体指定属性，HTML5保留了如下两个标签。<br>
			1、col：该元素用于为表格中的一个或多个列指定属性值。
			该元素只能出现在table元素或colgroup元素内。<br>
			该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br>
			<blockquote>
			除此之外，该元素还可以指定如下属性：<br>
			span：指定该列可横跨多少列。
			</blockquote>
			col元素是个空元素，它自己本身并不产生表格列。如需创建表格列，必须在tr元素内定义td元素。
			col元素只是为表格中指定列整体指定属性值，因此一旦在table中使用col为表格列指定属性，
			col定义的表格列就应与表格内实际包含的列数相等。<br><br>
			
			2、colgroup：该元素用于为表格中的一个或多个列指定属性值。
			该元素只能出现在table元素或colgroup元素内。<br>
			该元素可以指定id、class、style等核心属性，还可以指定onclick等事件属性。<br>
			<blockquote>
			colgroup的作用只是用于组织多个col元素，当使用colgroup组织多个col元素时，
			colgroup上指定的属性将对它所包含的所有col元素有效。
			</blockquote>
			eg：使用colgroup、col元素为指定列设置属性值。
			<!-- 设置表格背景色为黑色，单元格之间的间距为1px
			通过设置背景色为黑色可以实现边框效果-->
			<table style="background-color:black;border-collapse:separate;border-spacing:1px;">
				<caption><b>疯狂Java体系图书</b></caption>
				<!-- 定义所有列的背景色都是白色 -->
				<colgroup style="background-color:white;">
					<!-- 设置第一列宽160px -->
					<col style="width:160px"/>
					<!-- 定义横跨两列，设置这两列各宽100px -->
					<col span="2" style="width:100px"/>
				</colgroup>
				<thead>
				<tr>
					<th>书名</th>
					<th>作者</th>
					<th>价格</th>
				</tr>
				</thead>
				<tfoot>
				<tr>
					<td colspan="3" style="text-align:right">现总计：2本图书</td>
				</tr>
				</tfoot>
				<tbody>
				<tr>
					<td>疯狂Java讲义</td>
					<td>李刚</td>
					<td>109</td>
				</tr>
				<tr>
					<td>轻量级Java EE企业应用实战</td>
					<td>李刚</td>
					<td>89</td>
				</tr>
				</tbody>
			</table>
		</p>
		
	</body>
</html>

ssmoom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sisu-guice-2.1.7-noaop.jar
01-08
sisu-guice-2.1.7-noaop.jar
树莓派-rxtx2.1.7r2-configure
05-15
树莓派-rxtx2.1.7r2-configure
tbody、thead
DEF网络安全爱好者技术博客
07-01 809
tbody和thead是table当中的一个内部的内部头和内部内容。 代码如下： window.onload = function(){ var table = document.getElementById('table'); alert(table.getElementsByTagName('tbody')[1].getElementsByTagName('tr')[0].
HTML中Table表格的使用与漂亮的表格模板
热门推荐
pan_junbiao的博客
08-04 7万+
1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记表示整个表格。<ta...
LayUI_02 前端框架 页面元素
m0_60786924的博客
07-11 1274
目录一、栅格系统与后台布局示例codeHTML二、layui 颜色设计感三、字体图标四、CSS3动画类按钮 - 页面元素五、表单 - 页面元素HTMLcode行区块结构code六、导航相关 - 页面元素七、基础菜单 - 页面元素HTMLcodeJS八、Tab选项卡 - 页面元素九、进度条 - 页面元素HTML结构code十、面板 - 页面元素十一、表格 - 页面元素十二、徽章十三、时间线十四、简单辅助元素 - 页面元素HTML结构code栅格系统为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多
spring boot 2.4.3 官方文档- 扩展配置翻译
godguhguh123的专栏
02-25 708
# 2. Externalized Configuration Spring Boot允许您外部化配置，这样您就可以在不同的环境中使用相同的应用程序代码。您可以使用各种外部配置源，包括Java属性文件、YAML文件、环境变量和命令行参数。 可以使用 `@Value` 批注将属性值直接注入到您的bean中，可以通过Spring的 `Environment` 抽象访问，也可以通过 `@ConfigurationProperties` 绑定到结构化对象。 Spring Boot使用一个非常特殊的 `Pro.
【机器学习】线性回归实战案例一：多元素情况下广告投放效果分析步骤详解
lys_828的博客
11-17 3622
线性回归实战案例一：多元素情况下广告投放效果分析步骤详解2 线性回归2.1 案例一：多元素情况下广告投放效果分析2.1.1 模块加载与绘图布局样式设置2.1.2 加载数据和数据筛选2.1.3 探索式数据分析（EDA）2.1.4 探究字段之间的关联性2.1.5 模型创建与拟合2.1.6 数据标准化/缩放化2.1.7 模型验收2.1.8 模型对比 手动反爬虫，禁止转载：原博地址 https://blog.csdn.net/lys_828/article/details/121382191（CSDN博主：Be_
SpringBoot---day02
zll的博的博客
03-22 312
SpringBoot—day02 1. SpringBoot实践 1.1 整合SpringMVC 虽然默认配置已经可以使用SpringMVC了，不过我们有时候需要进行自定义配置。 1.1.1 修改端口 查看SpringBoot的全局属性可知，端口通过以下方式配置： # 映射端口 server.port=80 重启服务后测试： 1.1.2 访问静态资源 现在，我们的项目是一个jar工程，那么就没有webapp，我们的静态资源该放哪里呢？ 在源码中，有一个叫做ResourceProperties的类，里面就
从前慢-CSS基础
unique_perfect的博客
01-17 1024
CSS 1.1 CSS初识 CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 1.2 引入CSS样式表 行内式（内联样式） <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> 内部样式表（内嵌样式表） <head> <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1;
深入理解计算机系统-学习笔记
weixin_43548631的博客
08-31 249
计算机领域的神书，听说通读需要2年。为激励自己能够坚持读完这本书，将自己的读书笔记发布到CSDN。同时对于书中的一些存疑的地方，也希望能和大家一起讨论。有错误不足的地方欢迎支持呀。
Elasticsearch -- 学习笔记
基地的博客
11-27 1199
目录1 Elasticsearch 入门1.1 Elasticsearch 安装1.1 下载软件1.2 安装软件1.2 基本操作1.2.1 索引操作1.2.1.1 创建索引1.2.1.2 查看创建的所有索引1.2.1.3 查看创建的指定索引1.2.1.4 查看索引文档总数1.2.1.5 删除指定索引1.2.2 文档操作1.2.2.1 创建文档1.2.2.2 查看文档1.2.2.3 修改文档1.2.2.4 部分文档更新1.2.2.5 删除文档1.2.2.6 根据条件删除文档1.2.3 映射操作1.2.3.1
itext-2.1.7-API文档-中文版.zip
07-14
赠送jar包：itext-2.1.7.jar； 赠送原API文档：itext-2.1.7-javadoc.jar； 赠送源代码：itext-2.1.7-sources.jar； 赠送Maven依赖信息文件：itext-2.1.7.pom； 包含翻译后的API文档：itext-2.1.7-javadoc-API文档-...
pyqt5_tools-5.14.2.1.7b3-cp38-cp38-win_amd64.whl
06-03
pyqt5_tools-5.14.2.1.7b3-cp38-cp38-win_amd64.whl 离线安装包
itext-2.1.7-API文档-中英对照版.zip
07-14
赠送jar包：itext-2.1.7.jar； 赠送原API文档：itext-2.1.7-javadoc.jar； 赠送源代码：itext-2.1.7-sources.jar； 赠送Maven依赖信息文件：itext-2.1.7.pom； 包含翻译后的API文档：itext-2.1.7-javadoc-API文档-...
主板诊断卡简要说明书.doc
07-17
说明书
出入库表-进销存明细表-Excel模板
07-17
【作品名称】：出入库表-进销存明细表-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ActivePerl-5.8.8.819-MSWin32-x64-267479.msi
07-17
ActivePerl-5.8.8.819-MSWin32-x64-267479.msi X64 编译MTK功能机必要的组件，网上已经绝版了
torchaudio-0.10.1+cu113-cp38-cp38-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
serotonin-utils-2.1.7.jar
12-03
serotonin-utils-2.1.7.jar 是一个用于 Java 编程语言的开源库，它提供了一系列用于处理和操作数据的工具方法和类。这个库的主要功能包括对数据进行序列化和反序列化、处理日期和时间、操作集合和Map等。在实际的项目开发中，我们可以使用 serotonin-utils-2.1.7.jar 来简化代码编写，提高开发效率。 在数据序列化和反序列化方面，serotonin-utils-2.1.7.jar 可以帮助我们将对象转换为 JSON 或 XML 格式的数据，也可以将 JSON 或 XML 数据转换为对象。这样的功能在实际的网络通信和数据存储中非常有用，可以方便地处理各种数据格式。 此外，serotonin-utils-2.1.7.jar 还提供了丰富的日期和时间处理方法，可以用于日期的格式化和解析、时区的转换、日期的计算等操作。这对于需要处理时间信息的应用程序来说是非常有帮助的。 在集合和Map的操作方面，serotonin-utils-2.1.7.jar 提供了很多实用的工具方法，如集合的筛选、过滤、转换等，可以简化代码编写，提高代码的可读性和可维护性。 总的来说，serotonin-utils-2.1.7.jar 是一个功能强大的 Java 开源库，可以帮助我们简化开发工作，提高代码的质量和效率。在实际的项目中，我们可以通过引入这个库来摆脱一些重复性的工作，更专注于业务逻辑的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值