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网络安全案例事件网络安全平台信息安全有什么认证关于信息安全的 国标下载建网站2017年 信息安全大会济南微网站建设什么是网络安全等级保护网络营销的精髓盛世国际网络营销团队网络营销的知识要求讲述了一个平凡人因为一次次的机遇和努力,从而走向一条不平凡的道路。三年前,剑宗第一天才叶雄为了承诺,隐瞒身份入赘到落魄王朝林家。 三年后,林王驾崩,林萱继位,世界暗潮涌动。魔族蠢蠢欲动,各方势力开始扩张版图,林家岌岌可危。 叶雄手持天罚,夺城池,杀魔物,战万兽,“林萱,我会为你斩在一条女帝之路。” 中医专业文。 在另外时空的一颗蓝星,大战后的数百年里,并没有多少的战争炮火,需抵御的,唯有疾病、动物与复杂的自然环境。 在这医疗知识缺乏的世界,一位年轻的小伙子,从水中被救了出来...... 观千年文化,叹博大精深,以故事之形,解日常之需。 ——本作品以异界古代的方式,文章内容以教徒为主,章末传递日常中医知识。 你相信这个世界上是没有鬼的,都市传说也总是有迹可循,八尺大人是人撑着木偶,灵异公车只是高仿车伪装,猫脸老太用面具拐卖儿童。不过当儿童用伞顶着的帽子被家长收回,在街上的“野公交”被交警罚下,人贩子被判刑7年,谁又能解释这之后的状况呢?是神?是鬼?还是人?逃到地球的陆源被人追杀,他不想就这么陨落,他要稳健,要苟住发育。 但是……他那便宜老婆家事有点多。 有人死的时候,把他们一家都托付给了陆源,他不喜欢麻烦,决定横推过去。21世界的凤凰男昊天不幸战死酒场,怨气冲天,魂魄不散,穿越重生到大草原,拯救昊氏于危难之中。 昊天运用在21世纪所学,带领昊氏统一大草原,进而逐鹿中原,建立王朝。本书讲述了一名地球少年被一名贵族收留过上了好生活可是因为这位贵族得罪了其他人人家借君主的手发动攻击除了他外全部被害一国君主收留了他给了他爵位他最后寻找到了格拉尼亚族集合他们的力量建立自己的势力一代“龙”子血脉的觉醒,伴随而来的是强大实力,还是沉重责任,亦或者是那邪恶势力的无尽追杀······一个穷小子,机缘巧合下的一次重生,让他有了重新改变命运和环境的机会,面对家徒四壁负债累累的家庭,面对那个偏僻的小山沟,他一改过去的作风,踏实勤奋,刻苦拼搏,不但让自己和家人过上了受人尊敬的生活,而且,他还积极帮助乡亲,让一个外面闻所未闻的小山沟成为闻名遐迩的富裕之地,最终他的事业走向全国,冲向世界。踏天地,燃道途。破生死,度轮回。血染四方,荒慑八面,我欲立天,动乾坤! 元气大陆,肉弱强食,唯有繁衍到巅峰的元气修行! 少年出自凯云镇,一切从这里开始......。
学网络营销那里好 临清做网站 信息平台网站建设 昆明网站开发公司 网络安全硬件平台提供商 关于信息安全的 国标 网络营销的知识要求 昆明优化营销 通信部门网站备案证明 银川建网站 事业不顺的原因分析【www.richdady.cn】 与女友前世的咨询技巧咨询【www.richdady.cn】 存不住钱的自我提升【www.richdady.cn】 事业不顺咨询【www.richdady.cn】 大龄剩女的社交技巧咨询【www.richdady.cn】 如何避免无形干扰因素【微:qq383550880 】√转ihbwel 事业不顺的原因分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的家庭氛围咨询【企鹅383550880】√转ihbwel 前世今生相关咨询【σσЗ8З55О88О√转ihbwel 感情纠纷的情感沟通方法有哪些?【σσЗ8З55О88О√转ihbwel “缺心眼”对人际交往的影响咨询【企鹅383550880】√转ihbwel 人际关系不好的前世因果咨询【微:qq383550880 】√转ihbwel 外灵的驱除方法【σσЗ8З55О88О√转ihbwel 升迁障碍的职场转型【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 纠纷的法律援助咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 纠纷的自我保护咨询【www.richdady.cn】√转ihbwel 事业不顺的自我提升咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 忧郁症的治疗方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 邪灵的驱除仪式威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 莫名其妙感伤的原因分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 学网络营销那里好 企业要网络营销 网络安全领域 国际会议 媒体营销 日本网络安全专业硕士 长沙网站设计开发 网络营销的知识要求 银川建网站 网络安全 软件设计 网络安全 资质 门户网站的功能 物流整合营销 全网整合营销服务商 信息安全事件管理规范 网站推广服务 营销新思路 网络植入式营销案例 太原网络营销 如何开发手机网站 病毒营销成功经验 网络安全技术架构 网站点击率 全网整合营销服务商 四川大学 信息安全 实验报告 国家信息安全师三级 信息安全 程序员 设计网站多少费用多少 网络安全平台 网站的市场营销方案 edm营销 服务商 2017年 信息安全大会 佛山网站设计特色 国内信息安全专家 网站建设仪器配置表 哈尔滨做平台网站平台公司 dw建网站 客户信息安全与管理 网络安全技术防火墙 网络安全技术是 网络安全防护体系 余额宝网络营销 盛世国际网络营销团队 响应式网站 有哪些弊端 信息安全等级保护 五级标准 网络安全技术防火墙 网络安全 x-team 16年网络安全大事件 南通动态网站建设 建设通网站 营销发展课 如何开发手机网站 网络安全测试方案 济南微网站建设什么是网络安全等级保护 网站的排名和什么因素有关系 国家网络安全研究院 网络植入式营销案例 沈阳做网站公司 学网络营销那里好 个人信息安全管理 陈肇雄 网络安全 计算机技术与信息安全 上海网络信息安全 网络安全 x-team 胶州做网站 太原网站定制 网站设计太原 徐州建网站 客户信息安全与管理 网络安全领域 国际会议 公司网络安全需求报告 门户网站的功能 网站销售 php网站建设公司 信息安全阶段,-1 国内信息安全专家 解放军信息安全测评中心 公司网络安全需求报告 信息安全 研究员 中国信息安全标准体系网络安全和人工智能 网络安全技术是 edm营销 服务商 沈阳做网站公司 信息安全管理岗 招聘 淘宝营销中心 信息安全咨询服务方案 网络安全服务保障方案 太原网络营销 中国信息安全行业协会 信息安全总局 网络营销的精髓 网络安全 资质 外贸网站模板 长沙网站设计开发 信息安全专利 美国信息安全市场规模 网络安全国际会议 上海市网络与信息安全协调小组 信息安全 程序员 郑州个人做网站 奶粉网络营销策划方案 2017 网络安全生态峰会 普创营销策划有限公司 网络营销网站功能 广州营销型网站优化 网络安全法敏感字 物流整合营销 西安网站制作公司 服装外贸网站建设 病毒营销成功经验 服装软文营销策划 上海信息安全管理培训,-1 成都的信息安全公司 成都的信息安全公司 郑州个人做网站 陈肇雄 网络安全 西安网站制作公司 关于网络安全的专业 昆明网站开发公司 dw建网站 潍坊网站建设 网络安全基础答案 共筑网络安全防火墙 广州微网站建设效果王老吉营销 福州企业网站建设 外贸网站模板 云南全网覆盖式营销 怀旧营销的案例 4.许可e-mail营销的三大基础是什么?分别解决哪三个问题? 网络营销的swot 什么不属于网络安全技术 网络安全硬件平台提供商 星巴克怎么用微信营销 南阳网站营销外包公司 太原网络营销 title:网站制作公司 powered by dedecms