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
济南网站营销网络安全小方向 软件标准网站优势校园网站制作模板信息安全监管要求网络信息安全泄露,-1网站差异网站建设优化服务价格成都信息安全协会客服大学生公众号 营销赵匡胤从一介无名小卒,历经高平之战、清流关之战等大小战事淬炼,成为后周殿前都点检,执掌殿前司兵权。五代十国最英明神武的帝王柴荣正值三十九岁壮年,不幸陨落。主少国疑之际,赵匡胤陈桥兵变,黄袍加身,建国大宋。带着200级三转大法师的记忆,陆阳重生回到了十年前,命运跟他开了一个玩笑,曾经失去过的,被夺走的,他都要重新拿回来。游戏中的赚钱技巧、副本攻略、传奇任务、装备出处、图纸秘方、战斗技巧他全都知道,且看一个重生玩家如何带着兄弟们横扫万国、焚尽天下,开启一段火神的传奇!【都市重生+宠妻+赎罪+商战】   “周飞,你相信有来生么?”   “如果有可能,我不想有来生,我只想重活一次,这辈子,有太多的遗憾了……”   濒死的虚弱感和无力感,让周飞连声音来自何方都无法分辨,不甘心、悔恨、遗憾…百般情绪涌上心头。   苟活三十多年,他对所有人都问心无愧,唯独对不起妻子和儿女!   带着这股极强的悔意,周飞重生到了十年前。   看着那一大两小三个身影,他跪倒在地,热泪盈眶。快意恩仇,一笔带过。爱恨情仇,情感交融。一人一剑,快意江湖!这快意恩仇的江湖,且看辜义踏过江湖!金榜现世! 首次开启名剑榜,上榜之人就能获得丰厚奖励! 面对名剑榜,大秦祖龙无比自信! “寡人手中天问剑,必是名剑榜第一!” 金榜公布,名剑榜第一,神剑-夜! 望着排名,始皇祖龙直接麻木了! 而咸阳深宫内一位慵懒少年的脑海中不断有机械声音响起! “叮,三国青釭剑上榜,获得暴击奖励!” …… “叮,大秦神剑-夜上榜,获得超级暴击奖励!” 赢乐笑道:“祖龙爸爸不好意思,奖励都归我了!” 始皇祖龙:“儿啊,你是要卷死爸爸啊!” “大秦就交给你了!” 我的父亲飞升了,他给我留下了满世界的仇家,我该怎么办? 别人都可以靠爹,为什么就我不可以?这个世界上怎么会有这么坑儿子的爹啊! 不说了,我逃命去了。 可悲的不是失去,而是失去后,无法继续前行。 这是一个冗长的梦,带你走进不一样的玄幻世界!遥远的蓝星遭遇前所未有的危难,于地球寻找帮助,林飞作为第一批灵魂穿梭的人类,他的未来将走向何方。【历史种田+江湖八门+富可敌国+复仇】 秦书铭穿越到燕赤国,成为八门祖师爷之子,江湖人尊他为少帅。 开篇背负血海深仇,少年和小妹相互扶持,亲情成为这冰冷的世界唯一的温度。 穿过刀林阵,喝过鸡头血;一拜天为父,二拜地为母,从此少帅入江湖。 这是一个充满骗局的世界,风水局,老千局,扎飞局,鲁班局,层出不穷。 上一世身为百亿富豪的秦书铭表示,不好意思,在下擅长局中局。 小妹问:哥,为什么那些坏人都在替你做事? 秦书铭:傻妹子,因为你哥我是坏人头子! 小妹问:那为什么皇子和军机大臣都对你弯腰? 秦书铭:因为哥有钱啊,富可敌国的那种。 小妹问:那为啥女土匪也对你弯腰? 秦书铭:你还小。有少年和尚,喝酒吃肉,醉卧美人膝,由魔入佛…… 有少年道士,一只青驴、一名女鬼相伴,朝着道祖行进…… 有少年儒生,提笔写下传世之作,誓要做天下万灵的夫子…… …… 有人问少年:“你是谁?!” 白衣少年摸了一下腰间钝剑,仰头喝了口酒,咧嘴一笑:“吾名叶天,叶子的叶,天帝的天,来自秦国荒城,是一个天才丹师,更是一个天才修炼者……”
电商网站构建 网络营销就 标准网站优势 企业网站适合做成响应式吗 建外贸网站的 中国工控网络安全危机 深圳营销型网站建设 陕西网络与信息安全测评中心珠海企业网站建设费用 营销学专家 信息网络安全2017 心慌胸闷头晕的环境影响咨询【www.richdady.cn】 财运问题在线咨询咨询【www.richdady.cn】 如何识别外灵干扰的症状【www.richdady.cn】 大龄剩女的社交技巧【www.richdady.cn】 外灵干扰的心理调适【www.richdady.cn】 事业不顺的职场突破技巧有哪些?咨询【www.richdady.cn】√转ihbwel 婚姻生活不顺的前世记忆【σσЗ8З55О88О√转ihbwel 暗恋的心理成长【微:qq383550880 】√转ihbwel 与男友前世的前世解析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 阴间生活的前世记忆咨询【σσЗ8З55О88О√转ihbwel 人际关系不好的案例分享威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的修行建议咨询【σσЗ8З55О88О√转ihbwel 公司破产的咨询技巧咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子厌学的前世因果【企鹅383550880】√转ihbwel 财运不佳的财富规划如何制定?【企鹅383550880】√转ihbwel 财运不佳的财富管理【微:qq383550880 】√转ihbwel 发育倒退的医学检查咨询【www.richdady.cn】√转ihbwel 存不住钱的解决方法【σσЗ8З55О88О√转ihbwel 投资项目的自我提升【σσЗ8З55О88О√转ihbwel 精神不振的生活习惯【www.richdady.cn】√转ihbwel 网络安全检测软件 网站备案不通过怎么解决 营销技术 衡水专业网站建设公司 美国 互联网金融 信息安全 网站设计公司深圳 2017中国网络安全峰会 专业设计网站 信息网络安全2017 搜索引擎营销基本要素 全网整合营销推广公司 网络安全小方向 软件 免费域名注册网站 金昌网站建设 输入网络安全性金? 营销运营推广服务内容 网络安全检测软件 网站备案不通过怎么解决 营销技术 衡水专业网站建设公司 美国 互联网金融 信息安全 网站设计公司深圳 2017中国网络安全峰会 专业设计网站 信息网络安全2017 搜索引擎营销基本要素 全网整合营销推广公司 网络安全小方向 软件 免费域名注册网站 金昌网站建设 网络营销目标是什么 网络安全受到哪些威胁 网站模板下 渭南做网站 网站主域名 中国信息安全测评中心eal3 请公司建网站 专业设计网站 网络营销天培营销 信息安全的产业联盟 网络安全周专题 重庆南岸营销型网站建设公司推荐 协议分析与网络安全 h5做网站 网络科技网站设计 陕西网络与信息安全测评中心珠海企业网站建设费用 有趣的网站设计 网络营销目标是什么 公安局网络与信息安全,-1 网络安全技术比较 谷安网络安全就业班 重庆营销公司排名 网络安全检测软件 网站的不同类 在常用的网络营销方法中哪些网络营销的方法更适合中小企业 网站制作策划 网络安全小方向 软件 建国内外网站有什么区别 重庆营销公司排名 衡水专业网站建设公司 网站差异 免费域名注册网站 昆明网站设计公司 信息安全等保必要性 营销电商 网络安全身份验证功能有什么用途 信息安全制度体系 病毒性营销推广方案 深圳营销型网站建设 流量网站制作 深圳网站推广 北京营销型网站 网络安全 强制认证 国家计算机与网络安全中心主任 网站的表单 珠海微网站 网站的不同类 信息安全服务资质 hp 医疗行业网络安全报告 中国工控网络安全危机 微信营销成功 谷安网络安全就业班 大学生公众号 营销 信息安全嘉年华 营销运营推广服务内容 信息网络安全2017 信息安全专业学校 泊头网站建设 飞鱼网络安全吗 网站制作策划 企业网站适合做成响应式吗 网站页面优化 网站模板下 2016年政府信息安全事件 2016年政府信息安全事件 2015 电力 信息安全 重庆南岸营销型网站建设公司推荐 网络有哪些营销方式有哪些 顺德网站建设基本流程 信息安全哪个部门,-1建网站代理商 重庆信息安全协 信息安全等级保护规范 新疆网站制作 专业设计网站 朝阳商城网站建设 网站建设优化服务价格 河南信息安全研究院有限公司 网络营销ar是什么意思 网站建设的后台登录 全国大学生信息安全技术大赛 网络营销产品 传统营销的公司 昆明网站设计公司 自己如何创立网站 自创网站 南京网站公司 金融行业网络安全架构 营销技术 银川怎么做网站 网站备案不通过怎么解决 网站需要什么 大数据网络安全专业版 南京网站公司 信息安全服务包括 2016信息安全学校排名 网络营销知识传播文章 建网站工具 新疆网站制作 国家计算机与网络安全中心主任 茶叶网站建设 全网营销招聘园区网站建设 营销软文广告 主流网络安全技术 中国信息安全测评中心eal3 网络安全检测软件