一、HTML的表格元素

1、table元素

  <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

  table元素的属性:

  

   frame属性值:

   

   rules的属性值:

   

     summary的用法:

 1 <table border="1" summary="Monthly savings for the Flintstones family">
2 <tr>
3 <th>Month</th>
4 <th>Savings</th>
5 </tr>
6 <tr>
7 <td>January</td>
8 <td>$100</td>
9 </tr>
10 </table>

   summary 属性不会对普通浏览器中产生任何视觉变化。

2、caption元素

  caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

  可选属性:

  

3.tr元素

  <tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。

  

   char、charoff属性几乎没有浏览器支持。

4、td|th元素

   定义表格内的表头单元格。HTML 表单中有两种类型的单元格:

    • 表头单元格 - 包含表头信息(由 th 元素创建)
    • 标准单元格 - 包含数据(由 td 元素创建)

    th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本

  

    abbr、axis、char、charoff、headers、scope等属性浏览器几乎不支持。

5。colgroup、col元素

   <col> 标签为表格中的一个或多个列定义属性值。您只能在table或colgroup中使用该元素。

  <colgroup> 标签定义表格列的组。通过此标签,您可以对列进行组合,以便格式化。该元素只有在 <table> 中才是合法的.

   注释:colgroup 元素只能包含 col 元素。

   注释:colgroup 元素无法创建表格列。如需创建列,必须在 tr 元素内规定 td 元素。  

     提示:如果需要向一个列组规定相同的属性值,请使用该元素。

   提示:如果需要为一个或多个列规定属性值,请使用 col 元素。

  属性:

  

    实例:

<html>
<body>
<table width="100%" border="1">
<colgroup span="3" style="background: red">
<col width="300px">
<col span="2" width="400px">
<tr height="80" valign="middle">
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr height="80" valign="middle">
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr height="80">
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>

  设置三个列的背景颜色为红色,第一个列的宽度300px,剩余两个列为400px;

6.thead、tfoot、tbody元素

  thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

 1 <table>
2
3 <thead>
4 <tr>
5 <td>THEAD 中的文本</td>
6 </tr>
7 </thead>
8
9 <tfoot>
10 <tr>
11 <td>TFOOT 中的文本</td>
12 </tr>
13 </tfoot>
14
15 <tbody>
16 <tr>
17 <td>TBODY 中的文本</td>
18 </tr>
19 </tbody>
20
21 </table>

HTML的表格元素的更多相关文章

  1. html中表格元素的相关总结

    表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...

  2. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  3. 第六十三节,html表格元素

    html表格元素 学习要点:     1.表格元素总汇     2.构建表格解析     本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据. 一.表格元素总汇     ...

  4. html5权威指南:表格元素

    第十一章:表格元素                                                                                           ...

  5. html5之表格元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  7. html/css 表格元素以及表格布局

    一,html之表格 1,一个完整的html表格所包含的元素 <!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> ...

  8. HTML表格元素

      学习要点:     1.表格元素总汇     2.构建表格解析 一.表格元素总汇     表格的基本构成最少需要三个元素:<table>.<tr>.<td>,其 ...

  9. HTML(二):表格元素

    表格元素的作用:用来格式化显示数据. 一.表格的基本结构 表格的基本语法:<TABLE border="设置表格边框尺寸大小" width="" cell ...

随机推荐

  1. PAT (Basic Level) Practice (中文)1054 求平均值 (20 分) 凌宸1642

    PAT (Basic Level) Practice (中文)1054 求平均值 (20 分) 题目描述 本题的基本要求非常简单:给定 N 个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的 ...

  2. AI数学基础之:确定图灵机和非确定图灵机

    目录 简介 图灵机 图灵机的缺点 等效图灵机 确定图灵机 非确定图灵机 简介 图灵机是由艾伦·麦席森·图灵在1936年描述的一种抽象机器,它是人们使用纸笔进行数学运算的过程的抽象,它肯定了计算机实现的 ...

  3. 03_利用pytorch解决线性回归问题

    03_利用pytorch解决线性回归问题 目录 一.引言 二.利用torch解决线性回归问题 2.1 定义x和y 2.2 自定制线性回归模型类 2.3 指定gpu或者cpu 2.4 设置参数 2.5 ...

  4. get_started_3dsctf_2016-Pwn

    get_started_3dsctf_2016-Pwn 这个题确实有点坑,在本地能打,在远程就不能打了,于是我就换了另一种方法来做. 确这个题是没有动态链接库,且PIE是关的,所以程序的大部分地址已经 ...

  5. PowerBI开发 第十八篇:行级安全(RLS)

    PowerBI可以通过RLS(Row-level security)限制用户对数据的访问,过滤器在行级别限制数据的访问,用户可以在角色中定义过滤器,通过角色来限制数据的访问.在PowerBI Serv ...

  6. 1148 Werewolf - Simple Version

    Werewolf(狼人杀) is a game in which the players are partitioned into two parties: the werewolves and th ...

  7. 写了个简洁的Typora+Markdown简历模板

    项目地址:https://github.com/CodingDocs/typora-markdown-resume (欢迎小伙伴们使用!个人能力有限,也欢迎小伙伴们一起完善这个简历模板!). 昨天在 ...

  8. Windows中的权限设置、文件压缩、文件加密、磁盘配额和卷影副本

      目录 权限设置 文件夹的NTFS权限 文件的NTFS权限 NTFS权限的应用规则 文件压缩 文件加密 磁盘配额 卷影副本 权限设置的应用 遇到的一个权限问题的小bug 权限问题的实际应用 权限设置 ...

  9. CVE-2014-3153分析和利用

    本文是结合参考资料对CVE-2014-3153的分析,当然各位看官可以看最后的资料,他们写的比我好. 在看CVE-2014-3153之前我们用参考资料4中例子来熟悉下这类漏洞是如何产生的: /** * ...

  10. hdu4901 枚举状态(找集合对S(xor) ==T(and))

    题意:      给你一个串数字,然后让你在这里面挑取两个集合S ,T,集合的要求是 (1)不能为空 (2)S集合的所有元素必须在T集合的左边 (3)S集合的XOR == T集合的AND      问 ...