表格元素

最新推荐文章于 2021-12-07 20:54:49 发布
最新推荐文章于 2021-12-07 20:54:49 发布
阅读量1.1k 收藏
点赞数

一.表格元素总汇

表格的基本构成最少需要三个元素：<table>,<tr>,<td>，其他的一些作为可选辅助存在。

元素名称：

table ：表示表格

thead：表示标题行

tbody：表示表格主体

tfoot：表示表脚

tr:表示一行单元格

th：表示标题行单元格

td：表示单元格

col：表示一列

colgroup:表示一组列

caption：表示表格标题


1.<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个border 属性，设置为1即可显示边框。

2.<th>为表格添加标题单元格

解释：<th>元素只要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。

这里使用了一个通用属性style，主要用于CSS样式设置，以后会涉及到。<th><td>均属于单元格，包含两个合并属性:colspan是横向合并,rowspan是纵向合并等。

3.<thead>添加表头

解释:<thead>元素就是限制和规范了表格的表头部分，尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。

4.<tfoot>添加表脚

解释：<tfoot>元素为表格生成表脚，限制在表格的底部。

5.<tbody>添加表主体

解释：<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续CSS和JAVASCRIPT的控制。

6.<caption>添加表格标题

解释：<caption>元素给表格添加一个标题

7.<colgroup>设置列

解释：<colgroup>元素是为了处理某个列，span属性定义处理那些列。1表示第一列，2表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点（即光标）移入第二位，在处理第二列即可。

8.<col>更灵活的设置列

解释：<col>元素表示单独一列，一个表示一列，控制更加灵活。如果设置了span，则表示控制多列。

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格元素</title>
</head>
<body>
<table border="1" style="width: 300px;">一个表格， 长度变长，标题单元格里的内容自动居中
<tr>
<th>姓名</th>一个标题单元格
<th>性别</th>标题有加粗功能
<th>婚否</th>
</tr>
<tr>一行
<td>张三</td>一行里的单元格
<td>男</td>td是普通单元格
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>

</table>
<br />


<table border="1" style="width: 300px;">一个表格， 长度变长，标题单元格里的内容自动居中
<tr>
<th>姓名</th>一个标题单元格
<th>性别</th>标题有加粗功能
<th>婚否</th>
</tr>
<tr>一行
<td>张三</td>一行里的单元格
<td>男</td>td是普通单元格
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共两人</td>   colspan合并单元格的作用
</tr>
</table>
<br />

<table border="1" ">
<tr>标题单元格
<th rowspan="4">基本情况</th>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共两人</td>   
</tr>
</table>

<br />

<table border="1" ">
<caption>这是一个表格</caption>
<thead>
<tr style="background: red;">将该行的背景设置为红色
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>

<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tfoot>
<tr>
<td colspan="3">统计：共两人</td>   
</tr>
</tfoot>

</table>

<br />

<table border="1" ">
<colgroup style="background: red;"></colgroup>默认将第一列的背景颜色设置为红色

<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共两人</td>   
</tr>
</table>

<br />

<table border="1" ">
<colgroup style="background: red;" span="1"></colgroup>通过span属性将表格的第一列的背景颜色设置为红色
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共两人</td>   
</tr>
</table>

<br />

<table border="1" ">
<colgroup style="background: red;" span="2"></colgroup>通过span属性将表格的前两列的背景颜色设置为红色
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>

<br />

<table border="1" ">如何将第二列的背景颜色设置为红色？
<colgroup style="background: white;" span="1"></colgroup>先将第一列背景颜色设置为白色
<colgroup style="background: red;" span="1"></colgroup>因为光标此时停留在第二列，所以只需设置span属性为1 即可
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br />

<table border="1" ">更灵活的设置第二列的背景颜色为红色
<colgroup>
<col />利用col标签占位符
<col style="background: red;">
</colgroup>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>

</body>
</html>








