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
金融业银行信息安全营销综合实践教学平台网站流键入网络安全密匙怎样解除广州定制网站设许可email营销怎么做大连网站设计公司青岛网站设计报价良好的网络安全网络营销的前言上海网站制作顾问所思既所得 所想既所有——觉界所以屹立万界之巅,便因这独特而强力的位面法则。但当法则被撕碎,界灵被污染,又待谁来力挽狂澜?小小下界之子林韦,被迫卷入这场黑暗漩涡,又将翻起多少波澜? 长恨画戟不似月,一耀寒光洗九天。 天道有缺,世间最强体质神魔霸体被天道所摒弃,十五年忍辱,终将迎来曙光! 大道枷锁自束己身桎梏又如何?我自当逆战苍穹,笑傲九重天,神挡杀神,佛挡弑佛,逍遥天地间! 一日破关,我为尊,一拳荡寰宇,一脚山河溃,一静万物生,一动诸天陨,一念可化阴阳轮回,一念可镇压永恒万古! 我为太古第一神王,天骄至尊皆是我帝路上尸山血海! 我当以一双铁拳,粉碎诸天万界,天道也不行!大国脊梁,重伤失忆! 都市人生,重新开启! 我叫林凡,也叫林无双! 强悍女友,总想为我遮风挡雨,但她不知道的是,都市人生,我才是真正的王!!!“我本无名,只能叫无名了。在我心中,若失去冒险精神就失去了人生意义,那种热血沸腾的感觉真是让我欲罢不能!” 神秘少年获得与所在世界格格不入的力量,由于好奇心的驱使让他四处冒险,奇遇连连,随着身体与武器接连产生异变,他那恐怖的身份以及武器的归属渐渐有了答案……游戏与考试有时可以实现完美结合,而道德也应该影响考试的结果,某个班级里的十五名男生也这么想。他们个个都在某些领域有着自己的专长,也有着自己致命的缺陷。他们有的出身显赫,父母都热爱读书;有的却不幸出身于一个思想境界低下的家庭,不慎被家庭影响,坠入无底深渊。突然,他们被卷入了一场场特殊的考试之中,他们需要用自己学过的知识去应对各种各样的险境。你认为他们能成功吗? 不可明状的存在将地星扩大一百倍,整个世界都被游戏数据化。 远古的存在开始回归,混沌中有异族在蠢蠢欲动。 这是大秦猛卒与盛唐羽林军的争霸,也是魏武卒与陷阵营的碰撞。 当斯巴达勇士遇上黄巾力士,当教廷的十字远征军碰上蒙古铁骑...... 象兵、铁浮屠、维京海盗......人类、兽族、异族侵袭....... 谁,才是诸天最强文明?救人一命胜造七级浮屠,美女施主,你我有缘啊... 在风谷道馆地下室捡到了人皮书的张鹄,探索着人皮书上给出的一个个任务,解开了身上的一个个能力,逐渐触碰到灵异的真相。   张鹄利用人皮书以一个还愿师的身份驾驭厉鬼,走上了一条与灵异事件处理司截然不同的道路。一方面抗衡厉鬼,一方面抗衡灵异事件处理司。 另外他发现,人皮书做完的任务赋予他的能力,逐渐把他也变成了一个鬼,来到了死后的亡者世界,见到了所有的前任还愿师,还愿师的目的是掌控亡者世界,让它不至于失控,他要重新规划亡者世界的规矩和法则,只是刚到亡者世界的张鹄在这里的实力和刚触碰灵异事件的他一样,这是一个新的开始,一次在亡者世界的变强之路。天生至尊,为人族斩妖除魔!护人族万垂不朽!江宇泽前世遭兄弟的反水,亲朋的质疑,爱人的背叛,不幸陨落。烟消道散之时,竟发现在这大千世界之中,源灵大陆只不过是一粒尘埃。万年后得以重生,挖掘新的力量,开创新的规则,以源灵大陆为基础,向未知探索!岚枫死后穿越修仙世界,发现金手指系统竟会吃修为。
主机信息安全审计系统 2017信息安全对抗大赛 网站红色 键入网络安全密匙怎样解除 国家信息安全中心待遇 网站流 番禺网站优化 太原全网营销服务商 信息安全保护等级三级 上海工业网站建设 祖灵与家运的关系【www.richdady.cn】 前世老婆的前世解析咨询【www.richdady.cn】 自闭症的治疗方法【www.richdady.cn】 祖灵的超度仪式咨询【www.richdady.cn】 缺心眼的心理调适咨询【www.richdady.cn】 孩子学习不好的家庭教育【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 商业决策的心理学支持【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 人际关系不好对工作的影响咨询【企鹅383550880】√转ihbwel 大龄剩女的婚恋困惑如何解决?【www.richdady.cn】√转ihbwel 前世今生的轮回真相【σσЗ8З55О88О√转ihbwel 婴灵的超度仪式如何进行?咨询【www.richdady.cn】√转ihbwel 官司的心理调适【σσЗ8З55О88О√转ihbwel 亲子关系的教育策略威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何识别外灵干扰的症状咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 什么原因意外的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 什么原因意外的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与公婆前世的影响分析咨询【微:qq383550880 】√转ihbwel 官司的法律咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子不读书的原因分析咨询【微:qq383550880 】√转ihbwel 前世老婆的前世记忆咨询【企鹅383550880】√转ihbwel 优质公司网站 wifi网络安全问题 全网营销型网站 电影网络营销推广 天津云盾信息安全技术有限公司 超低价的郑州网站建设 信息安全等级测评资质证书 如何用网络营销的方法有哪些方法 网络信息安全演练 比较好的网络营销平台 网络安全培训 下载 网站建设营销技巧 达内网络营销有用嘛 设计师个人网站 网络营销分为哪几大类 网络营销师做什么的 网络营销的前言 提供企业网站建设价格 网上拍卖营销策略 中央网络安全和信息化领导小组 工信部 信息安全专业 macbook 2015广东省信息安全 网络营销分为哪几大类 网络营销的交互性 上海工业网站建设 2015信息安全会议 佛山企业网站建设特色 机械行业营销型网站 金融营销的网站设计案例 网站建设 福州 主机信息安全审计系统 网站设计实例 国家对网络安全的政策 企业网络安全方案集团公司广域网组建 上海网站制作顾问 网络营销有什么策略 分栏型网站 优质公司网站 青岛网站设计报价 网络安全合格证好办吗 信息安全等级测评资质证书 wifi网络安全问题 网络与信息安全范畴财政部网络安全 网络营销的交互性 idc网络安全报告 全网营销型网站 李宁网络营销策划书 青岛企业网站建设 国内主流信息安全厂商 电影网络营销推广 网络信息安全演练 湘西网站建设 汕头建设网站 天津云盾信息安全技术有限公司 2017玩转网络营销 石家庄网站建设外包公司 网站优化公司 超低价的郑州网站建设 郴州网站seo 网站建设平台 手机网络营销怎么做 信息安全等级测评资质证书 兰州做网站 上海高端网站开发 国有企业信息安全制度 如何用网络营销的方法有哪些方法 番禺网站优化 网络营销咨询 网络安全合格证好办吗 网络信息安全演练 网络营销的职能关系 潼南网站建设 整合营销什么意思 比较好的网络营销平台 手机网站分享 整合营销什么意思 如何用网络营销的方法有哪些方法 网络安全培训 下载 做生意的网站 整合营销?V告 山西网站制作公司哪家好 网站建设营销技巧 北京市网络安全局 4r营销书 网站策划方法 达内网络营销有用嘛 大连网站设计公司 国家对网络安全的政策 网络营销学习网 设计师个人网站 全网营销型网站 xs 信息安全 六安做网站公司网络营销可分为 网络营销师做什么的 上海做网络安全的有哪些公司 中国信息安全测评中心待遇 有关建设网络安全的文章 许可email营销怎么做 江苏信息网络安全协会 为企网站 潼南网站建设 北京市网络安全局 网络营销的前言 优秀网站设计欣赏 2017信息安全对抗大赛 整合营销?V告 网站托管费 安恒信息安全 许可email营销怎么做 2010年网络营销大事件 网站红色 专业的网络营销首选公司 网站入口设计规范 国家对网络安全的政策 做全网整合营销的公司 网络安全审计平台 主机信息安全审计系统 公司网站建设 怎样黑网站 做全网整合营销的公司 公司网站设计与开发 中国信息安全测评中心待遇 上海高端网站开发 公司网站设计与开发 网络营销课程的ppt 2017信息安全对抗大赛 第四届广东省网络安全 广州做网站的 网络营销可以吗 卓进网站 网站优化公司 网站查外链 佛山企业网站建设特色 中央网络安全和信息化领导小组 工信部 上海工业网站建设