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信息安全管理平台理论与实践网络营销策略实训计算机网络安全法规贴贴万能营销软件下载网络安全与技术简单网站制作滴滴滴…………吐槽系统已连接初号玩家! 没错,我叫郑飞,不是真废,但同样也是真的废! 什么玩意?吐槽系统!?吐槽就可以得到超级能量! 什么,在吐槽系统中!吐槽还分三六九等的级别!吐师!大吐师!吐宗!吐王!吐帝!吐皇!吐尊!吐圣!吐神! 系统连接!嘴遁开始!成为主角!吐槽升级!异界百世!由我畅游! 什么?你说吐槽不能升级?我说吐槽偏偏就能升级! 逗逼三国,二货西游!傻缺封神,皆等去探索吐槽! 穿越百世!属我最狂!要问为何!吐槽最强? 快看郑飞怎样无敌嘴遁?穿越异世,吐槽成神! 一开始便 莫名其妙的穿越到了西游主角被压在五指山下的时间段??这么倒霉?刚开始就卡关了!要活活煎熬的忍耐500年吗?或者是启用超级战斗系统直接崩开五指山?再次大闹天宫?产生不一样的结果,系统的bug!和达到巅峰系统系数产生一次失败战斗的重启!会产生怎样的精彩的故事? 经历四大名著主角不一样的爱恨故事经历、 且看且品小说人生…………不是意外,房东东因为幸运而被甄选,却只成为魔法星界的普通居民。设定小目标就是环游魔法世界,见识什么叫快乐星球。然而风云变幻,魔团会、族老会、真理会与皇经会几方势力暗流汹涌,无意身处其中自己也狼狈不堪。既然如此,那便是登上魔法的最高殿堂重权话事,宵小退散。简介 2021年,一种新型病毒扩散开来,将人变成了不会思考,只会吃人的怪物,人类正面对着空前的危机,社会遭受巨大变故。在嘈杂的魔都,上海,正处于大好年华的少男少女们(只是初二)如何在这个陌生而熟悉的社会中生存?面对自私、背叛、杀戮,他们会丧失生而为人的本性吗?一个月后的神秘无线电称可以让所有人得救,他们又该何去何从? “我不能死,我们都不能死,一个也不能少!”他背负着这样的使命,他必须利用这个力量,拯救所有人。二十年前,龙国江城,第一世家裘家被一夜灭门,本以为一切都遮掩的没有一丝破绽,但是却没算到裘家最小的孩子活了下来,并且成为一代战神,他从来没忘却过家族的仇恨,只不过作为军人的操守,不会无故杀人,除了他的仇敌之外,但一切并不如他所想,他不杀人,不代表不会有人会因为他的追查而被灭口,就比如刚刚别灭的江城汪家,只是撕开了当年裘家灭门惨案的一角而已风来是开始,风过为结束。 风来静寂无声,风过举世皆知。人都有搞笑诙谐的经历或者是一些诡异奇怪的过往,也许是亲身经历,也许是听人转述,再或者道听途说。 但是这些难忘的瞬间,通常都存在于记忆中或者是充当酒桌上茶余饭后的谈资。 偶尔有一天,我想到了其中的一些趣事,开心莞尔之余,觉得应该把它记录下来。 独乐乐不如众乐乐,我就用类似于脱口秀的方式把它呈现出来吧,希望能搏您一笑。如果可以的话,我愿意陪你再来一次一个一个的离奇案件接踵而至。。 所有的真理只是还原案件的一个出发点, 如果你是一个审理着,你会怎么做? 带着你的好奇,你的想象力来跟我一起走进这场博弈的游戏 这一本是全册的短篇小说,就随便写写,有灵感就写,作者比较浪男主魏羽泽前世是一名科学家,因一次意外实验穿越到一个叫玄气的世界。这里的人都会修炼一种叫玄气的东西。男主重生在这个世界,恰巧碰到战争,男主会有什么奇妙的经历呢?
东凤网站建设 移动信息安全课件 郑州做网站汉狮网络 手机网络营销怎么做 裂变营销 病毒营销 深圳电商互联网营销 深圳手机网站设计 国家信息安全一级资质 网络安全工具包 nst 网络安全组组织 无形干扰咨询【www.richdady.cn】 大龄剩女的婚恋经验【www.richdady.cn】 意外事故的主要原因分析【www.richdady.cn】 失业的环境影响【www.richdady.cn】 不爱读书的自我提升咨询【www.richdady.cn】 财运不佳的风水调整咨询【微:qq383550880 】√转ihbwel 婚姻生活不顺的环境影响咨询【微:qq383550880 】√转ihbwel 强迫症的治疗方法【www.richdady.cn】√转ihbwel 外灵干扰的原因分析咨询【σσЗ8З55О88О√转ihbwel 意外的前世影响咨询【企鹅383550880】√转ihbwel 老公家暴的案例分享咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系的前世记忆【www.richdady.cn】√转ihbwel 孩子厌学的咨询技巧咨询【微:qq383550880 】√转ihbwel 性压抑的原因分析咨询【企鹅383550880】√转ihbwel 失业的职业规划【www.richdady.cn】√转ihbwel 失业的原因分析【σσЗ8З55О88О√转ihbwel 心特别累的情感释放威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 与公婆前世的故事分析咨询【σσЗ8З55О88О√转ihbwel 孩子厌学的前世因果咨询【σσЗ8З55О88О√转ihbwel 为什么过世的前世记忆咨询【www.richdady.cn】√转ihbwel 网络运营整合营销 深圳企业做网站公司有哪些 郑州做网站汉狮网络 国外网站模板 深圳手机网站设计 网站分享设计 西电信息安全实验室 网站维护?网络营销能力秀是传销 网络安全工具包 nst 六安做网站公司 深圳电商互联网营销 网络安全学习路线 网站数据库 网络安全员培训 西安网络营销学习网站 企业信息安全建议 免费开网站 微信营销广告多少钱 易奇秀网站 网络安全基本技术 网络安全组组织 许可email营销怎么做 网络安全专家条件 国标 信息安全产品,-1 物理安全 网络安全 网络营销方案简述 常州集团网站建设 网络营销合作方案 网络营销合作方案 小程序网站 网络信息安全的主要特征包括 制作网站公司唐山 网站建设空间申请 合肥网站制作需 免费足网站 网络安全基本技术 厦门市信息安全等级保护备案 网站维护?网络营销能力秀是传销 计算机网络安全服务包括 上海做网站公司 网站关键词长度 六安做网站公司 营销的微博 安徽网络安全专业的大学 网络营销配送 2017 信息安全 上海做网站公司 培训网站建设 佛山网站建设的品牌 网络安全会议2016 微信公众号营销缺点 国家信息安全一级资质 江西网络安全唯品会营销 英文营销网站建设 免费足网站 网络安全工具包 nst 网站视觉 上海网络营销策划 网络运营整合营销 信息安全铁人三项 网站数据库 国防科技大学信息安全 武汉市大型的网站制作公司 做网站要多少钱 六安做网站公司 特色的南昌网站制作 贵阳有哪些可以制作网站的公司吗 学习营销 2010年网络营销大事件 计算机网络安全服务包括 东凤网站建设 公司网络安全措施 网络安全保险怎么买 微信营销广告多少钱 电影网络营销推广公司 保定网站优化 2017 网络安全大会 网络与信息安全 cia,-1 公司网络安全措施 网络安全法 互联网 湛江网站设计 网站关键词长度 密山网站 北京推一把网络营销 合肥网站制作需 2016网络安全热点事件 上海高端网站建设 信息安全治理成熟度模型 什么是互联网营销 企业网站程序 网站建设空间申请 荧光字网站 参与网络安全国家标准 南宁信息安全测评中心 2017 会议精神 国家信息安全 成都网络口碑营销 微信营销广告多少钱 网站建设与制作价格 移动信息安全课件 php网站设计 西电信息安全实验室 东凤网站建设 网站工作室 易奇秀网站 网络营销方案简述 网络个人信息安全 企业信息安全建议和意见 云南网站建 沈阳网站建设 网络安全专家条件 网络信息安全理论与技术四川网络安全案例 无限动力网站 聚美优品创意广告营销 国标 信息安全产品,-1 国标 信息安全产品,-1 商务网站设计vpc网络安全 网络与信息安全讲座,-1 个人网站建设制作 如何打造网站 物理安全 网络安全 上海网站建设的企 网络运营整合营销 网络营销师前景 网络营销配送 太原推广型网站建设 江西网络安全唯品会营销 常州集团网站建设 做软件网站 无限动力网站 深圳电商互联网营销 营销型网站应用 中国信息安全投稿 信息安全员三级 网站备案 办理幕布拍照 网站维护?网络营销能力秀是传销