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
湖南网站推广广州做网站信科分公司怎样网络营销网络信息安全投资信息安全国家标准目录网络安全产品 ppt珠海网站营销网络营销信息传播效果启明星辰 工业网络安全医药企业网站设计制作人族无帝尊,妖帝出锁界,人族一代尊主紫舍帝尊消失于无相海深处,百年之后,妖帝率领万妖打开锁妖界,入侵人族,攻守之势逆转,各地宗门大肆招收门徒应对妖族的侵扰,山村少年张擎亲眼看见村庄被屠,走投无路的他被庆云宗长老救下,开启修仙之途,终成新的帝尊。 江城穿越平行世界,绑定神级科技系统,系统的触发条件是让他独自研发一项改变世界的发明。 于是他选择了可回收火箭,打造猎鹰九号升级版,在苦心研究五年之后,所有测试结果均为完美,成功率百分之九十五,一经上市,保守年收入五十亿。 为了拿到投资,他将自己的所有理念模型,包括他获得的荣誉电邮到了摩根银行,竟然真的得到了回信,并且对方愿意前来核验。 恰逢相亲走错桌,遇到年轻貌美的投行女大佬,没想到摩根银行的投资条件是让这项技术为M国专利,江城愤然拒绝。 摩根银行为此和媒体恶意渲染抹黑回收火箭技术不可能实现,想要毁掉江城。 关键时刻,看到一切的相亲女大佬林若溪在媒体面前支持江城,并且怒投十亿! 三个月后,当猎鹰九号升级版问世登上太空,并且成功返回之后,全世界都震惊了!一百年前。 妖魔和鬼祟在蓝星爆发,人类军队节节败退,关键时刻,天空降下了数不清的神灵印记。 至此,神灵传承者横空出世,将岌岌可危的局面扭转。 西边,耶和华,宙斯,奥丁,阿努比斯等神灵传承者威震蓝星。 就连自大的神油国,都拥有梵天传承者坐镇。 而泱泱大夏,却没有一枚神灵印记落下! 大夏沦为笑柄,被称作神弃之地。 萧逸穿越到这个平行世界,觉醒了东方封神榜系统。 他发现,自己竟然能给人册封九州神灵。 当一位位远古九州神灵显露法身之际。 无数国人泪目,全世界都沸腾了!!!大梦蛮荒,本以为的万族之战,最终却是一场旷日持久的家园守护战! 神族,仙族、人族、妖族...... 看似纷纷扰扰的世界,却有着共同的理想共同的梦! 当整个世界陷入最危险的时候, 有的生灵哭着,有的生灵笑着,也有着生灵咬着牙默默坚持着! 而始终,有那么一群励志青年, 他们踏着前人的不屈之路,他们走向一条看不见未来的人生! 仿佛那个觉醒年代一般, 那一刻,谁能理解少年武士的赴死? 重要吗? 不重要吗?岁月不曾磨灭英雄的意志,讲述时代洪流中一个小人物的成长史。六子,一个代号,一个化名,一个象征希望的名字。 跟我一起走近他,走进那段艰辛岁月,体会一个老党员的拳拳爱国之心。 不忘来时路,一起向未来!大荒里不知名的小村子,几位少年从这里走出,开启属于他们的传奇人生。 黑暗中的幕后者从沉睡中苏醒,天地棋盘悄然展开,一切才刚刚浮出水面……富二代穿越到红楼世界,成为皇子,本来以为又是躺赢的一生,但‘外挂’降临,主角被迫走上无敌诸天万界的道路。王富贵一觉醒来发现自己穿越到一个破落户家里,一出门还白捡了个老婆,为了养活一大家子,王富贵不得不想方设法搞钱!设计时装、建造工厂,到后来居然连手机都有了……王富贵就这么成为大夏第一号大富豪,还顺便收个皇帝做小弟!有人问:“生活的意义是什么?”我说:生活的意义就是不需要去寻找它的“意义”,我们活在这个光怪陆离的世界里,像是星辰大海、繁星点点,而意义就在于:我们,慢慢发光的那一个过程。 还有人问:“那爱情呢,是什么?” 爱情……也许会让你这颗“星”熄灭,但总会出现一个人点亮你的世界。 我叫周东黎,我用我的故事来告诉你,什么是生活,而什么又是爱情。上下五千年,穿越北宋、未来世界、春秋战国、五代十国、南北朝、南宋,纵横阴阳两界,遭遇妖、魔、鬼、怪和树精、狼人、人鱼、道仙、仙鹤等或敌或友,历经近百场或大或小或人或魔或远古或未来之战,侠义,历史,战争,魔幻,血腥,勇气,并有相伴左右的亦妖亦精的爱情,令人血脉喷张。
大连专业网站设计服务商 医药企业网站设计制作 网站设计贵不贵 信息网络安全现状分析 南京搜索引擎推广营销 湖南网站推广 网络营销服务包括什么 长沙电子商务网站建设 gb/t 20272-2006 信息安全技术 操作系统安全技术要求 建网站前途 前世缘份的前世案例咨询【www.richdady.cn】 耳鸣的医学检查【www.richdady.cn】 心慌胸闷头晕的医学检查【www.richdady.cn】 暗恋的咨询技巧咨询【www.richdady.cn】 自闭症的自我提升【www.richdady.cn】 孩子厌学的家庭教育咨询【σσЗ8З55О88О√转ihbwel 亲子关系的互动模式【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 邪灵的防范方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷的前世记忆【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的真实案例有哪些?【σσЗ8З55О88О√转ihbwel 失业后如何快速找到新工作【微:qq383550880 】√转ihbwel 前世老公的识别方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 祖灵的存在形式咨询【www.richdady.cn】√转ihbwel 亲子关系的互动模式有哪些?【σσЗ8З55О88О√转ihbwel 婚姻生活不顺的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 强迫症的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的环境影响【σσЗ8З55О88О√转ihbwel 与男友前世咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家宅磁场的检测工具【www.richdady.cn】√转ihbwel 顺德网站制作绿盟网络安全 上海网络营销策划公司 上海信息安全中心地址 企业信息安全物理安全 网站备案信息注销原因? 互联网信息安全评测机构 信息安全事件通报流程 徐州html5响应式网站建设 医药企业网站设计制作 特朗普 网络安全委员会 泛在信息安全 网络营销的市场前景 网络营销的市场前景 营销的拼音 网站优化案例 广州企业网站设计公司 网络安全小报字体设计 设计新颖的网站建站 公众号营销有哪些策略 珠海网站营销 网络营销信息传播效果 新闻事件营销的特点太原理工大学网络安全 国家网络安全中心在哪 大良网站建设价格 大数据与信息安全讲座 2017中国信息安全招标 互联网信息安全评测机构 大连专业网站设计服务商 网络营销专业都学什么不同 网站流量统计模板 网络信息安全投资 我为营销文化代言 网络安全常用工具2017网络安全专业 广州做网站信科分公司 饭客网络安全论坛 南京搜索引擎推广营销 网站需要几个人 做网站电话 网络营销线下培训 上海高端建设网站 国家信息安全扫描 信息安全技术云操作系统安全检验要求 怎样网络营销 设计新颖的网站建站 无纸化营销 2014全球网络安全事件 网站备案 办理幕布拍照 电子商务营销的关键是 贾焰 信息安全 网络信息安全知识 企业营销有 企业营销有 河南网站建设公司 聊城网站建设招聘 2014全球网络安全事件 建网站前途 济南网站建设公司 网络营销出来有用没 饥饿营销行为 信息网络安全现状分析 有关网络安全的新技术 泛在信息安全 网络营销信息传播效果 网络营销服务包括哪些内容 网络营销的层次 国家信息安全等级保护工作协调小组,-1 软文营销的要素 上海信息安全中心地址 网站建设的售后 信息安全就是网络安全 互联网信息安全办法 青岛个人网站制作 企业网络营销计划方案 南京网站制作 网站开发技术 国家网络安全测评中心 河南信息安全电子中心 信息安全事件通报流程 建官网个人网站 公司网站可以个人备案吗网络营销经典案例 网站空间购买 我为营销文化代言 营销职能 营销职能 信息网络安全现状分析 数据信息安全 通知 网站优化案例 饭客网络安全论坛 网页设计网站 设计新颖的网站建站 广州做网站信科分公司 安徽理工大学 信息安全,-1 网络安全事件解决时间 国家网络安全中心在哪 大连专业网站设计服务商 网络营销个性化服务 信息安全部的认知 信息安全管理的重要性不包括 网站需要几个人 大连专业网站设计服务商 网络安全与国家安全 工业控制系统 信息安全标准 公众号营销有哪些策略 大数据与信息安全讲座 网站开发技术 顺德网站制作绿盟网络安全 网络安全产品 ppt 浙江大学 信息安全 实验室 微信营销软件招代理商 互联网营销环境变化 建设官方网站 网站开发技术 建网站的详细步骤怎样给网站增加栏目 济南软件优化网站 潍坊网站设计 做网站电话 信息安全管理手段 线上营销概念 2014年网络安全 启明星辰 工业网络安全 平台型网站 国家信息安全认证服务资质 做网站品牌 网络营销职业分析报告 网络营销的市场前景 互联网信息安全评测机构 聊城网站建设招聘 徐州html5响应式网站建设 特朗普 网络安全委员会 建网站的详细步骤怎样给网站增加栏目 商务网站建设公司 医药企业网站设计制作 网络营销线下培训 网络营销专业都学什么不同 大数据与信息安全讲座