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
加强 提高信息安全网站主域名网络安全ac网络信息安全实用教程珠海网站设计建个普通网站深圳网站建设迅美2017网络安全对抗赛网络安全法公安部营销主要是营销什么电力工控信息安全专题交流会病毒性营销推广方案互联网营销 步骤网络安全化草案网络安全审计使用场景营销建制安康网站建设网络信息安全作文400信息安全峰会网络信息安全课件温州制作网站信息技术安全技术信息安全事件管理指南网络安全技术博客网络信息安全实用教程单位网络安全加强网络安全意识2013 年国家信息安全专项大数据平台安全管理产品测评方案网络信息安全相关专业,-1关于网络安全的文献网站更新后为什么不显示我的人生才经历过短短二十来年，但也足矣让写下我二十来年的第一部回忆录，回忆有苦有甜，苦中作乐。无尽虚空，暗域缘起，幻境连绵，魂牵梦萦。如泡现盈破，似影隐现。通篇尽是浮想联翩，异想天开之事物，是略显温和的怪谈。内蕴玄机，有缘人或可勘破。残疾少年张铁生，意外获得药王传承，自此村花、俏寡妇，哭着喊着找他治病，而他也成了远近闻名的妇科圣手。七十年代，在贫困的山村，六个小伙伴的真实故事。 他们在现实的生活中挣扎着；不同的家庭命运，造就了他们不同的性格，也走出了不同的人生道路…… 其中，以贫困家庭出生的刘毛毛为主，汝汝、高高……，以及自己的妹妹为辅，展开那个时代的人生经历； 刘毛毛一个天资聪颖的孩子，因为父母是残疾，导致孩子忍饥挨饿，为口吃的逐渐养成偷盗习惯，但是，他极力想改掉以前的毛病，努力学习，以知识改变命运，事与愿违，父亲的左腿逐渐恶化，危及生命，在没有钱医治时，依然走向了偷盗而失去学业……； 三圣从小是个音乐怪才，脑子却对数学失去记忆，老师发现后义无反顾的忙碌着救治三圣的记忆，在落后的农村老师的举动被视为神经不正常，还有认为是骗钱，被汇报到公社，教育部门，老师被处分而告终；高高家庭条件相对优越，经过努力学习考上大学； 汝汝因为父亲离婚导致家庭破裂，失去上学信心，而流浪到社会上……。 玄天界史载金圣5年，一位丹王横空显世，超生死，掌乾坤，彻底改写了玄天界的历史。。。。。。　 玄天史开篇有言：出身贫微，潜质卓绝，年少时被蒙尘埋没，后，以自身信念自强不息终成不朽，成就丹王之王。他，名曰：叶天封。咸鱼舰长董墨轩意外身亡后来到了崩坏世界，原本想继续自己舰长职责的他却发现自己成为了一名死士。 所以，董墨轩决定………… 我不做人了，女武神们！ 我要成为死士王君临天下！ 然后………… “哦，是吗？” 看着拿着枪顶着自己女孩，董墨轩不屑的表示………… 不要杀我，我真的是好死士啊啊啊啊啊！！！一场错乱的穿越,叶落天穿越到一个修仙世界。全能的妖孽,层出不穷的武技,无所不知的博学,预知未来的能力。吾即重生,当作执掌天地之人,但有不从者,杀!但有不服者,斩!一言定乱世,一剑斩九霄,驭神兽,铸神兵,破虚空,成帝主,翻手为云覆手为雨,且看叶落天逆天而起,君临万界!一个患上白化病的普通高中生在“指定的时刻”激发异能，并与朋友们一起开启不一样的人生 同时主角也发现，他的朋友的身份似乎不一般，而因“书”而起的能力逐渐给他和朋友们带来重重阻碍，甚至带来致命的危险，面对现实的考验主角和他的朋友们能否找到被埋没的真相？“快来救我，我被困在相亲对象家的棺材里了！” 接到这个电话的吴邪和谢小花一脸懵逼。 现在小年轻都玩的这么花？ 棺材？ 还把自己困进去了？ 而当他们根据地址赶来之后，却险些丧命于这看似普通的店铺当中！ 最后找到了霍秀秀，却也没办法将其解救。 即便是暗中保护的小哥和吴三省也手足无措。 反而是差点被守护的扎纸人给一刀两断！ 在这危急万分的时刻，阴风四起，一顶纸人抬轿停在了门口...... 多年以后。 霍秀秀注视着陌上少年：“扎纸匠、赶尸人、阴阳先生.....顾言，你到底还有多少身份啊？” 顾言腼腆的笑了笑，“方方面面都懂亿点吧！”希瑞尔已是整个宇宙最为强悍的存在之一！无界妖瞳赋予了他洞悉一切奥秘的能力，可他此刻却无法看清身前女子的面容！在那团绝对深沉且有些扭曲的黑暗之中，潜藏的才是整个宇宙最终的宿命！也是他和她之间故事的结局！
制作一个网站步骤排版 企业网站建设技 soc 信息安全 H5建网站 中国信息安全管理研究 网站建设金 电力工控信息安全专题交流会 上海企业网站优化 信息安全评估的作用 gb/t 20984-2007 信息安全风险评估规范 网站 模板 建设公司网站的重要意义 小企业网络安全方案 顺德建网站的公司 建国外网站 信息安全峰会 国家信息安全相关政策,-1 病毒性营销推广方案 关于网络安全的文献 信息安全cc 深圳网站建设迅美 cpa营销 上海网络安全 网络安全领域 证书 linux网络安全技术 成都网站设计制作价格 网站 模板 制作一个网站步骤排版 ids技术在网络安全中的应用 ids技术在网络安全中的应用 网站seo 南京新媒体营销培训 单位网络安全 珠海网站设计 运营商网络安全方案 gb/t 20984-2007 信息安全风险评估规范 顺德建网站的公司 网络安全的书籍推荐 什么是营销策略组合 网络营销服务有哪些