ZeZe88818
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Word中表格元素Xml化
07-02
利用Aspose.Words对Word中表格中各单元格中元素提取并XML化，无论表格结构如何复杂，都可以实现如实提取并XML化
LaTeX 表格元素包装器：更改 LaTeX 表格字符串中某些元素的字体-matlab开发
06-01
此函数采用 LaTeX 表字符串并使用输入前缀和后缀包装单个元素。 这可用于更改某些元素的字体以突出显示、更改它们、删除它们等。 如果您遇到任何错误，请告诉我。
layui动态添加表格元素删除代码.zip
11-19
layui动态添加表格元素删除代码.zip
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
11-26
UI-Grid中表格数据中如果存在多个连续的空格，会显示为一个空格，解决方法很简单，只需要加上这样一个样式： .ui-grid-cell-contents { white-space: pre !important; } white-space 属性设置如何处理元素内的空白。 pre：  空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 以上这篇完美解决UI-Grid表格元素中多个空格显示为一个空格的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
jQuery实现表格元素动态创建功能
01-19
Jquery实现表格元素的动态创建，本质是通过构造一个Dom Node节点，并且拼接到表格的Dom树上的子叶位置。 HTML正文： 用户：<input type=text id=user/> 邮箱：<input type=text id=mail/> 手机：<input type=text id=phone/> <br> <button id=b1>添加</button><br> <table border=1 id=table> <tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></
第 6 章表格元素
梦之归途的博客
05-04 292
Html Table 样式 摘要： 1.表格元素总汇 2.构建表格解析 本章主要探讨 HTML5中表格元素的用法。表格的主要用途是以网格的形式显示二维数 据。 一．表格元素总汇 表格的基本构成最少需要三个元素：&lt;table&gt;、&lt;tr&gt;、&lt;td&gt;，其他的一些作为可选辅 助存在。 二．构建表格解析 1.&lt;table&gt;&lt;tr&...
表格元素及其他元素
yyh619的博客
12-07 2321
表格元素 表格的各部分元素 表格：table元素 标题：caption元素 分框：(1)表头：thead元素；(2)主体：tbody元素；(3)表尾：tfoot元素； 框内子元素：(1)表格行：tr元素；(2)单元格——标题格：th元素、一般格：td元素。 样式及合并 边框折叠： border-collapse：collapse；——会使相邻单元格的边框重叠 单元格合并 ——给框内子元素加属性： colspan=“ ”；——指几列单元格合并 ro..
html5学习15：表格元素
八十岁老将的博客
02-07 2191
1、基本的表格 有三个元素是每个表格都必须要有的: table、tr和td。元素table，是HTML用以支持表格式内容的核心元素，它表示HTML文档中的表格。 1.1 table元素 属性：border 包含：caption,colgroup,thead,tbody,tfoot,tr,th,td 1.2 tr元素 父元素：table,thead,tfoot,tbody 内容：td,th 1.3 td元素 属性：colspan,rowspan,headers <table> <tr
Table 标签详解
热门推荐
_
02-11 3万+
<table>在HTML 中定义了表格布局。说到 table 标签，我们可以想到的大致有以下几个元素：<tr>、<th>、<td>、<thead>、<tbody>、<tfoot>接下来，我们看看每个元素有什么用，使用后会有怎样的效果。 table 的基本使用 1.<table> <!DOCTYPE html> <html><head><meta charset=".
html表格（table）的基本结构
weixin_44722237的博客
06-11 6059
表格的基本结构 调试软件:hBuilder 简单的html表格由table元素以及一个或者多个<tr>、<th>或<td>元素组成。<tr>元素定义表格的行，<th>元素定义表格的头，<td>定义表格单元格。 更复杂的表格可能包括caption、col、colgroup、thead、tfoot、tbody等元素。 <table>标签的属性 属性 属性值 说明 align left、cen..
HTML5访问表格元素
11-22
用Html5编写的表格，并能访问其中的标题，单元格的数据。
WEB前端技术-表格元素练习
12-27
WEB前端技术-表格元素练习
第6章 表格元素.pdf
04-27
第6章 表格元素.pdf
table里面获取所有元素
03-19
NULL 博文链接：https://liaolzy.iteye.com/blog/704713
javascript实现对表格元素进行排序操作
10-23
主要介绍了javascript实现对表格元素进行排序操作，分别可以实现点击之后排序和还原，和排升序和降序的功能，文章末尾附完整代码，感兴趣的小伙伴们可以参考一下
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
pandas定位表格元素
03-26
要定位pandas表格中的元素，可以使用iloc和loc函数。iloc是根据行号和列号进行定位，而loc是根据索引标签进行定位。 例如，在以下表格中，我们想要定位第一行第二列和第二行的"Name"列： ``` Name Age Gender 0 Alice 24 F 1 Bob 30 M 2 Cindy 21 F 3 Dave 45 M 4 Elizabeth 32 F ``` 使用iloc函数： ```python import pandas as pd df = pd.read_csv('example.csv') # 定位第一行第二列 cell_value = df.iloc[0, 1] print(cell_value) # 输出：24 # 定位第二行的"Name"列 column_values = df.iloc[1, :] name_value = column_values['Name'] print(name_value) # 输出：Bob ``` 使用loc函数： ```python import pandas as pd df = pd.read_csv('example.csv') df = df.set_index('Name') # 将Name列作为索引 # 定位第一行第二列 cell_value = df.loc['Alice', 'Age'] print(cell_value) # 输出：24 # 定位第二行的"Name"列 name_value = df.loc['Bob', 'Name'] print(name_value) # 输出：Bob ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值