博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML表格相关元素
阅读量:6074 次
发布时间:2019-06-20

本文共 2644 字,大约阅读时间需要 8 分钟。

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

  table标签除了具有html元素中通用的属性外,还含有自己的属性,常用属性如下:

:规定表格背景颜色。

:规定单元边沿与其内容之间的空白。

:规定单元格之间的空白。

:规定外侧边框的哪个部分是可见的。从实用角度出发,最好不要规定 frame,而是使用 CSS 来添加边框样式。

:规定内侧边框的哪个部分是可见的。

:规定表格的摘要。

:规定表格的宽度。如果没有设置 width 属性,表格会占用需要的空间来显示表格数据。

  1、<caption>标签

    <caption>标签用于定义表格标题,该元素可以包含文本、图片、超链接、文本格式化元素和表单控件元素。

  2、<thead>标签

    <thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与  和  元素结合起来使用。

常用属性如下:

:定义 thead 元素中内容的对齐方式。

:规定根据哪个字符来进行文本对齐。

:规定第一个对齐字符的偏移量。

:规定 thead 元素中内容的垂直对齐方式。

  3、<tbody>标签

<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。常用属性与<thead>标签相同。

但需要注意的是,<tbody../>元素中,必须使用<tr.../>子元素来定义表格行,<tbody.../>元素本身并不会生成任何输出内容。

 

   4、<tfoot>标签

<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。常用属性与<thead>标签相同。

 

<thead.../>、<tfoot.../>、<tbody.../>元素可以让我们对表格中的行进行分组,每个<tbody.../>就是一组,可以有多行。除此之外,当创建某个表格时,也许希望有一个标题行,可以是多个数据行组成的组,以及位于底部的一个统计行。这样可以让浏览器能对表格标题和页脚之间的表格内容进行滚动。

例如如下代码:

    
效果实例
  书名 作者
现总计:4本图书
计算机类图书 C++面向对象程序设计 陈维兴
计算机网络 谢希仁
计算机类图书 C++面向对象程序设计 陈维兴
计算机网络 谢希仁

 

  在浏览器下浏览该页面,效果如下:

 

如果决定使用<thead.../>和<tfoot.../>元素,建议按如下次序来使用它们:<thead.../>、<tfoot.../>、<tbody.../>

 

5、<tr>标签

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

6、<th>标签

<th> 标签定义表格内的表头单元格。th 元素内部的文本通常会呈现为居中的粗体文本。

除了可以指定一些通用属性外,还可以指定以下几个属性:

7、<td>标签

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

  • colspan:指定该单元格跨多少列,该属性值就是一个简单的数字。
  • rowspan:指定该单元格可横跨的行数。
  • height:指定该单元格的高度,该属性值既可以是像素值,也可以是百分比
  • width:指定该单元格的宽度,该属性值既可以是像素值,也可以是百分比

  例如以下例子:

    

    
表格的跨行与跨列
跨2行的单元格 普通单元格
普通单元格
跨2列的单元格
普通单元格 普通单元格

 

浏览效果如下:

 

 

 

 

转载于:https://www.cnblogs.com/web12/p/9886181.html

你可能感兴趣的文章
RedHat Enterprise Linux 6配置Xmanager 4
查看>>
用户需求:只能在浏览器中浏览excel文件,不允许user下载excel文件
查看>>
ruby去消费kafka的数据并灌入hbase,git项目位置
查看>>
mysql-proxy win7 下实现读写分离
查看>>
毕设问题小记——No Dialect mapping for JDBC type:-1错误
查看>>
TCP长连接与短连接的区别
查看>>
ftp+samba+quota+rsync+inotify
查看>>
php版本差异现象
查看>>
通过 U 盘启动重装 macOS 系统
查看>>
百度员工离职总结:如何做个好员工?
查看>>
苹果地图(MKmap)获得附近的信息
查看>>
Red Hat Enterprise Linux Server release 6.3下Nagios平台的搭建
查看>>
Docker 1.12 实战 (三)容器部署
查看>>
JVM系列:jinfo命令详解
查看>>
iOS开发那些事-关于性能优化–选择nib还是故事板的讨论
查看>>
你觉得当你老了以后,最后悔的会是什么?
查看>>
Android 热修复原理
查看>>
nginx,apache,mysql,php=namp配置始末
查看>>
vsftpd不支持目录软链接的解决办法
查看>>
Java中byte与16进制字符串的互转
查看>>