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
小黄人事件营销isp认证 网络信息安全证书单位主要网络安全业务搜索引擎营销包括免费建建网站2016中国网络安全事件太原网络营销网络安全工作室网络营销降低成本email网络营销的现状国家网络安全相关规定镜花水月是一个虚幻的大世界,原来花月容就是那个沉睡的、姓庄的远古人。 觉醒的花月容,意味着镜花水月大世界的崩塌。 “花郝岳袁”组合,他们在一次次跌宕起伏的并肩战斗中,彼此产生了越来越深厚的感情羁绊。对于他们的不舍,花月容不得不有所抉择。 永生不死、绝对自由的造物主身份,花月容会放弃吗?……天道紊乱,天地之间产生了不知名的共鸣,新的生物被创造出来,不过…这种生物需要附着在生命体之上… 人类称它们为…丧尸! “你知道什么最令人难过吗?” “被自己的‘血亲’杀死” “最庆幸的呢?” “我复活了,不过…此复活非彼复活…” “后来呢?” “后来啊…这一切都是阴谋” “那你是谁?” “最适合化身为天道意识的人” “那我呢?我是谁?” “一个阴谋” “你说的此复活非彼复活是什么意思” 穿着黑色大衣的人叹了口气“我复活到了…亿万年之前” 赢宴…应验…我的出生或许也是算计罢!黑色风衣的人如此想到“有请我的世界个人pk赛冠军陆瑜先生上台领奖!” “有请我的世界跑酷竞速赛冠军,陆瑜先生上台领奖。” “有请起床战争总局赛FMVP选手,陆瑜先生上台领奖!” “有请我的世界红石挑战赛冠军,陆瑜先生上台领奖!”  …… 陆瑜:“能不能给我搬一把椅子上来,领个奖跑上跑下怪累的。” “对了,麻烦再给我准备一辆货车 ,我怕奖杯太多,待会带不走。” “谢谢,有请下一位嘉宾给我颁奖。” “你小子莫装逼!装逼可是要……” 轰隆隆—— 全能玩家陆瑜被雷劈死后,竟然转生成方块大陆的村民。 还是个傻子! 幸好,游戏的Minecraft的系统还在,成为傻子村民陆瑜从零开始方块大陆的生活。 【恭喜解锁一键砍树MOD!】 【恭喜解锁食物工艺MOD!】 【恭喜解锁拔刀剑MOD!】 “陆瑜,你怎么做到的?” “阿巴阿巴阿巴。” 陆瑜不知道,不关陆瑜的事儿。一个九零后年轻人一生的梦想就是能和自己相恋三年的女友组建一个温馨的小家,奈何却败给了房子车子彩礼,正当伤心欲绝生无可恋之时,死党一个电话改变了他的一生,也遇到了生命中真正属于自己的那个人,,,,,,邢毅开车送公司经理亲属回乡下,回来遇到暴雨将他冲进山洞,被同事从工厂深水泵井里救出,意外发现自己重生回到二十五年前。 前世上,他二十五岁时进入锦绣县宏达道桥公司,这里有高中时的同学,公司的骨干精英,未来的掌舵者。然而并没有得到同学的关照,反而遭遇冷落,被瞧不起。 他干的是混泥土搅拌工,钢筋帮扎工,搬运工等等,二十五年都在基层一线,因能力弱,胆子小,没能耐,无法扭转自己的命运以及家庭生活面貌,妻子在邮电局做职员,屡被上司欺凌,儿子到就读年龄择校时门槛高耸,父亲被冤屈下放农村,母亲患病也未能进行最好的治疗……一句话,他一辈子活得类,窝囊,不值。 上苍安排,让他的人生再来一次,从此他的工作,事业,爱情,父母、家庭,孩子……且看他怎样展开,怎样掌控渐次而来的机会,怎样应对一并降临的竞争和阻碍,完成新的使命,从而实现人生逆袭。2120年,人类科技水平再次迈上了新台阶。 新种族的诞生,能令意识长生不死的虚拟元宇宙世界,可用时间抗衡绝症的冰冻技术,崭新的资本角斗场……眼花缭乱的出现在了地球原住民的眼前。 人类与AI如何共存? 苟且偷生和自然死亡,哪一个更有尊严? 迷茫,对抗,宣泄,呐喊,似乎已成了常态…… 张云溪十八岁生日时,被保姆杀了全家,他怀揣着疑惑来到了一个叫青山神学院的地方。 [无系统] [无金手指] [智谋] 从年幼的爱情,到少壮年时的从军,到最后薨。少年从幼稚走向成熟,从彷徨走向坚定。昆明,又叫春城,这是现在众人皆知的名字;但很少有人知道,这座约三万年前,即有人类生活的地区,就是古代佛经里经常提到的“膳戒城”。而更是鲜为人知的是,这座城市又叫龙穴。有龙穴的地方就有龙,有龙的地方就会有一个神秘而又古老的职业,那就是锁龙人。 而在民国时期,战乱不止妖孽横行,锁龙人在昆明一带活动频繁,大部分锁龙人降妖除魔的事都发生在这座城市之中,只是时间久远,不一定全是真事。我说你听,这是一个关于锁龙人的故事。身患绝症的叶文偶得太极拳的真传,并且觉醒了弘扬武学系统! 只要他用武学影响更多人,就能获得积分,兑换顿悟机会,获得各种高阶武学! 甚至,治好自己的病。 从此,叶文开启了他的练武直播! 拳震所有武林宗门,脚踏世间不服之人! 只有你想不到的招式,没有我治不了的高人! 所有人都要恭恭敬敬地,在键盘上叫一声“武神”。 叶文:“货真价实的太极拳要不要学?飞檐走壁的梯云纵要不要了解一下?不要?早晚你要跪地求着我要!”他似乎命中注定一生孤独,身边所有亲近之人皆难逃厄运。大敌当前,他空负一身武学却有仇难报。纵然同命运万般抗争,终究仍不免红颜薄命,故友凋零。他唯有斩断尘世纠缠再次只身远走西北大漠,一如当初孤身一人走出茫茫长白山林。天地间回荡起悲怆的歌声……  
网络安全实际案例分析 信息安全部副主任,-12017网络安全挑战赛 企业网站制作 徐州 北大信息安全在哪个学院 微网站定制 深圳网站设计美工 定制网站案例 网络安全领域 国际会议 数字证书 网络安全 网站迭代 升职加薪的障碍分析咨询【www.richdady.cn】 无形干扰对工作效率的影响咨询【www.richdady.cn】 家宅磁场【www.richdady.cn】 内心恐惧胆怯咨询【www.richdady.cn】 如何预防冤亲债主的干扰?咨询【www.richdady.cn】 事业不顺的职场提升路径有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 婚姻生活不顺的前世因果【www.richdady.cn】√转ihbwel 强迫症咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份的故事有哪些经典案例?咨询【www.richdady.cn】√转ihbwel 事业不顺的职场建议有哪些?咨询【σσЗ8З55О88О√转ihbwel 前世缘份的故事如何改变命运?咨询【σσЗ8З55О88О√转ihbwel 外灵干扰的前世因果【企鹅383550880】√转ihbwel 忧郁症咨询【σσЗ8З55О88О√转ihbwel 人际关系不好对工作的影响咨询【www.richdady.cn】√转ihbwel 事业不顺的职场突破【σσЗ8З55О88О√转ihbwel 事业不顺的职场提升【企鹅383550880】√转ihbwel 人际关系不好的原因分析【www.richdady.cn】√转ihbwel 阴间生活的前世记忆【微:qq383550880 】√转ihbwel 失业的前世记忆【微:qq383550880 】√转ihbwel 家庭关系的相处之道有哪些?【企鹅383550880】√转ihbwel 网络安全 资质 网站公司成功案例怎么写 树莓派做信息安全 企业网络安全设计 4.许可e-mail营销的三大基础是什么?分别解决哪三个问题? 网络安全实际案例分析 湖南网页设计培训网站建设 珠海网站策划公司 互联网金融 网络安全 实行信息安全等级保护 上海市网络与信息安全协调小组 淄博做网站公司有哪些 上海企业网站建设如何用代码设计一个网站有前台和后台一般用什么语言设计网站 下载建网站 信息安全应急处理办法 南通动态网站建设 无锡网站 微信营销成功的企业 病毒性营销的实例 保障信息安全什么是网络安全等级保护 网络安全评价标准主要 福建省网络与信息安全测评中心 上海企业网站建设如何用代码设计一个网站有前台和后台一般用什么语言设计网站 建博客网站 网站优化怎么做 网络营销的知识要求 手机网络营销的案例 京东营销策略有哪些 莱州网站建设 信息安全服务架构图 网站设计文档 4.许可e-mail营销的三大基础是什么?分别解决哪三个问题? 网站制作案例怎么样 国家网络安全教育 广州网络信息安全测评中心,-1 京东营销策略有哪些 网站设计案例 上海企业网站建设如何用代码设计一个网站有前台和后台一般用什么语言设计网站 淄博做网站 病毒性营销的实例 郑州个人做网站 信息安全应急处理办法 广州网络信息安全测评中心,-1 信息安全有什么认证 网络安全法立法内容 淄博做网站公司有哪些 大良营销网站建设平台 国家信息安全部门 信息安全服务架构图 数字证书 网络安全 公众号营销模式 信息安全部副主任,-12017网络安全挑战赛 国家信息安全部门 深圳电商营销策划公司排名 互联网时代背景下的网络信息安全 网络安全研究方法 深圳电商营销策划公司排名 网站建设公司深圳 悬浮滚动的网站jquery在线qq客服咨询代码 有6套皮肤可选 定制网站案例 网络营销网站功能 网络安全领域 国际会议 昆明优化营销 西安模板网站建设 网站外包多少钱 长沙 做网站 保障信息安全什么是网络安全等级保护 免费建立个人网站 网站设计价格大概是 信息安全与管理是干什么的 山东网站优化公司 营销swot自我分析ppt 信息安全章程范本 4.许可e-mail营销的三大基础是什么?分别解决哪三个问题? 网络营销实训课程ppt 设计网站需要考虑哪些 isp认证 网络信息安全证书 临朐做网站 网络安全概述ppt 网络营销服务有哪些方面 信息安全有什么认证 终端信息安全解决方案 注册网站网 网络信息安全协会电话,-1 网络营销服务有哪些方面 外贸网站的建设 小米营销策略 信息安全等级保护项目计划书 北京建设网站公司 网络安全概述ppt 信息安全测评资质证书 网络安全关乎个人安全 网站建设公司深圳 莱州网站建设 手机网站开发技巧 广西信息网络安全协会 网络安全的第一道防线是 国家网络安全局官网 微信点对点精准营销 厦门有没有做网站的 网络安全讲竞赛 讲话 福州seo营销 网络安全的基本特征有 中国网络安全论坛 中国信息安全协会会长 网站迭代 廊坊设计网站公司 惠州外贸网站建设 太原网络营销 运营商信息安全产品 成都的信息安全公司 成都建设网站首页 设计网站需要考虑哪些 网络营销相关资讯 公安局网络安全怎么进 广州旅游网站建设设计 seo网站诊断 网站设计文档 免费建立个人网站 seo是网络营销吗 网站设计文档 成都的信息安全公司 病毒性营销的实例 信息安全阶段,-1 互联网金融 网络安全 注册网站网 国家网络安全相关规定 信息安全技术 信息系统安全等级保护测评要求,-1 网络安全 资质 网络安全评价标准主要 网站制作案例怎么样 互联网时代背景下的网络信息安全 包年营销 龙华网站建设 信息安全技术图片