表格标签table深入了解

前不久为了寻找表格(table)所包含的主要标签,一直在寻找着,找到当然就是跟大家一起来分享一下。

表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup,针对每个的介绍如下:

<table>
table标签可定义表格。在 <table> 标签内部,你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

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

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

<tr>
在表格中定义一行。

<td>
定义表格中的一个单元格。

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

<tbody>
定义一段表格主体(正文)。
使用 <tbody> 标签,可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。
虽然您可能想包括一个,甚至会在表格中包括两个或更多个 <tbody> 标签,但是我们建议最好在表格中没有 <tbody> 标签。
在 <tbody> 标签中,只有 <tr> 标签可以定义表格行。并且一旦定义,一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个 <tbody> 跨越到另一个 <tbody> 中。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

<tfoot>
定义表格的页脚(脚注)。

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

<col>
定义某个表格中针对一个或多个列的属性值。您只能在表格或 colgroup 中使用此属性。

<colgroup>
定义表格列的分组。通过此元素,您可以对列进行组合以便进行格式化。此元素只有在 <table> 标签内部才是合法的。
有两种方式来使用 <colgroup> 标签:一种是对几个同样的列进行简单的定义,另一种是将几个不同的列组合起来。

PS:以上内容都是来自w3school的,因为w3school在版权信息中标注了版权所有,保留一切权利。那我也就不转不编辑了,取其中一段,然后大家可以点直接查看某个标签的详细介绍。也可以查看表格(table)的介绍。

(0)

相关推荐

  • 表格标签table深入了解

    前不久为了寻找表格(table)所包含的主要标签,一直在寻找着,找到当然就是跟大家一起来分享一下. 表格标签主要包含的标签有table.caption.th.tr.td.thead.tfoot.tbody.col.colgroup,针对每个的介绍如下: <table> table标签可定义表格.在 <table> 标签内部,你可以放置表格的标题.表格行.表格列.表格单元以及其他的表格. <caption> caption 元素可定义一个表格标题.caption 标签必须

  • css列表标签list与表格标签table详解

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式,circle空心圆,square实心方块 有序列表常用decimal-leading-zero以0开头的数字,lower-roman.upper-roman小写.大写罗马数字,lower-alpha.upper-alpha小写.大写英文字母 ul.a {list-style-type: circl

  • Lesson02_01 表格标签

    第2讲 HTML语言的高级部分 表格标签 帧标签 表单标签 头元素 分区标签 表格标签 表格标签:<table></table> 属性名 作   用 bgcolor 表格的背景色 border 表格的边框的宽度 bordercolor 表格的边框颜色 bordercolorlight 表格的边框明亮部分的颜色 bordercolordark 表格的边框的昏暗部分的颜色 cellspacing 表格的单元格之间的间隔大小 cellpadding 表格的单元格的边框与内部内容之间的间隔

  • Lesson02_01    表格标签

    第2讲 HTML语言的高级部分 表格标签 帧标签 表单标签 头元素 分区标签 表格标签 表格标签:<table></table> 属性名 作   用 bgcolor 表格的背景色 border 表格的边框的宽度 bordercolor 表格的边框颜色 bordercolorlight 表格的边框明亮部分的颜色 bordercolordark 表格的边框的昏暗部分的颜色 cellspacing 表格的单元格之间的间隔大小 cellpadding 表格的单元格的边框与内部内容之间的间隔

  • Android Flutter表格组件Table的使用详解

    目录 Table.TabRow.TabCell 小结 之前开发中用到的表格,本篇文章主要介绍如何在页面中使用表格做一个记录. Table组件不同于其它Flex布局,它是直接继承的RenderObjectWidget的.相当于是一个独立的组件,区别与其他系列组件. Table.TabRow.TabCell 惯例,先看下Table相关的构造方法: Table({ Key? key, this.children = const <TableRow>[],//行列表 表示多少行 this.column

  • js处理表格对table进行修饰

    js处理表格 1.行颜色间隔显示 css样式:两个选择器 复制代码 代码如下: <style type="text/css"> .one{ background-color:#33ffcc; } .two{ backgound-color:#ffff66; } </style> <script type="text/javascript"> function trcolor() //控制间隔行颜色显示不同 { var tabNod

  • 教大家轻松制作Bootstrap漂亮表格(table)

    学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己做一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容. 我们应该庆幸自己活在这样一个互联网时代,开放.共享.很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架,共享出来让我们使用,使得我们轻松就能实现很漂亮的效果. 下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上,我们只需要写很少的代码就能轻松制作漂亮表格. 比如我们要制作

  • jQuery操作表格(table)的常用方法、技巧汇总

    以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){    $(this).children('td').addClass('hover')}, function(){    $(this).children('td').removeClass('hover')}); 方法二: 复制代码 代码如下: $("#table1 tr:gt(0)").hover(function()

  • JavaScript获取表格(table)当前行的值、删除行、增加行

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Js获取 table当前行的值</title> <script language=javascript> var selectedTr = null; function c1(obj) { obj.style.back

  • 动态表格Table类的实现

    复制代码 代码如下: /// <reference path="Lib.js" /> /// <reference path="DabaBinder.js" /> //引入DataBinder.js include("DataBinder.js"); /* <table border="1"> <thead><tr> <th></th> <

随机推荐