一、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. Python | random 模块：Python 中如何生成随机数和随机抽样？

    random 是平时开发过程中常用的一个模块,该模块实现了各种分布的伪随机数生成器,以及和随机数相关的各种实用函数.基本函数 random() 在区间 [0.0, 1.0) 内均匀生成随机浮点数,是模 ...

  2. A. 【例题1】数字反转

    题目解析 字符串的基础操作,注意判断零即可 #include <bits/stdc++.h> using namespace std; int i; char c[15]; int mai ...

  3. [Fundamental of Power Electronics]-PART II-9. 控制器设计-9.2 负反馈对网络传递函数的影响

    9.2 负反馈对网络传递函数的影响 我们已经知道了如何推导开关变换器的交流小信号传递函数.例如,buck变换器的等效电路模型可以表示为图9.3所示.这个等效电路包含三个独立输入:控制输入变量\(\ha ...

  4. 201871030112-贾傲羊 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告

    项目 内容 课程班级博客链接 课程班级博客链接 这个作业要求链接 作业要求链接 我的课程学习目标 学习PSP流程并运用于结对项目:学习GitHub代码的管理;学习结对编程的流程与内容 这个作业在哪些方 ...

  5. CIE标准色度系统（上）

    一.颜色匹配 为了满足工业生产对颜色特性的定量化和标准化的需要,由国际照明委员会(CIE)的协调和指导下,先后提出CIE1931和CIE1964标准色度观察者光谱三刺激值,由此奠定了现代色度学基础. ...

  6. Java JFR 民间指南 - 事件详解 - jdk.ObjectAllocationSample

    对象分配采样:jdk.ObjectAllocationSample 引入版本:Java 16 相关 ISSUE:Introduce JFR Event Throttling and new jdk.O ...

  7. Asp.Net Core&CAP实现分布式事务

    需要注意的是标题中的CAP不是指的CAP理论,而是园区大神杨晓东实现的框架,CAP框架基于本地消息表用最终一致性实现分布式事务. 本地消息表 首先我们考虑一个场景,在将用户信息更改后,需要发送一条消息 ...

  8. Java | 使用OpenFeign管理多个第三方服务调用

    背景 最近开发了一个统一调度类的项目,需要依赖多个第三方服务,这些服务都提供了HTTP接口供我调用. 服务多.接口多,如何进行第三方服务管理和调用就成了问题. 常用的服务间调用往往采用zk.Eurek ...

  9. OO_UNIT4_SUMMARY

    经过一个学期的学习,OO课程终于落下帷幕.本次博客会首先对第四单元作业的架构进行分析,再对OO课程进行总体回顾,最后是个人的建议与体会. 一.第四单元三次作业架构设计 1.第一次作业 第一次作业是对类 ...

  10. 03- 手机App功能测试要点以及登录页面的测试

    当你进入一个互联网公司以后,首先对公司结构有所了解,然后遇到问题找对应的工作人员,效率就事半功倍了. 公司的结构: 产品经理 项目经理 设计师 开发人员 测试人员 运维人员 运营人员 配置管理 App ...