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
广州网络安全评估公司什么计算机网络安全效果型网站建设网络安全生态峰会网络营销售后服务信息安全调查报告信息安全调查报告小满借势营销海报进入教育行业信息安全的企业手机网站开发制作营销型企业网站策划方案大宇宙会囊括非常非常多的元素,而这本书,三界之战只是其中的一部分元素。 既然叫三界之战,那就是天地人三界之间的战争。如果你喜欢,那就请多多收藏吧。我一定会尽力将这本书写好,做到不断更的情况。写作总是没有头绪,思考较多,写作较少。 不爱学习,很难接受难以理解的新鲜事物。 刚开始写作,以为万事开头难。 后来发现,简直是步步难,一步一重天。 对于喜欢看书多一点的我,写作实在没有什么才情和耐心。 游戏只是游戏,游戏也是工作,除非是竞技类游戏。 小说只是小说,现实谁有空看小说,也许是我看久了小说,觉得没有什么趣味了。 日有所思,夜有所梦。梦只是梦,生老病死,信则有,不信则无。 构思、构思、构思。码字、码字、码字。 一大波小说正在靠近……选取,试读,下载,废寝忘食的读,有选择的观看。 是为观后感,心中所想,化为梦的翅膀。在自由的天地间翱翔…… 重生即为重来,再活一世。穿越即是交换人生,体验不同人生。 拿什么做比较才算贴切,就这双红色唯一的高跟鞋。相传,有人看见奈何桥头,孟婆捧着碎碗哭泣;三生石上有流血的名字;忘川河畔的彼岸花不见了;河岸的亡魂都在回首,流着黑色的眼泪。 黄泉路上,诸多传闻,不知真假。而我,从墓中爬出,踏着黄泉路,追寻真相。 北海边,一双淡淡地脚印延伸到海底,不见始终;南极洲,一座人体冰塑流着血的双眸,仰望苍天;古镇里,一块巨石如棺,葬下谁的魂;有人说那一双脚印是一个神灵逃亡时留下的,有人说那座冰塑是坠落凡尘的天使,那块如棺的巨石,葬着满天神佛。 而我,从墓中开始,踏着神佛的尸骨,一路向魔而去。 汤圆签约作者洛炎 汤圆签约作品一九二七年,我得到了一次侦查任务,在追踪一群深入到中国内地日本人的同时,发现了一个惊人的秘密。神秘而特殊的力量因一次偶然降临到一个人身上,千百年后,这股力量随着血脉流传至现代。普通的十七岁少年陆云汐,在亲眼目睹这个世界的真相后,决定像前辈一样,拿起刀枪,在与黑暗势力作斗争的过程中明白了生命的意义与自己肩上的责任,最终在付出巨大的代价后成功守卫了人类的未来。北宋靖康前后,风云变幻,先起江南民变,后遭金寇入侵。皇室蒙难,百姓涂炭。热血男儿,奋起抗争;红颜女子,痴情不变。恩怨情仇,一笑而泯。这是神的世界!这是魔法的世界!这是我的世界! 这是一个小角色,通过一步步努力,最终踏上成神路,创下永恒传说的故事!天道无常,天道无情,包容万物,游离其外。无善无恶,无是无非,无恩无怨,无喜无悲!苦于无常,而困于如常。 这个世界上没有无缘无故的恨,也没有无缘无故的爱。人们活在一个阴冷的世界里,见不到光明,但亲情,友情,爱情赋予了这个世界另一份情感,这个世界被称作太阳系。当气温骤降,末日是否即将到来? 直到人们发现,这一切的一切才开始救赎。智慧的头脑与冷静的心,是面对这一切的最好决策。现代科技不断更新迭代,那厚厚的冰墙却还是亘古不变。为什么? 冰的另一端是什么?这没有人知道。或许是另一个国度,又像是真理的尽头。虚无缥缈的希望与能砍破一切的破冰刀,在人们的手中,又有多少的绝望? 破冰者,这个时代的荣耀,但谁又知,成就之困难。唯有在绝望中诞生的,或许可以借助这一切,去往之真理的圣地。 “所及之处,处处是路,处处是光明,还有先辈们的脚印与他(她)们的热血_”
国家信息安全局电话? 电商营销课程 烟台专业网站建设 网站没流量 国际信息安全新闻网站有哪些 怎么取消网络安全密钥 精湛的佛山网站设计 网站用橙色 全国网络营销大赛 杭州专业做网站的公司 大龄剩女的案例分享【www.richdady.cn】 心慌胸闷头晕的原因分析咨询【www.richdady.cn】 性压抑的前世因果咨询【www.richdady.cn】 婚姻生活不顺的心理调适【www.richdady.cn】 心特别累的咨询技巧咨询【www.richdady.cn】 孩子不爱读书的家长引导方法有哪些?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 过世前可能出现的征兆咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 有官司的解决方法咨询【微:qq383550880 】√转ihbwel 迟缓儿的治疗方法【σσЗ8З55О88О√转ihbwel 升迁障碍的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的互动模式有哪些?【微:qq383550880 】√转ihbwel 家庭关系的自我提升咨询【www.richdady.cn】√转ihbwel 事业不顺的应对策略威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生的轮回传说咨询【www.richdady.cn】√转ihbwel 性压抑咨询【微:qq383550880 】√转ihbwel 投资项目的环境影响威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 心特别累的情感释放咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与公婆前世的因果关系【www.richdady.cn】√转ihbwel 特殊学校的课程设置咨询【微:qq383550880 】√转ihbwel 无形干扰的心理调适【微:qq383550880 】√转ihbwel 电子营销就业率 通州网站建设 网络推广营销招聘 池州网站制作 郑州最好的网站建设 网络营销售后服务 网络营销与销售的区别 网络营销研究目的 台山网站建设 网络营销工程师自学 企业营销 网络安全生态峰会 信息安全调查报告 服装网站 欣赏 搜索引擎营销策略分析报告 关于公安网络安全的通报 国际信息安全新闻网站有哪些 顺德网站建设要多少钱 简述网络营销组合内容 什么是网络营销评估 郑州最好的网站建设 网络营销售后服务 网络营销与销售的区别 网络营销研究目的 台山网站建设 网络营销工程师自学 企业营销 网络安全生态峰会 信息安全调查报告 网络营销与销售的区别 上海信息安全招聘 保定 营销型网站建设 关于公安网络安全的通报 深圳搜索引擎营销企业 国内网络安全研究机构 江苏网络安全平台 烟台专业网站建设 鹤壁网站制作 移动设备 信息安全 安丘做网站 网络营销工程师自学 效果型网站建设 网络安全公司排名2017 免费网站推广 什么是网络营销评估 深圳营销课程培训 网络营销 有产品 上海信息安全招聘 车辆网络安全 福建网站建设 网站建设品 网站创建公司 好模板网站 dsp营销 信息安全服务安全工程类 注册网站免费注册 惊艳的网站 万网做网站 网站创建公司 网站制作 武汉 昆明建个网站哪家便宜 网站没流量 顺德网站建设要多少钱 北京网络安全展 信息安全工作规划,-1 惠州网站开发公司电话 广州网站制作公司 申请域名建立网站 做网站步骤 体验营销中的关联体验 全国网络营销大赛 高端平面网站 dur网络安全小组 定制网站的好处有哪些 壹像素网站 网页设计中网站上面的元素一个个跳出来像放幻灯片一样js 网站制作 武汉 广州网站建设工作室 安丘做网站 信息安全工作规划,-1 网络信息安全与防范 dur网络安全小组 电子营销就业率 服装网站 欣赏 嘉兴 网站 制作 俄罗斯 网络安全 移动宽带 营销 百度营销部 网站排版 河南网络安全攻防大赛 北京邮电大学 信息安全 模板网站与定制网站的区别 网站营销方案 好模板网站 网站模板设计 深圳搜索引擎营销企业 电商营销课程 seo优化网站建设公司 信息安全 全球排名 国内网络安全研究机构 信息安全服务安全工程类 个人网站建设 免费 鹤壁网站制作 网络营销渠道类型 网站售后服务 当前信息安全面临的威胁 关于公安网络安全的通报 成都建网站 杭州网站建设设计公司 怎么取消网络安全密钥 怎么取消网络安全密钥 电商营销课程 信息安全技术信息系统等级保护安全设计技术要求,-1 网站售后服务 简述网络营销组合内容 俄罗斯 网络安全 江苏网络安全平台 廊坊网站建设 做一个网站人员 通州网站建设 池州网站制作 企业信息安全内容 河南网络安全攻防大赛 广州网站制作公司 个人网站建设 免费 北京网络安全展 南京专业做网站的公司哪家好 20个中国风网站设计欣赏 网络营销知识运营网店 高校网络信息安全,-1 怎样开网站 网络安全知识教育平台 银行客户信息安全 传统营销策略的优点 体验营销中的关联体验