html table表格内容折叠,table_标签 | Elements_HTML_参考手册_非常教程

table

HTML

标记遗漏没有,起始和结束标签都是强制性的。

允许父母任何接受流内容的元素

允许ARIA角色任何

DOM界面HTMLTableElement一个可选

元素,

零个或多个

元素,

一个可选元素,

以下任何一项: 零个或多个

元素

一个或多个

元素

一个可选

元素Tag omission None, both the starting and ending tag are mandatory. Permitted parents Any element that accepts flow content Permitted ARIA roles Any DOM interface [`HTMLTableElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement)

属性

该元素包含全局属性。此页面上列出的以下属性现在已被弃用。

align此枚举属性指示如何在包含文档中对齐表。它可能有以下值:left:表格显示在文档的左侧;

center:表格显示在文档的中心;

right:表格显示在文档的右侧。

用法说明不要使用此属性,因为它已被弃用。该

之前火狐4,火狐也支持middle,absmiddle和abscenter值作为同义词center,仅在特殊模式。

bgcolor属性定义表格的背景颜色。它由sRGB中定义的6位十六进制代码组成,前缀为'#'。该属性可以与十六个预定义颜色字符串中的一个一起使用:​black = "#000000"​green = "#008000"​silver = "#C0C0C0"​lime = "#00FF00"

​gray = "#808080"​olive = "#808000"

​white = "#FFFFFF"​yellow = "#FFFF00"

​maroon = "#800000"​navy = "#000080"

​red = "#FF0000"​blue = "#0000FF"

​purple = "#800080"​teal = "#008080"

​fuchsia = "#FF00FF"​aqua = "#00FFFF"

使用说明:不要使用此属性,因为它已被弃用。

border此整数属性以像素为单位定义表格周围框架的大小。如果设置为0,则该frame属性设置为void。

使用说明:不要使用此属性,因为它已被弃用。该

cellpadding属性定义了单元格的内容与其边框之间的空格,显示与否。如果cellpadding的长度以像素定义,则此像素大小的空间将应用于单元格内容的所有四边。如果长度是使用百分比值定义的,则内容将居中并且总的垂直空间(顶部和底部)将表示该值。总水平空间也是如此(左侧和右侧)。

使用说明:不要使用此属性,因为它已被弃用。该

cellspacing属性以百分比值或像素定义两个单元格之间的空间大小。该属性在水平和垂直方向上应用到表格的顶部和第一行的单元格之间,表格和第一列的左侧,表格的右侧以及最后一列和底部表和最后一行。

使用说明:不要使用此属性,因为它已被弃用。

frame此枚举属性定义了必须显示表格周围框架的哪一侧。它可能有以下值:​above​below​hsides​vsides

​lhs​rhs

​border​box

​void

使用说明:不要使用此属性,因为它已被弃用。该

rules此枚举属性定义规则(即行)应出现在表中的位置。它可以有以下值:无,表示不会显示任何规则; 它是默认值;

行组(由定义的之间被显示的组,这将导致的规则,

和元素)和列组之间(由定义和元素)仅;

行,这将导致规则在行之间显示;

列,这将导致规则在列之间显示;

所有这些都会导致规则在行和列之间显示。

注意:规则的样式依赖于浏览器,不能修改。

不要使用此属性,因为它已被弃用。应该使用CSS定义和设置规则。在应用border属性到合适的,

,,或元素。

summary属性定义了汇总表格内容的替代文本。通常情况下,它允许有盲人屏幕浏览网页的视障人士获取关于表格的信息。如果通过此属性添加的信息对未视觉障碍的人也有用,请考虑使用

替代方法。摘要属性不是强制性的,当元素履行其职责时可以省略。

用法注意:不要使用此属性,因为它已被弃用。相反,请选择其中一种方法来添加表格的说明:在表格周围使用散文(这种方法语义较少)。

在表格

元素中添加说明。

在表格的元素内添加一个元素的描述。

并在旁边添加散文中的描述。

,并将元素中的描述添加为散文

调整表格以便不需要描述(例如使用

和元素)。

width属性定义了表格的宽度。宽度可以由像素或百分比值来定义。百分比值将由放置表的容器的宽度来定义。

用法注意:不要使用此属性,因为它已被弃用。应该使用CSS定义和设置规则。改用width属性。

示例

简单的表格

JohnDoe
JaneDoe

更多示例

Simple table with header

First nameLast name
JohnDoe
JaneDoe

Table with thead, tfoot, and tbody

Header content 1Header content 2

Body content 1Body content 2Footer content 1Footer content 2

Table with colgroup

CountriesCapitalsPopulationLanguage
USAWashington D.C.309 millionEnglish
SwedenStockholm9 millionSwedish

Table with colgroup and col

LimeLemonOrange
GreenYellowOrange

Simple table with caption

Awesome caption
Awesome data

规范规范状态评论HTML Living Standard规范中'表元素'的定义。Living Standard​

HTML5该规范中'表元素'的定义。建议​

浏览器兼容性FeatureChromeEdgeFirefoxInternet ExplorerOperaSafariBasic Support1(Yes)1(Yes)(Yes)(Yes)

align1(Yes)1(Yes)(Yes)(Yes)

bgcolor1(Yes)1(Yes)(Yes)(Yes)

border1(Yes)1(Yes)(Yes)(Yes)

cellpadding1(Yes)1(Yes)(Yes)(Yes)

cellspacing1(Yes)1(Yes)(Yes)(Yes)

frame1(Yes)1(Yes)(Yes)(Yes)

rules1(Yes)1(Yes)(Yes)(Yes)

summary1(Yes)1(Yes)(Yes)(Yes)

width1(Yes)1(Yes)(Yes)(Yes)FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS SafariBasic Support11(Yes)1(Yes)(Yes)(Yes)

align11(Yes)1(Yes)(Yes)(Yes)

bgcolor11(Yes)1(Yes)(Yes)(Yes)

border11(Yes)1(Yes)(Yes)(Yes)

cellpadding11(Yes)1(Yes)(Yes)(Yes)

cellspacing11(Yes)1(Yes)(Yes)(Yes)

frame11(Yes)1(Yes)(Yes)(Yes)

rules11(Yes)1(Yes)(Yes)(Yes)

summary11(Yes)1(Yes)(Yes)(Yes)

width11(Yes)1(Yes)(Yes)(Yes)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table 是一个基于 Bootstrap 的 jQuery 插件,用于创建简单而强大的表格。它支持很多功能,包括:排序、分页、搜索、多语言等等。下面是 Bootstrap Table 的使用方法: 1. 首先,在 HTML 文件中引入 Bootstrap Table 的 CSS 和 JavaScript 文件: ```html <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.js"></script> ``` 2. 在 HTML 文件中创建一个表格: ```html <table id="table"></table> ``` 3. 使用 JavaScript 初始化表格: ```javascript $(function () { $('#table').bootstrapTable({ url: 'data.json', // 数据来源 columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '名称' }, { field: 'price', title: '价格' }] }); }); ``` 4. 在数据源中提供数据: ```json [{ "id": 1, "name": "商品1", "price": 100 }, { "id": 2, "name": "商品2", "price": 200 }] ``` 上面的代码展示了如何使用 Bootstrap Table 创建一个简单的表格。其中,`url` 属性指定了数据来源,`columns` 属性定义了表格列的信息。你可以根据需要自定义表格的样式和功能,例如添加分页、搜索等功能。更多的使用方法可以参考 Bootstrap Table 的官方文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值