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
上海电子商城网站制作信息安全标准 认证网络安全法检查内容数据网站怎么做的www的网站怎么申请纳税人信息安全管理网络营销网络市场调研网络信息安全事件分级大数据平台信息安全网站项目设计东方君从小无法修炼使其实力微弱,但因一次机遇,激活了体内沉睡着的黄金圣龙,就此获得了不属于这个大陆的力量,从此实力超凡。 结束了东面西方的明争暗斗,最终成为人类的第九代战神,并渡劫成真神。宅男看动漫魂穿狐妖世界,开局签到生活系统…… 介绍无力 感兴趣就来瞧瞧 妖祖皇宇宏和魔道众魔之主宏天焰。在一万年一次的妖魔大会上,被妖界预言师和魔道大祭祀告知,我们存在的宇宙是多元宇宙,在不同的宇宙都会有生命的存在,在某些特定的条件下,不同宇宙的生命会以灵魂穿越到不同的世界,不久将会有异世界的人或生物穿越到我们的世界,他们是天选之人或是天命之兽。他们的到来会影响正邪两道的运势,道门,魔门,以及佛门都会不择手段想方设法把他们归入门下。众妖魔合力打开天命轮,得知到来的是一人一兽。《李联英本是一个厨师在下班路上碰到有人偷手机报警,人犯被抓没多久他被人叮上在公交车站边厕所里被人用刀捅死》灵魂穿越来到这个世界投胎到了一家买饼的家庭。 超进化异形母体被铁血战士追杀,无意中逃窜到未实验的空间长廊里,肉体被空间拉扯破碎,灵魂穿越到这个世界,投胎成了12尾狐。魔主下山前变成了女人,妖祖却选择涅槃成了美男子,之后他们4个…… 十四年前,陌生少年初次来到这片陌生的时空。十四年后,少年踏上修玄之路。父母离奇失踪,世界暗流涌动,北界风起云涌,且看南宫清如何乘风破万里浪,纵横玄天大陆!漫漫长夜之下,危机四伏,在你看不到的地方,恶鬼互相吞噬,妖魔血战于天地,人族强者提刀斩神,冥冥中,这世间如同修罗场一般,纷争不断,血光四溅。      子受穿越为殷商纣王。 系统发布的第一个任务竟然让他找个女人表白,任务失败回到原世界? 子受表示:当nm的暴君,老子要回去! 为了回到原世界,作死表白了女娲。 却没想到阴差阳错地成功了! 子受:女娲是我女朋友怎么办?急,在线等! Ps:此书又名《我的女朋友是女娲》、《女娲好感度爆满了怎么办?急,在线等!》 这是一个略微畸形的平行世界。 因为科技发展速度太快,商业和文艺的脚步完全跟不上进度。 导致这个世界大部分行业,都处于重技术,轻内容的情况。 而其中,尤其以游戏行业表现的最为明显! 没有电脑游戏,没有手机游戏,所有游戏都是VR的! 甚至连免费游戏都没有! 在这个世界,游戏是有钱人才有资格享受的昂贵物品。 “一个VR设备几十万,穷人就没资格玩游戏了?” 《传奇》《暗黑破坏神》《地下城与勇士》《梦幻西游》《魔兽世界》《英雄联盟》…… 陈风带着前世无数款经典游戏穿越而来,为无数普通玩家发声做事! 一步步走到世界之巅峰,被所有玩家和网友尊称为:游戏界的慈善家! 在火影世界中原本一心向木叶的宇智波止水,为了阻止宇智波一族发动政变,准备对其族人下手,却被团藏偷袭而,最终计划落空而跳下悬崖,而跳崖后的止水却发现自己并没有死,并开始了无尽的旅行从蓝星穿越而来的孤儿夜无明,没有朋友,没有父母,记忆之中更不知自己从何而来,为什么会来到这里……让我们一起来看看少年如何恢复自己的记忆,解开自己的身世之谜。上古大陆,一位拥有先天全体的少年,因为一次意外,引得黑珠入体,从而导致元力全失,至此他失去了所有光彩,族人的陷害让他认识了师尊,在一个分身的教导下,少年披荆斩棘,过五关斩六将,一步步成为真正的强者...... 为了家族命运,少年踏上了独自修炼的征程;为了亲人,他被迫选择了自己不爱的人;为了爱人,他忍受了无数年的自责。 从一个小小的战士,逐步成长为天元大陆至高无上的古神,而最终,为了整个天元大陆,他却付出了所有......
广州专业网站设计企业 网站项目设计 广东网络安全标准 网站层级 信息安全专业全国哪些 伍佰亿书画网网站 信息安全等级保护准则,-1 信息安全管理体系认证标准,-1 建站网站 免费的网站 投资项目【www.richdady.cn】 心慌胸闷头晕的自我提升【www.richdady.cn】 内心恐惧胆怯的情感释放【www.richdady.cn】 暗恋的解决方法咨询【www.richdady.cn】 自闭症的咨询技巧【www.richdady.cn】 前世今生的轮回有哪些科学依据?咨询【企鹅383550880】√转ihbwel 如何发现前世缘份【www.richdady.cn】√转ihbwel 家宅磁场【企鹅383550880】√转ihbwel 亲子关系的教育策略有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何化解冤亲债主的干扰?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的沟通技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的婚恋规划如何制定?咨询【σσЗ8З55О88О√转ihbwel 财运不佳的真实案例有哪些?【www.richdady.cn】√转ihbwel 与女友前世【企鹅383550880】√转ihbwel 冤亲债主干扰的化解仪式【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 内心恐惧胆怯的咨询技巧【微:qq383550880 】√转ihbwel 前世老婆的前世解析咨询【微:qq383550880 】√转ihbwel 失业威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的情感交流方法有哪些?咨询【σσЗ8З55О88О√转ihbwel 与女友前世的前世缘分【σσЗ8З55О88О√转ihbwel 网络安全对社会的影响 清华信息安全网络安全 济南网站优化咸宁商城网站建设 网站网络营销策略组合 重庆营销推广公司电话 网络安全培训流程 网络安全检查办法 企业数据信息安全 软件 信息安全咨询 企业 淘宝服务营销策略 2014信息安全峰会 长沙做网站价格 网络安全和信息化领导小组 广东网络安全标准 企策和营销 idc信息安全管理系统 中美 网络信息安全 中国信息安全法律大会,-1 国外优秀营销网站设计 南宁网络营销大学 b2c商城网站 饥饿营销双刃剑图片 网络安全研讨会 微博营销是一项系统工程微博营销的操作模式包含以下哪些? 长沙网络营销策划网络安全众测平台 深圳品牌网站推广公司 wifi开放网络安全吗 网站系统 网络安全培训策划 百度提供营销功能 传统营销经典案例 营销策划皮包公司 网络安全方面的证书 idc信息安全管理系统 信息安全服务一级资质 饥饿营销双刃剑图片 win8网络安全密钥不正确 2017信息安全奖学金,-1 网站对域名 网络安全培训感想 网站的类型 网站对域名 信息安全工程师cisp认证 信息安全 工作 交流,-1 网络信息安全行业企业 萍乡做网站 团购营销响应式网站需要单独的网址吗 杭州 平台 公司 网站建设 信息安全逆向工程 广东网络安全标准 网络安全培训招生简章 信息安全事件有哪些内容 wifi开放网络安全吗 下列哪个属于常见的网络安全问题 网络安全综合治理行动 信息安全专业全国哪些 网络安全技术项目考试填空题含:暴力破解最基本的两种方法为 网络安全研讨会 向域名解析正常的监测网站发起访问请求截获http状态码 厦门网站制作 广州专业网站设计企业 新建网站‘’ 北大 网络安全 重庆全网营销 独特网站的 百度提供营销功能 工控信息安全 责任 2015年10月网络安全 侵犯信息安全罪 独特网站的 企业网络安全规定 信息安全检测能力 网络安全内容要少 企业网络安全规定 自贡网站优化 网络安全综合治理行动 营销合作 微博营销是一项系统工程微博营销的操作模式包含以下哪些? 网络安全测试用例 企业数据信息安全 软件 搜索引擎营销的 新建网站‘’ 信息安全基本属性 昌平手机网站建设 重庆全网营销 搜索引擎营销的 承德网站建设 网络营销怎么收集数据 gartner全球信息安全市场的规模在2013年达到了672亿美元 承德网站建设 信息安全逆向工程 北大 网络安全 网络安全备案步骤 饥饿营销双刃剑图片 网络安全事件简述 e营销网 网络信息安全事件分级 wifi开放网络安全吗 网络安全培训策划 信息安全服务一级资质 免费教育网站建设 网站制作需要多少钱 信息安全管理体系认证标准,-1 塘厦做网站 网络安全广告文案案例 成都微信营销网站多少钱 独特网站的 河北网站优化 e营销网 信息安全事件有哪些内容 中国信息安全标准体系建设规划 信息安全等级保护备案证明 2014信息安全峰会 网络营销博客 网络安全内容要少 网络安全的威胁的概述 汕头网站设计公司 厦门网站制作 医院网络安全案例分析 建站网站 网络营销新闻 房产中介网站建设 信息安全通知 网络安全培训感想 南宁网络营销大学 成都微信营销网站多少钱 ()是未来网络安全产品发展方向. 信息安全 工作 交流,-1 企策和营销 邮件营销 gartner全球信息安全市场的规模在2013年达到了672亿美元 杭州 平台 公司 网站建设 工业信息安全是什么意思 网络营销博客 信息安全检测能力