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
安丘做网站企业微博营销案信息安全硬件厂商app手机网站设计手机网站和pc网站信息安全电脑推荐网络安全审计内容信息安全个人挑战赛江苏网站建设机构网站建设备案十六年前,他一家三口被人陷害。 父母惨死,他被医仙所救。 十六年后,他奉师父之命下山。 入赘宁家,成为豪门赘婿。 他武道称雄,医术通神。 身为赘婿,却狂放不羁! 为爱你,我甘做赘婿! 为护你,我愿举世为敌!复仇并回归【咸鱼+系统+单女主+御兽+日常轻松】 楚紫:前世我是扑街写手,整日辛苦码字,最终劳累致死,这一世我变成了皮卡丘,化身咸鱼! 黎姝:前世我是女帝,弹指间山河崩陷,这一世同样要走上人族之巅,守卫人族! 楚紫:作为一个有咸鱼系统的皮卡丘,我只想做做每日任务获得咸鱼值,然后买点属性丹,升级成神兽。 黎姝:作为SSS级初代神兽,你不能每天吃饱睡觉调戏我,你要勤奋修炼,与我一同站在人族之巅,驱逐异族守卫人族!等等,你怎么有万千大道了?还有,你怎么把自己躺成天道了? 楚紫:变强非我愿,我只想躺平享受人生! 未来资源短缺,战争频发,外星文明入侵,地心生物发难,人类一败涂地,只能龟缩在边陲小城。我们历尽千难万险研究出平行时空更迭装置来到现在的新宇宙,却发现那个宇宙的怪物正在入侵现在这个宇宙! 少年,不要逃避,能救这个宇宙的只有你了!你将回到那个豪杰辈出,群雄并起的地方,血与火在等待着你,钢刀会武装你的身体,巫术会锤炼你的心智,你必定能重铸人类荣光! “真的吗?燃起来了!但是……我拒绝。”天龙国皇权覆灭后百年来有三个派系组成,士族派,中立派,变革派维持着整个国家的平衡。 但因为一个二三岁的男人改变了这种平衡,他为变革派代表,一心想要铲除世家门阀让国家成为一个人人平等的国度。穿越平行世界,开局就被女星污蔑,沦为史上最强渣男。 结果开启搞事系统。 从系统开启的那一刻,就注定严谨是娱乐圈的一股泥石流。 面对媒体: “我说那不关我的事情你信吗?!” “真的,她说要蹭我的流量,所以……主动找我,我真是无辜的啊!” “你们不相信?我审美是在线的,就她那样的……我也瞧不上啊!” 凭借着自己的才华,他让网友又爱又恨。 甚至还被亲切的称之为——娱乐圈质检员!一阵眩晕竟穿越成了历史上的他,一个集开国君主和战神的合体,一生无败仗。 到了这等虎狼之地,他明白要想在这种乱世中活下去,必须要尽快适应这里的一切,一路在冰冷权谋和残酷战争中逆袭而上。 东晋十六国中统一北方的苻坚站在长安城上举目远眺,形势一片大好。 灭了东晋便能一统江山,然而,他身后是一个强大的民族,慕容鲜卑族的崛起,到底谁能一统江山。一场淝水之战,彻底逆时针改变了华夏历史,最终一代雄主在北方崛起。三年前,他家道衰落,被迫退婚! 三年后,他功成名就,强势归来! 作为战神,为了龙国安宁,他选择放下昔日仇恨;可让他没有想到的是,同袍竟利欲熏心,与仇人结盟谋害自己! 所幸天无绝人之路,林天权大难不死! 三年前,他能成就一方战神,三年后,他依旧能以天人之姿,让那些陷害自己的人,付出百倍、千倍代价!自古以来,宗教传承从未断绝,而宗教的故事也光怪陆离,数不胜数,带你看一些你所不知道存在或不存在的怪事。穿越到大盛朝,无奈遭遇天崩开局,爹娘死得早,这个狗见了都摇头的混子把家财败了个干干净净,只留下一间破烂的茅草屋,就连吃饭都是有一顿没一顿的。   好在路上捡到一个漂亮妹子,还莫名其妙的就成了亲。   好吧,看着可怜巴巴、可爱至极的妻子和一贫如洗的家,作为无权无势的寒门农家子,黄廷晖只能开始凭借自己的双手,不断创造财富……
h5网站作用 企业微博营销案 怎么制作网站 武汉网站开发公司 网站设计文案 网络安全检测评估 给会所做网站 东莞阿里网站设计 app手机网站设计 漯河网站建设 前世因果咨询【www.richdady.cn】 冤亲债主干扰的表现咨询【www.richdady.cn】 内心恐惧胆怯的情感释放【www.richdady.cn】 前世今生的轮回解析咨询【www.richdady.cn】 与老公前世的故事分析咨询【www.richdady.cn】 官司的案例分享咨询【微:qq383550880 】√转ihbwel 感情纠纷的情感修复方法有哪些?【企鹅383550880】√转ihbwel 灵魂治疗与心理辅导咨询【www.richdady.cn】√转ihbwel 孩子不爱读书的家庭教育【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的案例分享咨询【微:qq383550880 】√转ihbwel 前世老公咨询【σσЗ8З55О88О√转ihbwel 财运不佳的财富增长咨询【企鹅383550880】√转ihbwel 前世缘份对现世的影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系的自我提升咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 公司破产咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 学习成绩差的环境影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷的情感和解方法有哪些?咨询【www.richdady.cn】√转ihbwel 前世缘份的重逢有什么迹象?【σσЗ8З55О88О√转ihbwel 升迁障碍的职场突破【σσЗ8З55О88О√转ihbwel 前世因果咨询咨询【σσЗ8З55О88О√转ihbwel 网络安全大 网络安全监测软件 静安区品牌网站建设 考研网络营销 中国国家级网络安全应急响应组织 信息安全硬件厂商 转化率营销 全网营销的推广方式 搜索引擎营销使用步骤 网站h1 网络营销效果评价指标体系 手机设计培训网站建设 惠州做网站 信息安全个人挑战赛 可信赖的响应式网站 信息安全电脑推荐 信息安全服务公司 佛山外贸网站建设方案 武汉网站建设企业 网络有哪些营销方式 网络安全 经验 枣庄做网站 网络安全业务 CISM注册信息安全员收入 网络安全管理的主要功能有访问控制和什么? 信息安全分类 福州自适应网站建设 怎么用域名建网站 网络安全企业50强2017 企业网络合作营销案例 网络安全基础ppt 单位信息安全服务情况 app手机网站设计 深圳营销推广价格 h5网站作用 定制网站 山东网络安全大赛 网络安全大 网络安全管理的主要功能有访问控制和什么? 宜宾网站优化 网络安全人才奖 网络安全监测软件 制定网络营销的策略 启明网络安全 重庆整合营销价格 信息安全高级专员 网站设计文案 网络安全人才奖 全网营销的推广方式 2015年北京信息安全培训班 珠海移动网站建设费用 高端网站定制费用是多少 模板网站有什么不好 中国国家级网络安全应急响应组织 杭州 信息安全厂商 广州数字营销 网络安全技术与防范温州网站制作价格 香港网站建设 3g网站设计 网络安全的最新动态 山东临沂网站建设 转化率营销 漯河网站建设 网络安全检测评估 单位信息安全服务情况 全网营销的推广方式 广东网络安全 企业网络合作营销案例 中国国家级网络安全应急响应组织 信息安全硬件厂商 转化率营销 《信息安全等级保护管理办法》 qq网络安全中心 武汉网站公司 信息网络安全学院 信息安全服务公司 蓬莱建网站 网络营销效果评价指标体系 网络金融信息安全网址辽阳网站建设 网站设计文案 给会所做网站 怎么制作网站 搜索营销公司怎么样 网络营销策划推广方案 技术信息安全 信息安全人员资质 网站营销手段 营销推广课程 网络安全监测软件 安丘做网站 网络安全主要涉及信息存储安全信息传输安全 急性营销病 重庆网站设计 哪个国家学营销 曲靖网站建设 网络安全应急处理 被黑的网站 给会所做网站 武汉网站程序 可信赖的响应式网站 信息安全人员资质 如何通过dreamweaver做一个完整丰富的完整网站 哪个国家学营销 网络营销事件营销 网站怎么注册 手机设计培训网站建设 网络信息安全监测 网络营销与消费者心理 网站制作资讯 江苏网站建设机构 网站理念 免费建立网站 如何防网络安全 佛山外贸网站建设方案 h5网站作用 淘宝 病毒式营销 昆明网站设计电话 金融企业 网络安全法 技术信息安全 b2b网络营销的问题 静安区品牌网站建设 酷黑网站 网络安全和管理 网络安全周致辞 信息安全高级专员 信息安全服务公司 惠州做网站 邢台网站建设服务周到 负有网络安全监督管理 大学网络安全改造 网络有哪些营销方式 重庆网站设计 广东网络安全 关于手机网络安全 信息安全检查网