Home/Tables

Tables For, you guessed it, tabular data

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
上海网络安全公司怎样搜网站网络安全 实验2016信息安全案例分析乐清企业网站建设公安部网络安全局官网先进网站2017 信息安全事件h5网站作用上海网络安全公司做网站网站信息安全案例库中央网信办网络安全协调局武昌手机网站网络安全等保营销师官网柳州网站设计饥饿营销模式概述太原优化型网站建设太原免费网站建设江苏网站建设机构网络安全威胁有哪些淘宝如何实现网络营销传统营销网站建设的域名注册网络安全技术保障做网站价格美团营销网站推广费用网络安全的经典实例2014国家信息安全专项购物网站设计需要哪些模块东汉末年，汉室崩塌。 刘闲意外穿越到这乱世，开始一段传奇人生。 利用遥遥领先这个时代的知识，收名将，戏红颜，混的风生水起。 同时训练出一支傲视当世的铁血精锐。 刘姓为王，大浪淘沙。 待一切尘埃落定之后，一个完全不同的大汉帝国重新出现在了大地的东方。 外婆口中描述的一段传说，一处死寂之地，是如何令周边村民闻风丧胆，老吴的失踪，奇怪的梦境，民间探险队介入，又会有什么样的冒险在等待着他们，迷雾重重，是阴谋？是算计？还是本就该注定的？在一片遥远，奇幻的大陆上，三界有序而偶有冲突地并存着。而一个古老的传说牵连着三界的心，无数人，妖，甚至神，几千年间汇入了不尽生命与鲜血。原浩在莫名其妙中结识了两位奇怪的“朋友”，他的人生在这场传说的卷轴中展开了……万能高中生风嶺和同学们参加高中的毕业旅行。夜间，风嶺在独自一人的街道捡到了一张神秘的卡片。在那之后，他搭乘了列车下车的时候竟然是出现在了异世界索尔基雷特 在不知不觉之中，风嶺寻找到了可以自由来往两个世界的方法，而随着在两个世界不断的穿梭与持续的战斗过程之中，两个世界开始逐渐对彼此产生了影响，而风嶺也逐渐接近了隐藏在索尔基雷特这个世界背后的真相。 万能高中生风嶺和同学们参加高中的毕业旅行。夜间，风嶺在独自一人的街道捡到了一张神秘的卡片。在那之后，他搭乘了列车下车的时候竟然是出现在了异世界索尔基雷特 在不知不觉之中，风嶺寻找到了可以自由来往两个世界的方法，而随着在两个世界不断的穿梭与持续的战斗过程之中，两个世界开始逐渐对彼此产生了影响，而风嶺也逐渐接近了隐藏在索尔基雷特这个世界背后的真相。圣历3000年，大帝国涅星共和国内，正举行一年一度的神圣大祭典，一切如往年般安定祥和。然而出乎所有人意料的是，天空突兀出现了一个吞噬一切的可怕漩涡。异像来临之际，于虚无教廷前，迷一般的少年降临，教廷大司祭做出了预言。 命运轮盘的指针到底会如何转动，世界将会如何改变？命中注定的五人，一场邂逅神秘的红发少女，少年与伙伴们又该何去何从？究竟会在浮世挣扎生存，还是踏上毁灭之路？徐智墨意外穿越成了云中鹤，看着古墓的小龙女、慈航静斋的圣女、魔门圣女、燕子坞的王姑娘......都在为他争风吃醋。 自己只能在一旁无力的呐喊：“住手，住手，你们快住手，不要再打了啦！” 而此时，数道声音几乎同时从古墓外传了进来。 丘处机：全真教只有在云大侠手里才能真正的发扬光大。 洪七公：老叫花推举你成为丐帮下一任帮主。 郭靖：侠之大者，为国为民，这八字当之无愧！ 东方不败：有你在统一江湖，永远只是一句笑话！ 独孤求败：麻烦你搞清楚，我是求败，不是求虐！既然上天给了我再一次重来的机会！ 这一世我会让世间所有人知道！帝师陈宇！ …我叫陈宇，这世间无敌的存在 虽然我完成了梦想，但钱途的这段过程并不容易，我一无所有过，也欠过一屁股债，甚至一时冲动，借高利贷，撸网贷，以贷养贷。 　　这段钱途的心酸历程，我送过外卖，送过快递，跑过网约车，做过农民工，卖过路边烤面筋。 　　创过业，也经历过失败。现代反赌专家穿越到大明，睁眼便是生死局，满街皆是花样赌！ ?骰宝、牌九、叶子戏，走狗、斗鸡、蛐蛐乐！ 偷天换日、飞云探龙、?海底捞月、天外飞仙？ ?林萧笑了：过家家的把戏，也好班门弄斧？要说起出老千这档子事，我会的远比你们梦寐以求的多得多！ 一段未知星球讯号的发现，彻底改变了苏飞的命运，二十五岁的苏飞被带回八年之前，面对重复的人生，苏飞赫然发现自己的体内竟然存在一个外星智能生物……这一次，他不再平凡！
信息安全审核表 基于互联网环境与技术建立起来的数据库系统在网络营销中的案例 网络安全等保 安吉做网站 信息安全知名企业排名 郑州医疗网站建设 智慧城市信息安全 网络安全产品 上海网络安全公司 阐述我国互联网网络安全形势 网络安全的经典实例 武汉做网站 信息安全审核表 高校信息化 网络安全 保障国家网络安全 淘宝如何实现网络营销 广告网络营销策划 使用asp.net制作网站在制作相册时怎样添加图片呢? 太原免费网站建设 网站推广费用 国家信息安全技术水平考试,-1 珠海专业医疗网站建设企业网站可以备案个人 网络营销工作理想 信息安全集成 有哪些 天津理工信息安全课程 美国信息安全排名 柳州网站设计 国家网络安全部队 做网站价格 乐清企业网站建设公安部网络安全局官网 美国信息安全排名 淮安做网站 国家信息安全技术水平考试,-1 饥饿营销模式概述太原优化型网站建设 购物网站设计需要哪些模块 网络信息安全渗透测试课程,-1 虚拟网络安全 营销的定义及作用 网络安全攻防课程 搜索网站排名