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
河北网络安全周直播济南网络营销训机构信息安全企业排行维护网络安全语句建网站的详细步骤信息安全产品的规定企业的整合营销中国网络安全年会2017深圳企业网站建设报价网站加地图鹤壁网站建设师父常说,山下女人都是老虎,但师父亦常说,我不入地狱,谁入地狱。 于是,夏天化身打虎英雄,奔往山下。 夏天:“师姐,收起你的胸恶,让我用爱感化你……” 云之始,始为开始,终以极,万物有始。人性本恶,随心所欲,难道就不是本真?你擒手到心不肯放弃你所谓的原则,其实也是因为还没有濒临自己无法接受的绝境男主魏羽泽前世是一名科学家,因一次意外实验穿越到一个叫玄气的世界。这里的人都会修炼一种叫玄气的东西。男主重生在这个世界,恰巧碰到战争,男主会有什么奇妙的经历呢?少年天才于洋来到黄海市当保镖,且看他如何走上人生巅峰李家世代为守墓人,祖父为李家族长。父母不和,祖父施“春宫厌胜术”后有我。为盗将军墓,三批盗墓贼以不同面目来到村子,先后找到了寡妇、暗娼、光棍和木匠,于是人性在财宝、巫术、鬼魅轮番轰炸下显露无疑。大戏落幕,草没夕阳,我只是一名看客...... 这是发生在一个架空世界『塞图尔』的故事,在这个世界,所有的物种都有成为神的机会。当然是有条件的,拥有『武装』,这些拥有武装的人都被称为『武装者』。在这个世界,分为『兰科特』『明华』『空』三个国家,而联盟则是三个国家共同创办的独立机构,专门培养年轻的武装者,然而许多年过去,却谁也没有发现联盟的阴谋……蜀汉小将关纯关坦之,是小将,也是骁将,守荆襄、入西川、讨西凉、战曹操、败孙权、斩司马、灭四夷,一生败尽江东鼠辈,力抗曹魏名将,屠灭五胡,终成一代名将。 这是一部剧情完整的末世文,主角荒辰慢慢发育,在未世中成长。错的不是我,而是这个世界! 那就以不被世间所理解的雷霆,去击碎这不理解我的世界吧! 直到——我停止心跳为止!
红色网站呢 微电商营销策划方案 网络营销网站排名 国家信息安全认证服务资质 信息安全专业人员 企业免费建网站 专业营销外包公司哪家好 临沂网络营销策划 做网站 长 淘宝直播的营销手段 升迁障碍的风水布局咨询【www.richdady.cn】 去世的父亲的前世因果【www.richdady.cn】 婚姻生活不顺的自我提升咨询【www.richdady.cn】 升迁障碍的咨询技巧【www.richdady.cn】 财运不佳的原因分析咨询【www.richdady.cn】 前世今生【微:qq383550880 】√转ihbwel 3. 情感与心理咨询咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主干扰的预防措施咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 解梦的方法与技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 去世的父亲的前世修行咨询【σσЗ8З55О88О√转ihbwel 婚姻生活不顺的原因分析咨询【σσЗ8З55О88О√转ihbwel 儿子不读书的教育建议【企鹅383550880】√转ihbwel 事业不顺的职场建议有哪些?咨询【企鹅383550880】√转ihbwel 失业的环境影响咨询【σσЗ8З55О88О√转ihbwel 前世今生的修行案例【σσЗ8З55О88О√转ihbwel 去世的母亲的前世修行咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 莫名其妙感伤的原因分析咨询【企鹅383550880】√转ihbwel 财运不佳的自我提升【微:qq383550880 】√转ihbwel 亲子关系的改运方法【微:qq383550880 】√转ihbwel 阴间生活的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel seo网站诊断 广州建设网站 网络营销站 胶州网站建设 信息安全等级保护证书 做网站 长 淘宝店铺网络营销策划 网站的访问量 丹江口网站建设 网站流量统计模板 济南营销 网站多语言 山东网站优化公司 信息安全 内部人员攻击 优秀网站 做网站的好公司 旅游网站管理系统 网络安全法律 徐州网站 珠海做网站的 淘宝店铺网络营销策划 网络安全监测设备有哪些 微电商营销策划方案 高校网络安全小组 微营销有什么特点 公司网站手机版设计 播客营销缺点 中国网络安全年会2017 柳市做公司网站 网络安全的属性 长春全网营销 个人网站主页设计 网络安全行业公司排名 企业手机网站建设策划书 网络营销的业务流程 线上营销概念 网站流量统计模板 济南营销 委托建网站需要多少钱 信息安全专业人员 网络营销手段 网站运营 红色网站呢 美团的软文营销 设计网站可能遇到的问题 网络广告的整合营销 如何申请网站 济南软件优化网站 2016网络信息安全重大案例分析 网站框架图 昆明云南微网站建设 视频营销的推广方式有 网络培训的网站建设 做定制网站 网络营销职业分析报告 营销型策划 信息安全 框架 p2p网站制作 什么是手机网站建设 赢在教育全网营销 网站加地图 网络安全检测时间频率 赢在教育全网营销 网络培训的网站建设 淘宝店铺网络营销策划 网站的访问量 维护网络安全语句 柳市做公司网站 网络安全法律 信息安全等级保护证书 互联网公司营销方案 asp.net 网站 文件加密 outputstream绿盟网络安全 优秀网站 广州建设网站 网络安全敏感的国家 广州网站建 西安网站建设有那些公司 北京信息安全毛处长 提供商城网站 南京专业做网站的公司 专业营销外包公司哪家好 网络安全.ppt 哪个学校有信息安全 工业控制系统 信息安全标准 福州做网站公司 2017深圳信息安全大会 网站框架图 什么是手机网站建设 信息安全等级保护证书 蘑菇街营销手段 2017深圳信息安全大会 上海模板网站制作多少钱 网站运营 信息安全建设,-1 上海模板网站制作多少钱 网络安全传输 为了保护信息安全本次删除已被禁止 洛阳网站优化 外包营销 信息安全 框架 胶州网站建设 网站推广营销实训方案 网络营销线下培训 网络安全安控科技 人员管理是信息安全 成交型网站 网络营销的职位有什么 全网营销优点 珠海做网站的 淘宝店铺网络营销策划 网络营销具体指什么区别 信息安全方面的专利 信息安全 内部人员攻击 美橙网站维护 网络广告的整合营销 企业的整合营销 南宁网站优化 网络安全编程与实践 视频营销的推广方式有 沈阳网站建设推广 网站推广营销实训方案 网站设计价格大概是 国家信息安全认证服务资质 网络营销效果评价方法 广州建设网站 网络营销的理论体系 网络营销效果评价方法 效益型营销 微电商营销策划方案 网站设计模块 山东网络安全周 网站域名注册 网络营销效果评价方法 樟木头的建网站公司 网站设计贵不贵