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网站建设套餐报价事件营销缺点学做网站网网站建设技术深圳网络安全技术公司网络营销11网络口碑营销成功案例免费网站申请网络安全的技术有哪些一个持续万余年的计划 只为对抗 第一圣人毁灭世界的阴谋 却不想其他世界的误入 让整个行动造成了无法挽回的偏差 是绝地重生? 还是陷入绝望…… 最强兵王归来,竟发现家人被逼迁,一怒之下,风云骤变,血流成河。他本想闲云野鹤悠闲度日,却陪她纵横商界叱诧风云,为她打下一片江山。200人将在一个孤岛上生存一年,活着出来的人能获得一亿美元的奖金。面对周围人的猜忌与背叛,主办方设计的阴险的突发事件,幸存者将如何突破重围,活着走出这座孤岛呢?古墓伴生,他们说我是天降灾星,终南山续命,我用十年时间成玄门魁首,而我的一生,却从那纸婚书开始……这个作者比较懒二十年前,一场大火,父母双亡,与妹妹分离。 二十年后,接到刺杀任务,在战斗过程中,猜测目标是和自己分开了二十多年的妹妹。 因为这个猜测,导致任务失败,受到组织惩罚,“意外”死亡。 重生后,在成长路上,发现了二十年前的那场大火里,还隐藏着不为人知的秘密……秦煜魂穿大唐,激活了个说书系统,却没想到开局任务就说【长生诀】。 秦煜:在大唐说长生诀?系统你怕不是嫌我死的太慢!你咋不叫我去讲玄武门之变? 系统:那就讲玄武门之变,要么现在死! 秦煜:我也不是怕死,就是爱讲玄武门之变! 李二:听个书,结果听到揭秘玄武门之变!这厮当真是不怕死呀 误入修仙世界,只想苟活于世,却不想误入阴谋之中。 推进前路的,不仅仅是幕后黑手…… 还有隐藏的,深处的未知 漆黑的夜里一道电光闪过,闪电带来的光芒让陈己看清楚了面前的“东西”,那是一张惨白的脸,右眼眼眶中正留下一滴血泪! “鬼吗?能够扛得住我的攻击吗?”陈己看着自己的拳头喃喃自语。 高中生陈己从外省回到家乡县一中读书,在这个平平无奇的学校里,他发现了许多古怪的东西……金榜现世! 首次开启名剑榜,上榜之人就能获得丰厚奖励! 面对名剑榜,大秦祖龙无比自信! “寡人手中天问剑,必是名剑榜第一!” 金榜公布,名剑榜第一,神剑-夜! 望着排名,始皇祖龙直接麻木了! 而咸阳深宫内一位慵懒少年的脑海中不断有机械声音响起! “叮,三国青釭剑上榜,获得暴击奖励!” …… “叮,大秦神剑-夜上榜,获得超级暴击奖励!” 赢乐笑道:“祖龙爸爸不好意思,奖励都归我了!” 始皇祖龙:“儿啊,你是要卷死爸爸啊!” “大秦就交给你了!”
新型网络营销是什么 信息安全 十三五 做一个网站要多少钱 深圳整合营销 公司网络营销的方案设计 上海运营营销号大公司简介 口碑好的搜索引擎营销企业 网络与信息安全学什么 网络安全 飞天诚信中国电子学会信息安全专家委员会 世界环境日借势营销 孩子压力大的前世记忆咨询【www.richdady.cn】 儿子抑郁症的自我提升【www.richdady.cn】 强迫症的症状与诊断咨询【www.richdady.cn】 心慌胸闷头晕的前世记忆咨询【www.richdady.cn】 升迁障碍的咨询技巧【www.richdady.cn】 亲子关系的案例分享【www.richdady.cn】√转ihbwel 精神不振的前世因果咨询【www.richdady.cn】√转ihbwel 婴灵的真实案例有哪些?【微:qq383550880 】√转ihbwel 无形干扰的环境影响【企鹅383550880】√转ihbwel 意外的心理调适【微:qq383550880 】√转ihbwel 查财运专业服务咨询【微:qq383550880 】√转ihbwel 意外的原因分析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的轮回转世【www.richdady.cn】√转ihbwel 维护良好家庭关系的秘诀有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 解梦的梦境解析咨询【www.richdady.cn】√转ihbwel 家庭关系威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 通灵与心理学结合咨询【微:qq383550880 】√转ihbwel 孩子不爱读书的家庭教育方法有哪些?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 无形干扰的前世因果咨询【微:qq383550880 】√转ihbwel 解决孩子不爱读书的问题咨询【企鹅383550880】√转ihbwel 营销与社会营销的区别 邢台做网站公司 推广与营销 免费网站申请 邮箱营销系统哪个好用 网络营销分为哪些 公司网络营销的方案设计 浦东新区网站建设 承德网站制作加盟 网络安全团队标识 做一个网站要多少钱 网络安全都有什么安全 阜阳网站建设 公安机关网络安全工作 境外建网站 烟台网站建设设计 局信息安全 军用信息安全产品认证 高唐企业建网站服务商 税务系统信息安全基本要求 信息安全 十三五 国家网络安全与信息化领导小组 网络安全监测设备有哪些内容 网站建设 php 企业网站 软件定义网络安全 内容营销 社会化营销案例 周口做网站 中央网络安全和信息化领导小组 内容信息安全专员 旅行社网站模版 shopex站点栏目内容编辑后在网站上无法显示是什么原因 网络安全 飞天诚信中国电子学会信息安全专家委员会 网络营销方法和应用研究 中国中央网络安全和信息化领导小组办公室 营销课案例 网站建设模板 信息安全专研 营销与社会营销的区别 软件定义网络安全 公共网络安全服务 网络口碑营销成功案例 温州微网站制作哪里有 国家网络安全与信息化领导小组 公安机关网络安全工作 加强信息安全的建议 家居企业网站建设平台 高唐企业建网站服务商 马云营销企业 承德网站制作加盟 定制建网站 宝洁网络营销案例分析 宝洁网络营销案例分析 番禺网站建设怎么样 网络安全监测设备有哪些内容 家居企业网站建设平台 营销资料下载 周口做网站 网络与信息安全学什么 网络安全 不可见特性 营销订单培训 典型软文营销案例 网络安全技能竞赛的内容 网站建设套餐报价 高州做网站 有关互联网网站 app/网站建设 免费网站申请 网络安全提供 公安部网络安全测评中心 idc网站建设 公共网络安全服务 上海运营营销号大公司简介 新型网络营销是什么 营销课案例 网络安全主要涉及( )信息传输安全网络应用安全等3个方面 2017年度网络营销 郑州高端网站深信服 国家信息安全测评信息安全服务资质 安全工程 中国中央网络安全和信息化领导小组办公室 品牌网站建设维护 南通网站建设知识 局信息安全 网络安全团队标识 信息安全等级保护自查. 信息安全等级保护自查. 营销订单培训 shopex站点栏目内容编辑后在网站上无法显示是什么原因 信息安全 十三五 网站建设 php 企业网站 企业手机网站建设流程 网络营销机会 立体化营销 海口网站制作 网站建设报价 星巴克场景营销案例 西宁网站建设 做一个网站要多少钱 内容信息安全专员 北京信息安全公司业务 上海银基信息安全技术有限公司,-1 国家网络信息安全技术研究所 合肥营销型网站建设 大型免费网站制作 互动营销失败 学做网站网 怎么免费建网站 南宁制作营销型网站 卫龙网络营销 网络安全法 6月1日 淄博网站排名seo 典型软文营销案例 郑州高端网站深信服 国家信息安全测评信息安全服务资质 安全工程 星巴克场景营销案例 去哪里学网络营销师 推广与营销 杭州的网站开发 邮箱营销系统哪个好用吗 宝洁网络营销案例分析 网络安全提供 idc网站建设 高唐企业建网站服务商 网站建设 php 企业网站 有关互联网网站 网络营销11 企业信息安全介绍 网络安全 不可见特性 科技企业网站设计制作 网站建设报价 动态网站 湖州网站建设 网络营销方法和应用研究 定制建网站 定制建网站 2015 网络安全大事件 加强信息安全的建议 合肥营销型网站建设