Table markup

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Table options

Name Class Description
Default None No styles, just columns and rows
Basic .table Only horizontal lines between rows
Bordered .table-bordered Rounds corners and adds outer border
Zebra-stripe .table-striped Adds light gray background color to odd rows (1, 3, 5, etc)
Condensed .table-condensed Cuts vertical padding in half, from 8px to 4px, within all td and th elements

Example tables

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

<table class="table">
  
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

<table class="table table-striped">
  
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

<table class="table table-bordered">
  
</table>
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

<table class="table table-condensed">
  
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
Full name
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
信息安全风险动态管理办法深圳信息安全经理,-1上海品牌网站建设公司国内外信息安全研究现状及发展趋势常见的网络安全产品营销新媒体sem营销策划方案建湖网站优化公司蓝海国际版网站建设网络安全防护有哪些苦逼的上班族陆宇,在一次机缘巧合下,获得了上界仙人留下的传承秘宝,开启了搞怪的修仙之路。 陆宇:说好的灵气复苏呢?怎么来了个元力复苏,坑爹呢? 就这样,新时代开幕了,人类在元力复苏下,开启了全民修武时代,而选择了修仙的陆宇则藏在一群武修中猥琐发育,踏上了漫漫登仙路。[纷扰如迷雾,逍遥且徐行] 入梦方醒,方觉大道维艰。从小世界意识回归醒来的大光头,抬手摸着自己脑瓜低吟着“无量天尊。” 看着身边传讯符,回忆着这次化身从婴儿到意气少年,又度过颠簸抗争的青年路程,往后便好似不记得自己有过壮年中年似的,回首时已在疑惑困顿中到了老年。 化身一生寂寥糊涂过,只留下一首连通顺都算不得的唯有悔恨的“一年一岁婴至此,一时一秒得与失。稻草压身抵千斤,默然回首如何持。神杂性善恶七情己,人和人白白入灰多。己识多实错分年,霎那蹉跎七十婴。” 又有那好似从老年到青年活着的感慨:“何所思何所愚何所怠,七十婴五十少三十明。天色长空人自老,道存事存时不存,上下空有物竞乾坤灭,事合人思万中无一寻。谁家孩儿拿那炮竹当烟花鸣一曲,潜游无欲无求后同求不在求呢。苦无一用怎是迷生。” 由于自然环境的破坏导致这世上出现了一批能力者,而恽晨就是其中之一。 原本想一直隐藏自己身份的恽晨却碰巧遇到了改变他一生的世界少女——林夕。 而这个世界的真相也将逐渐浮现.......男主是一个名字为鱼的奴隶。他拥有着强大无比的技能,是不可能战胜的存在。但因为身份是一个卑贱的奴隶所以他从不出风头,也不称王称霸。他既不敢爱也不敢恨,更兼性格软弱,遇事像驼鸟一样只知道一味的躲一味的逃,却又极有女人缘,展开了一段又一段的情缘。 女主是一个名字为蛇的名门大小姐。如果说世界上有完美的女人那一定是她。她不光美丽,而且拥有出众头脑和经营的手腕,她亲手将自己的家族打造成不可一世的巨头,并统治众生……但她和鱼…… 男配熊将军,一个真男人,也是无敌的男人。他就没有输过。 女配张钟菊,看上男主的好女人。 本作是讲爱与勇气的。本作并不那么欢乐,充满了无奈和悲伤,明明有情人可以终成眷属,但…… (全书近百万字,分上下两卷,已经完结)这个男人自创功法狂龙炼体术 这个男人赢领人类走向辉煌 这个男人一生屠魔 却不想在虚弱之时被魔主偷袭 拼命反杀 那一战 天地崩裂,诸神心慌 魔主不甘死亡 耗尽毕生修为进入时间轨道 重修一世 他因神印失去了神智 屠尽魔族后见光就砍,见人就杀 他在众人的哭喊声短暂回复了神智 为了解决眼前的状态 为了人族的未来 为了完成他的梦想 双手结印 在众族的泪水之下 重修一世…… 红月当空,全球骤变。拥有力量,你就高高在上,应有尽有,没有力量,你就只能任人宰割。危机爆发,众种族林立,丧尸,异兽,鬼种,人类。九转山河,浩瀚天下,试问天下,谁与争锋!起步比别人晚的颜逸能否追赶众人的脚步,在末日之中杀出一条属于自己的路。当吴狄秉着爱国,诚信,敬业,友善的优良品质,混进金庸先生笔下的武侠世界当中,成为一名武当道士时 面对上辈子无数个夜晚在床上幻想过的武功秘籍,看见那一位位老爷子笔下倾城倾国的女猪脚们,吴狄表示 别无选择,唯有制霸江湖!不可一世的玄帝重生地球,发誓猥琐发育,靠着茅台修炼,被迫学习泡妞,而让他没想到的是,岳母竟是前世灭他满门且与他同归于尽的女帝。得知这个消息的唐玄虎躯一震,嘴角上扬:“既然如此,我有一个大胆的想法……”无籍小辈,用生活中琐事的汇集,感悟人生,达到人生境界的升华......当代毕业大学生在床上睡觉,窗外天雷滚滚,魂穿到一个充满元素的修真世界,修雷法,对强敌,结好友,泡妹子,揭开一个世界的隐秘,究竟是大梦一场,还是真实存在。
河南信息安全电子版 网络安全工作创新 无锡网站推广 手机网站的制作 网络安全公司起名 国家推进网络安全()服务体系建设 展示型网站建设流程图 广州微信营销手机 深圳信息安全经理,-1 美国网络安全 会议 国际网络营销教材 佛山网站建设服务器 广东网络信息安全基地 中国信息安全测评中心怎么样 开展网络安全认证检测 广州微信营销手机 常州网站制作包括哪些 近期网络安全论坛 网站数据库制作 2014 信息安全事件 营销模式摘要 中国信息安全测评中心广东 正规的搜索引擎营销企业 营销模式摘要 网络安全法逐条解读 营销新媒体 网络安全及信息化 制作网站的步骤 便利的龙岗网站设计 精品网站建设公司 展示型网站建设流程图 政府网站制作建设 川大信息安全研究所 整合营销公司简介 工业控制系统信息安全第1部分:评估规范 网络安全改造 网站数据库制作 蓝海国际版网站建设 网站设计品 网络安全产品备案 网络营销机会分析报告 怎样建立自己的网站 房地产网站建设 上海品牌网站建设公司 开展网络安全认证检测 sem搜索引擎营销案例 sem营销策划方案 美国网络安全 会议 深圳网站开发公 旅游品牌网络营销策略 e点营销 网络安全防护有哪些 外贸b2c网站建设 web网络安全教程 网络安全知识教育平台 美国网站空间 网投网站制作 信息安全评测机构 大数据网络安全 网络安全预警工作情况 网络安全技术对抗赛 长春市网站推广 精品网站建设公司 网络安全公网接入 成都市网络安全协会 中国信息安全应急中心 网络安全建设论坛 苏州网站推 开发微网站 订阅号营销益阳做网站 网络安全助手 便利的龙岗网站设计 信息安全实验 pdf 南山网站建设公司 互联网信息网络安全技术措施解决方案 信息安全技术 web应用安全扫描产品安全技术要求 国家推进网络安全()服务体系建设 企业的网络营销案例分析ppt模板 医院营销推广 网络安全攻击的分类 网络安全及信息化 邮件营销推广 2013 年中国互联网网络安全报告 深度科技商业官方网站 东莞做网站it s 嘉兴网站开发 个人信息安全调查报告ps制作网站过程 2014 信息安全事件 简述网络营销漏斗原理 禅城区网站建设公司 怎么建com的网站 信息安全相关政策法规 信息安全技术 web应用安全扫描产品安全技术要求 采用模版建网站的缺点 网络营销事件介绍 软件网络安全 2017中国网络安全论坛 网络营销推广协议 河南信息安全电子版 无锡网站推广 黄冈网站建设 网络安全最基本技术是 川大 信息安全竞赛 网上营销方法 网络安全与信息测评 便利的龙岗网站设计 郑州电子商务网站建设 app 网络安全 证书 网站设计品 中国信息安全测评中心广东 中国信息安全测评中心广东 2017网络安全奖学金 个人网站自助建站 北京网络安全展 甘肃营销型网站制作 我需要网站 企业微信社群营销案例北京搜索引擎营销外包 深圳做网络安全公司 做外贸网站 营销调研方法 2016信息安全联盟大会 营销者网站 美国网站空间 网络安全 ips什么是工业网络安全 网络安全最基本技术是 信息安全专家 能力 国家电网 信息安全,-1 长春市网站推广 怎么把网站黑掉 第十届全国信息安全 网络安全预警工作情况 东莞做网站it s 北京短信营销 网络安全运维周报 网站数据库制作 信息安全实施计划 深圳信息安全经理,-1 石家庄网站制作哪家好 商城购物网站有哪些模块 android 网络安全 网络安全法逐条解读 营销模式摘要 网上营销方法 做外贸网站 展示型网站建设流程图