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
网络安全 乌云信息安全联合实验室精湛的佛山网站设计天融信信息安全实验室中软网络安全考试服装网站 欣赏信息安全五个保护等级重庆新闻营销服务温州网站建设案例易尚网络营销公司死刑犯9527被执行枪决,竟然意外重生,不服就干,血战强敌,强行逆袭,逆天改命,我命由我不由天!看一个死刑犯如何叱咤风云,问鼎天下。 修炼界流传着只要跟沈于安成为朋友便会被他给带歪。 只因他满口的歪道理,而你会在不知不觉间认同他的道理,甚至是对他所说出的每一个道理都近乎于疯狂的崇拜,病态的崇拜。 他的歪道理甚至是能够帮助他人顿悟。 直到有一天沈于安告诉世人其实不需要苦修就能提升修为,这让人一听不就是妥妥的歪理吗? 众修士:“不苦修怎能提升修为?” 沈于安:“那你们用过我研究出来的道具没?” 众修士:“什么玩意?” 沈于安:“都是一群土鳖。” 众修士:??(◣д◢)?? 本书又叫:(思想不端正,歪理来矫正) 本书又叫:(本公子有一口流利的歪道理) 本书又叫:(沈大公子的歪道理满天飞) 本书又叫:(我的歪道理是用来引导人的) 本书又叫:(异界大哲学家,大道具师) 本书又叫:(唯我沈大公子的歪理能通神)民国小道士玄虚被系统团子陪伴跨越命运长河,成就命运魔神。是混沌中众位魔神的阴谋算计,还是临死时回光返照的大梦一场? 初见鸿钧,是命运分支的偶然,还是命运运行的必然? 本体沉睡中不断变强,是冥冥中的算计,还是命运的馈赠? 纯粹的混乱是否真的没有意义存在? 世界的毁灭能和意识有多大的联系? 当元宇宙的概念引入适合野蛮生长的文明,对生命体是好是坏? 杀兄弑父能被文明的生命体称为英雄,好人不长命,祸害遗千年。又当又立的恶心生命体真实存在,是真是假? 众生为棋子,如何让他们在虚伪和愚昧中逐渐消亡? 当有棋子超脱棋盘,万法皆空是否已成定局? 成住坏空的佛家魔咒;孤阴不生,独阳不长的道家真理是不是所有世界的真谛? 绝对的理智,绝对的理性,世界会因此变好,还是持续变坏? 混沌中魔神们的俄罗斯套娃,无数的洪荒在命运中起起伏伏。 修仙的真实世界最纯洁是怎样,最残忍又是怎样? 让牲畜们相信黑森林法则,零和博弈,不要让他们有反抗的机会。塑圣魂,觅长生,热血前行,登仙道!七年征战,封七珠王帅。 怎料老婆被关鸭圈,被人绑走还要割走肾脏,女儿下落不明,动我妻女,诛杀九族!2155年,大战之后的一百多年,地球上一片疮痍,人们依旧生活在物资匮乏的世界之中,此时,由地球联合政府授意,一款由中文meta公司开发的元宇宙游戏《天下》即将上线,这是一款号称人类“第二世界”的游戏,在这款游戏里你可以获得一切,金钱、物资、武器、地位,应有尽有。 少年林昭,一个意外成为植物人的贫民区机车少年,偶尔获得了游戏里的一个内测机会,是否能改变命运,重启新的人生? …… 这款《天下》游戏的故事背景空前强大,融合了各大爆款IP,《修罗武神》《万古第一神》《九星霸体诀》《超级兵王》……你可以在中文IP宇宙里体验各种奇异的世界,不同的人生! 本书又名《剑仙元宇宙》!我只想安安稳稳送个外卖,哪想到有一天居然真的黄袍加身! 还是在异界!! 送外买送到异界的恐怕只有我一个了吧? 看着满目荒凉的异界,杨一暖苦笑一声,开始了异界探险之旅… 外卖是不会再送了,星际贸易才是我的主业! 玻璃球换黄金,香水换翡翠,一个黑心倒爷就此诞生… 异界投资建工厂,寻宝探矿搞开发,从今天开始,我就是杨总! 新世界首富,异世界征服者,就此诞生!!不记得从什么时候开始,霉运成为了韩舟生活的主旋律,在又一次错过了研究生面试之后,忍无可忍的他终于爆发了,不过这一次迎接他的不是残酷的现实,而是属于他自己的金手指。 人与邪神的交锋从来都是至死不休,在这神秘的超凡世界里,谁能登上神座。 在黎明到来之前,总有人要在黑暗中扫清障碍。 他是偶尔的疯子,守夜军的一员,这是属于他的故事。  两世为将定四方,难挡帝皇灭臣亡;   转生成王夺山江,何奈毒女害朕殇。   重生晓破千奇门,首窥幕手控轮回;   从师授德万生崇,傲世临尊掌众生。   行医识道天地耀,千百道术唯吾晓;   九世九生归一术,十世十命造一诀。 他历经九世,掌握万千知识;他摆脱轮回,开始崭新十世生活! 被陷害的懦弱之人,终含冤身陨! 被掌控的轮回之人,终自由重生! “你的冤,我定替你洗刷!” “你的仇,我定为你雪恨!” 他立下壮志,淬体三年,终成魔体。 当他出关,就碰到此生之敌…… 我是人族之子,魔族后辈,你们却以我为耻! 就凭所谓的太子公主? 尊贵的人族太子?却不堪我一招之敌; 桀骜的魔族公主?仍不敌我一手之威。 此世我便要压你人魔二族,傲临十方!
网络信息安全教学实验平台 国家信息安全相关部门 狼客网络营销 网络安全指标 云南信息安全测评中心 山东省网络安全技能 什么是病毒营销?公司网站建设推广 网站制作 常州 b2c购物网站的品牌营销传播策略研究——以凡客诚品为例 网络安全实验 与女友前世的因果关系咨询【www.richdady.cn】 有官司的心理调适咨询【www.richdady.cn】 解决孩子不爱读书的问题【www.richdady.cn】 心特别累咨询【www.richdady.cn】 强迫症的家庭支持【www.richdady.cn】 心特别累的情感释放咨询【微:qq383550880 】√转ihbwel 头脑混沌的案例分享【σσЗ8З55О88О√转ihbwel 特殊学校的前世影响咨询【σσЗ8З55О88О√转ihbwel 婴灵的超度仪式【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的梦境解析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的心理调适方法有哪些?咨询【微:qq383550880 】√转ihbwel 失业的自我提升咨询【www.richdady.cn】√转ihbwel 解梦的前世因果咨询【www.richdady.cn】√转ihbwel 孩子学习不好的前世因果【www.richdady.cn】√转ihbwel 不爱读书【企鹅383550880】√转ihbwel 纠纷的自我保护咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 迟缓儿的家庭支持【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子抑郁症的案例分享【σσЗ8З55О88О√转ihbwel 去世的父亲的去向解析【σσЗ8З55О88О√转ihbwel 前世缘份的故事如何改变命运?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 网络安全视频网址 网站类推广软文怎么写 天融信信息安全实验室 北邮信息安全找工作难吗 教育数据中心网络安全方案 免费网站域名申请 网络安全岗位面试问题 通州顺德网站建设 国家信息安全相关部门 设计公司网站 本地郑州网站建设 欧洲网络与信息安全局 什么是病毒营销?公司网站建设推广 深圳网站推广 山东省网络安全技能 营销策划网络课程 网络科技网站设计 网络安全专家服务 营销网站建设企划案例 网络营销学哪一块好 网站制作 常州 国家信息安全相关部门 网站建设的基本需求有哪些方面 曲靖网站建设 自创网站 国家信息安全工程类一级认证 提供网站建设的公司 黑客对网络安全的影响 网站类推广软文怎么写 网站差异 如何学营销 服装网站 欣赏 饥饿营销的作用 提升网络安全管理水平 工组部 信息安全 网络科技网站设计 网络渗透测试——保护网络安全的技术工具和过程 pdf 网络安全的主要技术 网站如何编辑 实名营销 营销网站建设企划案例 全国大学生电子设计竞赛信息安全技术专题邀请赛,-1 营销策划网络课程 信息安全保护等级划分 关于网络安全的大事件 重庆新闻营销服务 滴滴出行网络营销策略 东软网络安全 待遇 昆明做企业网站多少钱外贸最热门营销方式 狼客网络营销 全屏网站 h5做网站 关于网络安全的影视剧 勒索软件当前网络安全 实名营销 营销 作用 东软网络安全 待遇 什么是病毒营销?公司网站建设推广 深圳整合营销行业 网络营销体现什么营销理念 你在平时是否遭受过网络安全问题?是怎么解决的? 深圳网站推广 黑客对网络安全的影响 网络信息安全 杂志 汽车网站案例网页设计 网络营销的拓展方法 网络安全技术比较 衡水专业网站建设公司 信息安全 管理 手册 网络及信息安全 铁通 答案 搜索引擎营销的运作模式 做网站用动易siteweaver cms还是phpcms 云南信息安全测评中心 山东省网络安全竞赛 国家信息安全工程类一级认证 佛山外贸网站建设方案 汕头网站推广 本地郑州网站建设 广东 网络安全 微营销的目的 欧洲网络与信息安全局 龙岗网站建设 信息安全测评中心 编制 山东省网络安全技能 网络营销渠道成本 滴滴出行网络营销策略 茶叶网站建设 鹤壁网站制作 微营销的目的 网络安全监测工具 网站制作 常州 重庆新闻营销服务 上海营销推广公司 专业设计网站 kfc 计算机信息安全 淘宝营销理念 网站类推广软文怎么写 汽车网站案例网页设计 国云科技 信息安全,-1 网站信息安全扫描 网络营销售后服务小米信息安全相关的证书 英国 国家信息安全 校园网站制作模板 网站建设教程浩森宇特 网络营销app 天融信信息安全实验室 如何用jsp和access2003制作一个有后台的数据库的网站 衡水企业网站设计报价 广州微网站建设案例 网站备案不通过怎么解决 营销学术语 网站设计工作室 网络安全 乌云 如何用jsp和access2003制作一个有后台的数据库的网站 提供网站建设的公司 北邮信息安全找工作难吗 如何学营销 通州顺德网站建设 专业设计网站 网络安全警察电话 中央网信办网络安全协调局 医疗网站建设 深圳信息安全公司 免费网站域名申请 网络安全 领导小组 教育数据中心网络安全方案 网络营销的拓展方法 工组部 信息安全 视频营销适合哪些行业 东莞 外贸网站 建站 四川省网络安全法 广州微网站建设案例 网站说服力 重庆制作网站 网络安全 江苏