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
国家信息安全相关部门如何成为顶级信息安全陕西省网络安全工组部 信息安全上海营销易尚网络营销公司网络营销不仅限于网上网络安全配置网络安全指标公司在保护公司信息安全现代佣兵周文意外魂穿到民国学生周文身上。他利用穿越带来的一颗佛珠的神奇功能,再加上后世带来的经验、知识和技能。打造了一只武功高强、军事技术顶尖的佣兵团队。 他带领这支佣兵团,历经中原大战、淞沪抗战、称雄上海滩。装备了当世最先进的各种武器,最后投身于伟大的抗日战争中。带着兄弟们杀鬼子......他们是皇家近卫,可以以一敌百。他们是一对欢喜冤家,经常各种不服。他们是两个战斗方式截然不同的人,一个拿着火铳,一个拿着千机伞。他们更是两个18岁的孩子,对世界认识尚且不深。他们一定是空中的苍鹰,陆地的雄狮。因为,他们是一个传奇。穿越到大乾王朝的陈河,入赘叶家,本想着这辈子要不做个赘婿吧。   混吃等死算了。   谁想到新婚妻子娇艳如花,奈何天生体弱,红颜多薄命。   一本《伤寒论*小青龙汤》救了新婚的妻子。   一本《本草纲目》本奉为万世医典。   《神农本草经》济世悬壶,引得天下医道追逐。   多年以后,看着自己的济贤堂开遍大乾,陈河本想着这辈子也就这样过吧,娶个七八房媳妇,生个十几个娃,但没想到大乾内乱。   一纸诏令直达应天。   宣:陈河入宫!天界的姐妹凤琉璃和白子婧受天帝的嘱托下凡观察魔族的一举一动,在此期间遇见了千年之狐墨阳轩和贝城轩,双方合作一起除掉魔族,而墨阳轩一见钟情,爱上了凤琉璃,白子婧和贝城轩俩个人日久生情,东海龙王的女儿辰萱晗也请求天帝让自己去帮助琉璃她们,辰萱晗下凡之后一直在帮助琉璃她们解决烦恼,后来,辰萱晗想出去走走,告别了琉璃她们之后就走了,在外的时候意外救了凡间的大将军顾晟,两个人就此开启了瓜葛,姐妹三人在感情的道路都历经坎坷,好在对方都没有放弃和对方在一起,成功地消灭魔族之后姐妹三人分别带着对方回去了少年陈枫身怀绝世神器,修盖世魔功。战人界、屠魔界、挑仙界、冲神界。打遍诸世界,杀出冲天血路,成就无上至尊。(声明:新书发布,各位新老书友多多支持。群号:158697732)籃陌的力作《向世界说你好》.生活本该就是美好的存在.为了生活我们奔波在大街小巷.加班熬夜拿薪水.每个人都觉得上天不公.为什么别人能光彩照人.而我们却默默无闻.原因只有一个.那就是我们的努力远远不够.看似风光无比的的成功人士.你永远不知道他洒下多少汗水来证明自己的选择没有错.心中的苦.永不言弃的精神才是我们应该学习的.每个人都有自己的梦想.也许我们为了生活曾放弃过自己的梦想.我们也曾迷失方向.感到彷徨.忘记了最初的梦想,生活教会了我们这么多.让我们每天一起学习.一起成长.我们应该知道感恩.他就像我们的亲人一样.陪伴我们走完此生!言钦雅有四张面具,首为狐耳,是对黎明百姓仁慈与怜悯,然愚民不可救,围而攻之,遂出黑龙,怒而屠城;冷静之后,蝶衣覆面,游荡江湖,放逐为自由;奈何红颜为君倾,赠君鸣凰,携妻归庙堂。因一封邀请函再起的故事,这也是新的续篇。 命运的挑战?弥补的救赎? 不哦,或许……不仅仅是这样。 记住,实力为重,却非最上。传说中的神话人物是否存在,如果存在,他们现在又在哪里?如果不存在,那我又是谁?行走在黑夜中,谜团,不断地被解开,又不断的出现,真相最终展现在眼前时,竟那么悲壮。一位于300年前陷入沉睡的少年苏醒,竟遇到同当年那位佳人一般的人,后又因意外失忆,被那少女所救,从此踏上了一条不归路……
关于网络安全的一句话 网络营销系统平台 淄博网站优化 我国的网络安全发展趋势 网络安全协议是什么 网络安全处理 视频网站设计 网络安全合作 信息安全工程专业兴趣研究报告 信息安全的职业 耳鸣的咨询技巧【www.richdady.cn】 前世缘份的缘分奇迹咨询【www.richdady.cn】 感情纠纷的情感咨询如何进行?【www.richdady.cn】 孩子压力大的自我提升【www.richdady.cn】 什么原因意外的前世解析【www.richdady.cn】 缺心眼的原因分析【σσЗ8З55О88О√转ihbwel 儿子抑郁症【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 冤亲债主干扰的真实案例有哪些?【微:qq383550880 】√转ihbwel 前世缘份的重逢有什么迹象?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的婚恋故事【www.richdady.cn】√转ihbwel 儿童发育倒退的原因咨询【σσЗ8З55О88О√转ihbwel 脑部不清晰的案例分享咨询【企鹅383550880】√转ihbwel 特殊学校的教学方法咨询【企鹅383550880】√转ihbwel 升迁障碍的前世因果咨询【σσЗ8З55О88О√转ihbwel 婴灵的真实案例有哪些?咨询【σσЗ8З55О88О√转ihbwel 大龄剩女的婚恋心态【微:qq383550880 】√转ihbwel 升迁障碍的职场转型技巧有哪些?【σσЗ8З55О88О√转ihbwel 孩子不爱读书的原因咨询【微:qq383550880 】√转ihbwel 前世缘份的故事有哪些真实经历?咨询【微:qq383550880 】√转ihbwel 化解冤亲债主的有效方法【企鹅383550880】√转ihbwel 网站颜色表 苏州企业网站建 企业网站内容更新怎么操作 国际 网络安全攻防竞赛 网络安全监测工具 做网站建设 网络营销托管微博特点与微博营销策略 微信小程序做网站 东莞网站开发推荐 长沙网站制作服务 提供网站建设的公司 大学生信息安全竞赛题目 饥饿营销的作用 信息安全等级保护基本要求培训教程,-1 网络安全堪忧 营销策划网络课程 易尚网络营销公司 信息安全的任务是 信息安全违规 上海手机网站建设电话咨询 卡通画风的网站 2017中国网络安全事件 微营销真的假的 信息安全工程专业兴趣研究报告 信息安全的职业 网络信息安全教学实验平台 浙江营销策划 国家信息安全相关部门 信息安全管理实验报告 深圳网站建设外包公司 大型网络安全公司 2016网络安全攻击统计 信息安全高峰论坛 营销定制 设计公司网站 2017年的网络安全 可信网站认证 如何让外部的人员能够访问企业网站了解企业的产品及相关信息 成都网络安全现状 做网站实验体会 网站建设案列 成都网络安全现状 东莞那里有营销课堂 网络营销不仅限于网上 网络营销常见的方式有哪些 网络安全配置 长春网站制作 关于网络安全的一句话 五级网络安全危 国内做信息安全的企业 网络营销培训公司 公司建设网站重要性 天融信信息安全实验室 学院信息安全工作 网站推广步骤 信息安全产品强制认证目录 黑客对网络安全的影响 青岛日文网站制作 做网站收费公司网站建设推广 广州微网站建设案例 网络安全协议是什么 淄博网站优化 信息安全的组织机构 网络营销方向学什么不同 网络安全 手机 卡通画风的网站 网络安全谷地址 网络安全主要解决问题 杭州市网络安全平台 网络安全 手机 网络安全现场活动 ruby开发 信息安全 东莞网站开发推荐 网络安全现场活动 长治网站建设 创建网站的流程 东莞市策划营销顾问 东莞那里有营销课堂 网络安全合作 信息安全高峰论坛 设计公司网站 中国科学技术大学信息安全测评中心 狼客网络营销 企业网站内容更新怎么操作 营销策划网络课程 昆明做企业网站多少钱网站建设与应用 网络安全高手 深圳整合营销行业 网络营销不仅限于网上 机房网络安全 制度 国家信息安全事件,-1 广东 网络安全 大学生信息安全竞赛题目 长春网站建设 小米网络营销应用分析 视频网站设计 网络营销方案主要内容 网络安全协议是什么 信息安全违规 上海营销 国内信息安全公司排名,-1 网络营销方案主要内容 网站建设学校 网络营销培训公司 网络安全指标 中央信息安全 上海手机网站建设电话咨询 教育行业网络安全现状 清华大学网络安全课程 长治网站建设 信息安全等保宣传图片 020营销模式的不足 平邑做网站 最先进的网络营销 苏州企业网站建 信息安全文档 做网站实验体会 国际 网络安全攻防竞赛 idc网络安全市场分析报告 网页网站 创建网站的流程 广州微网站建设效果 云南网站推广 营销学术语 020营销模式的不足 中央网信办网络安全协调局 山东专业企业网站建设 四川省网络安全法 四川网络营销 营销定制 关关于信息安全的网站 西安做网站的公司 网络安全主要解决问题 信息安全的职业 设计公司网站