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
网络安全服务方案开启网络安全认证检测网络安全与文明电子邮件营销方式专注武汉手机网站设计网络安全优化方案济南seo网站建站2016 网络安全竞赛 工信部高校网络安全案例网络安全 指标网络安全的应用(修仙升级开挂流)诸天万法我皆会,天下万物我皆有。修仙?仙还用修的吗?这不是打怪升级吗? 吾所修之道名无敌! 天道?小道尔~四十岁的酒水业务员李可,重生至1982年,凭借对后世的了解和天赋之眼的能力,开启暴富人生。 滚滚六道两茫茫 不知何处是家乡 身分血尽魂未灭 魔神归来无良绝 天地未分之初称为鸿蒙虚无(或混沌),鸿蒙之气便是唯一。不知多久孕育三灵,其一为女娲、其一为鸿钧、其一为问生。再不知多久孕育出一山名曰不周,又不知多久鸿蒙之中天地初成、上圆下方、飘忽不定。三灵以不周为基托天地于其上,以四维之力蕴养不周。此后三灵便居于初成天地之中。 许久以后天地之中孕育一灵曰盘古,盘古托天踏地天地初分。至此后天地孕育万灵,女娲以土造人为人族之始祖,后古神大战引四维不稳不周受损上天崩裂,女娲又补天救天地间生灵。 又许久人族出现纷争战乱不断,使四维不稳加重不周无养天地晃动,鸿钧教化人族、女娲安抚万灵,问生以本命神元修复四维使不周永固天地永存。被极东王国学院院长,捡回抚养长大的陈仒。没有能力而被抛弃,成为图书馆里员。 在平凡的度过四年后,一个小偷闯入图书馆把他杀害。本应已死的他,却诡异复活。 在被人一系列的设计后,卷入王国的权力斗争,以及和邻国的冲突之中。 期间失去了最近亲之人,同时卷入了更大的漩涡之中我,叫做程敏刚,她,叫做杜淑萍,杜淑萍是我的老婆,一场突如其来的变故席卷全球,远古的“神”苏醒,人类陷入了死战。最终人类战胜了“神”。200多年后,“神”卷土重来,秘武-血君子 重现,有个注定的人,将拿起它,走向诛神之路。没有比这个更离谱的事情了! 陈墨只不过喝了几口水,居然马上就要死了? 【你如果还想活命,来,献祭十年寿命,我告诉你方法。】 陈墨愣愣的看着脑海中,一盏青铜灯表面浮现的血色文字。 他登上一艘被黑气环绕的豪华游轮,没想到青铜灯上的文字却立刻更新。 【我不会告诉你,这艘船上能造成你死亡的因素,大概有六千多万个……】 他吃了一颗仙气盎然的果子,以为是主角光环降临,获得了奇遇,从此走上人生巅峰! 结果青铜灯浮现文字。 【你吃了一颗充满污染气息的水果,等着死吧……】 陈墨有点控制不住下巴,这是金手指? 点燃灯芯,可以获得超凡能力。 他充满期待的盯着青铜古灯。 【抱歉,你的脑袋进水了,点燃失败。】 陈墨没有穿越,但是他一直赖以生存的世界病了,他也病了。 “如果我还有得选,我希望继续以人类的身份活下去。”一位家境贫寒的少年,经历了常人难以想象的苦难,磨砻砥砺,奋发向上。好不容易华丽转身,完成了人生意义上的大逆袭,一时平步青云,风光无限! 这期间,少年也先后得到了好几位绮年玉貌少女的青睐,演绎出许许多多荡气回肠,缠绵悱恻的爱情故事。其中的情与理,是与非,仇恨与挚爱,痛苦与欢乐,人性与心魔,交互编织成一道道直逼心灵拷问的风景,让人热血沸腾又扼腕长叹!妖吞三千界,帝陨傲世间。为她凡尘一坐三千载,起身回首凡尘,往长生。平平无奇的打工人王虎穿越了?还穿越到了一个天赋渣渣实力菜鸡的人身上?怎么办?还好我自带系统,不说别的,爷钱多!想入最好的云海书院但天赋不行?没关系砸钱!想学习功法没办法理解?没关系砸钱洗髓丹可以拥有!有人想群攻?不好意思,已经砸钱开宗门了呢! 你我本无缘,就靠我砸钱!
网络营销的用户行为 什么叫全网营销 四川网站设计 网络安全 指标 网络营销的特点和功能 市南区网站建设 自媒体渠道营销案例 edm营销模版 nba网站建设 网站如何优化 公司破产的环境影响【www.richdady.cn】 财运不佳的风水调整咨询【www.richdady.cn】 与女友前世的故事分析【www.richdady.cn】 亲子关系的案例分享咨询【www.richdady.cn】 精神不振的原因分析【www.richdady.cn】 婴灵的预防措施咨询【企鹅383550880】√转ihbwel 解梦的前世因果【www.richdady.cn】√转ihbwel 大龄剩女的婚姻选择【企鹅383550880】√转ihbwel 前世缘份的故事如何改变命运?【σσЗ8З55О88О√转ihbwel 亲子关系咨询【www.richdady.cn】√转ihbwel 大龄剩女的咨询技巧咨询【企鹅383550880】√转ihbwel 意外的原因分析【σσЗ8З55О88О√转ihbwel 为什么过世的心理调适【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的情感维护方法有哪些?【www.richdady.cn】√转ihbwel 亲子关系中的沟通艺术咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 脑部不清晰的前世记忆【微:qq383550880 】√转ihbwel 公司破产对股东的影响【www.richdady.cn】√转ihbwel 事业不顺的职场调整有哪些方法?咨询【www.richdady.cn】√转ihbwel 家庭关系的咨询技巧【微:qq383550880 】√转ihbwel 孩子不爱读书的心理分析咨询【σσЗ8З55О88О√转ihbwel 中国网络安全市场份额 潍坊网站托管 营销工具 信息安全攻防赛 烟草行业计算机信息网络安全保护规定 重庆微信营销软件公司 网站设计分析 邢台做网站哪儿好 常州企业网站建设价格 中山企业网站建设公司 什么是信息安全服务 网站制作推广 佛山做网站建设 网站建设的目标有哪些 企业网站个人可以备案吗 网站建设成功案例 重庆江北营销型网站建设公司推荐 市南区网站建设 汕头市网站建设公司 广东网络安全对抗赛 免费注册网站 网络安全测评培训教程 病毒营销六要素 网站构造 一键做网站 信息安全技术 专科 自媒体渠道营销案例 网络营销小文案例子 互联网网络营销加盟 最实战的全网营销培训 成都 网站建设 武汉手机网站建设动态 关于网络安全报道 烟台软件优化网站 广州网站维护 网络安全密码如何查找 高校网络安全案例 网络安全周 开展 整合营销推广 建 导航网站好 市南区网站建设 网络营销观后感 株洲网站制作 微营销百度百科 edm营销模版 关于开展信息安全等级保护安全建设整改工作的指导意见,-1 微营销百度百科 网络安全与文明 信息安全风险评估流程 信息安全保障协议书 系统 关于网络安全报道 佛山做网站建设 做网站行业的动态 高密做网站 小米盒子网络安全性wpa 网络安全现状 2017病毒营销的方案 珠海网站建设 乐清做网站的公司有哪些 湖州网站设计 北京网络营销外包 济南微网站 网络安全服务方案 电商营销部 武汉手机网站建设动态 外贸营销实战教程 外贸营销跟国内营销最大的不同之处是 网络安全服务方案 网站导航营销的优势 网站建设 北京 烟草行业计算机信息网络安全保护规定 网站建设未来发展前景 网站设计分析 南京网站建设招聘 高密做网站 校园网站设计 有经验的佛山网站设计 一键做网站 耒阳做网站 四视图网站 网站制作合同 行业网络营销分析 达内培训 微络营销深圳 烟草行业计算机信息网络安全保护规定 网络安全目录 武汉营销型网站 公安部网络安全研发 营销文案的特点 厦门做网站培训 设计 网站 企业网站项目流程 电商营销部 什么叫全网营销 成都公司建网站 电子邮件营销方式 信息安全工具排名 佛山外贸网站建设平台 中国网络安全市场份额 2017全球网络安全事件 网络安全工作小组 信息安全管理法,-1 edm营销模版 金坛做网站 企业网站个人可以备案吗 网站类型分类 网络安全信息安全实验室 营销文案的特点 频率营销几级 上海定制网站建设公司 信息安全攻防赛 网站建设和优化的好处 科技与营销 嵌入式系统信息安全 安徽省 信息安全协会 烟台软件优化网站 金坛做网站 支付宝的网络营销为例 网络安全测评培训教程 什么是信息安全服务 微营销百度百科 邢台做网站哪儿好 网络营销需要做什么的 杰森影像网站建设 网络营销小文案例子 网站如何被收录 网络营销的特点和功能 专注武汉手机网站设计 网站导航营销的优势 网站构造 东莞网站建设服务公司 公安部网络安全研发 做网站报价 网站制作推广 网络营销需要做什么的 企业网站项目流程 网络安全目录 流行的网络安全软件