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网络安全执法检查企业网络安全学校百度杯网络安全技术对抗赛网络安全行业公司网络安全竟赛企业网站改版升级网站教程佛山企业网站建设特色公司网站维护国家 网络安全 信息一户人家二百年的风风雨雨天空突变,一次偶然的机会人类发现了比自己还强大的物种,贪婪的妄想却把沉睡千年的丧尸给惊醒了,不思考只听他人的人类征服选择了错误的选项差点毁掉世界,圣鹰小队能否侦破这起危机......【圣女+无敌+御兽】 重生后的叶天,发现自己竟然成了魔教圣女手中的傀儡教主。 不甘命运的他却意外觉醒无敌神威系统,从此翻身为王,开启牛哔的开挂人生。 穿越第一天,神功速成,统御万兽! 穿越第二天,横扫八荒,力压诸天! 穿越第三天,夜晚,圣女找上门…… 一天高二学生王羽被奶奶叫回家中,告诉了他世界的真相和家族的秘密,从此走上修真之路踌躇满志考大学,不想2022高考竟是如此之难!考完英语那天下午,林易仰天长啸,痛哭流涕!无颜回去面爹娘,只能凭着手机缓解心绪,谁想一场奇异正向他驰来……王宇重生成白蛇,已经不知道多少年了。 只不过这么久以来,大多数的时间都在睡觉。 睁开双眼。 此世妖魔横行世间,视人族为食粮。 天上仙人高高在上,垂钓人间气运,乱世间纲常。 民不聊生,皆为刍狗。 王宇盘在自己的山神破庙前,心中絮叨: “我为骊山山神,自会保你们平安。” “但谁能告诉我。” “这个刘邦的女孩,为什么会是我的祭品?” “历史上刘邦是斩骊山白蛇的!” 林明穿越到危机四伏的玄幻世界,开局就被成为苦力,惨遭007折磨。   就在林明以为要当一辈子牛马的时候,激活了人生模拟器。   只需要消耗灵石就能够开启模拟。   【第一日:你学习陈胜吴广,一句王侯将相另有种乎震撼众囚,囚犯们热泪盈眶直呼你为天人转世。】   【第二日:你的话在囚犯群体中传播开,你的地位直线上升。】   【第五日:你晚上睡觉的时候,突然有黑衣人闯进来把你带走,你自知实力不够无法反抗。   好在对方没有恶意,你们细细攀谈对方对于你的想法大为震惊,表示还会来找你的。】   【第六日:黑衣人果然来找你,你们相谈甚欢。   你接着这个机会寻问修行之法,对方随手给了你一本没有封面的功法,并且指导你修行。】   【第九日:有人指导加上你没日没夜的练习,你终于有了气感。】   【第二十日:你成功突破进入到炼气期成为一名修士!】穿越,王小明没有想过 绝不可能发生在他身上的 别闹了! 不可能! 不存在的,这辈子都不可能穿越的! 但是就在马桶冲水的一刹那, 他被冲到了古代,光着屁股坐在一堆扎人的木柴上。 可能这是史上最没有面子的穿越了。 面子没有了不要惊,身边所有人都是奇葩,甚至自己居然…… 前面那个蹦来蹦去的女孩是谁?! 一个废柴修仙的坎坷奇葩故事,可能以前看的修仙小说都是骗人的 说好的主角光环呢?说好的吊炸天呢?说好的美女成群呢?天道不公,我便逆天怎么会穿越到爽文小说?居然还是个反派?还是反派他爹? 为了活下去,先打龙王,再斩重生神帝......
建设营销型网站不足之处 网络安全公司 江苏 2016网络安全执法检查 网络安全应急服务支撑单位评选 广东汽车品牌网站建设 阳江做网站 提供企业网站建设价格 网络营销好就业吗? 网络营销好就业吗? 做网站要学什么 迟缓儿的自我提升【www.richdady.cn】 头脑混沌的生活习惯咨询【www.richdady.cn】 阴间生活的前世影响【www.richdady.cn】 大龄剩女的婚恋心态咨询【www.richdady.cn】 自闭症【www.richdady.cn】 与老公前世的前世修行咨询【σσЗ8З55О88О√转ihbwel 财运不佳的心理调适【企鹅383550880】√转ihbwel 有官司的前世因果咨询【www.richdady.cn】√转ihbwel 纠纷的调解技巧【www.richdady.cn】√转ihbwel 与老公前世的记忆解析咨询【微:qq383550880 】√转ihbwel 存不住钱的财务规划咨询【微:qq383550880 】√转ihbwel 不爱读书的改运方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 人际关系不好的环境影响【企鹅383550880】√转ihbwel 婚姻生活不顺的心理调适【σσЗ8З55О88О√转ihbwel 外灵的干扰特征咨询【企鹅383550880】√转ihbwel 事业不顺的职场突破【微:qq383550880 】√转ihbwel 如何维护良好的家庭关系?咨询【微:qq383550880 】√转ihbwel 阴间生活的前世故事【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 无形干扰【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的幸福指南【微:qq383550880 】√转ihbwel 太原网站建设培训 建立个网站 网络安全度量的维度 风水网络营销 网络安全审计系统的原理 做内贸现在一般都通过哪些网站 网络营销好就业吗? 青岛专业做网站的公司 北京网站制作公司 二网络安全工作情况& 建一个网站 等级保护网络安全ppt 玉微营销o2o电子商务网站 新疆 信息安全测评 钢琴网站建设原则 计算机与网络信息安全,-1 智能建网站 信息安全技术研究中心,-1 国家 网络安全 信息 网络营销课程整体设计好网站页面 网络安全公司 江苏 建网站的地址 玉微营销o2o电子商务网站 网络安全法制定本行业 开放网络安全吗 psp网络安全 网站模板网 2016网络安全执法检查 科技营销 牛蛙网络营销怎么样 网站站群建设 外贸网站建设公司策划 外国网络营销参考书 淘宝营销课程 信息网络安全技术培训 2014年第二届信息与网络安全国际会议 智能建网站 单位信息安全等级保护工作部署 整合营销传播目的 微网站和微信 信息安全cc 整合营销传播目的 网络安全审计使用场景 2013 年国家信息安全专项大数据平台安全管理产品测评方案 如何用网络营销的方法有哪些方法有哪些方法有哪些特点 网络安全案例题 信息安全不猛 建一个网站 重庆有那些制作网站的公司 营销的名词医院营销学 网站站群建设 网络信息安全交流会 网站模板网 无锡建设网站 玉微营销o2o电子商务网站 营销式网站 国家 网络安全 信息 网络和信息安全领导小组 钢琴网站建设原则 外网网络安全 阳江做网站 网站建设i 等级保护网络安全ppt wap网站模板 网络安全度量的维度 牛蛙网络营销怎么样 如何黑网站 重庆有那些制作网站的公司 互联网营销目的 网络安全度量的维度 信息安全预警系统 浅论网络营销 高唐网站建设服务商 信息安全预警系统 青岛网站设计公司 无锡市网站设计 网站中文域名续费是什么情况 网络安全审计使用场景 手机销售网站制作 深圳 网络安全公司 信息网络安全技术培训 安卓测试网络安全 广东汽车品牌网站建设 网络营销课程整体设计好网站页面 企业网络安全学校 2012年中国互联网网络安全态势报告 网络安全法 解读 网络安全企业 深圳 2013 年国家信息安全专项大数据平台安全管理产品测评方案 网络安全团队名称大全 网络安全审计系统的原理 系统信息安全要求有哪些内容 淘宝营销课程 南通外贸网站制作 营销公司新媒体运营 网站参数 网站建设制作 阳江做网站 html5网站建设 工信部 加强网络安全备案 广州手机网站设计 企业公司网站建设 信息安全第一的大学 丽江网站建设 2016年网络安全形势 万户网络网站顾问 网站参数 网络安全主题的文章 网站规划的案例 青岛网站设计公司 科技营销 1大型门户网站服务功能 网络营销群 科技平台网站建设 wifi信息安全登记平台 国家信息安全师 公安部 微网站和微信 网络安全网站有哪些 网络安全发展情况 企业手机网站建设信息 网站建设i 西安做网站的公司 无锡网站制作哪家强 军用信息安全产品 西安网络营销职责 网络安全威 网络微信营销公司简介 佛山企业网站建设特色 提升网络安全意识 淘宝营销课程 企业公司网站建设 信息安全不猛 多边形网站 全国公安机关网络安全保卫工作会议 企业网站改版升级