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
服务厅网络安全管理网站互动网站移动端化妆品 网站建设案例广州 信息安全公司达内网络营销要学多久绵阳的网站建设公司网络营销免费自学网网站建设优化服务价格沈阳科技网站首页武则天:“李余,真是朕的好孙子,我大唐的骄傲!” 狄仁杰:“李余是我见过最完美的人!” 李白:“看了李余的诗,我忽然发现自己不会了。” 李隆基:“李余是个坏人!” 李余:“你们不用夸我,我只是一不小心就造了盛世而已,很普通的啦!”游戏竞技+重生穿越+星际战争+权谋争斗+自带系统+异世界 罗天,世界最成功元宇宙游戏《开元》的创立者,年薪百万,早已走上人生巅峰! 可当他醒来时发现,自己陷入了时间循环中,既然已经知道下一秒会发生什么,那要好好对付开除他的老板、背叛他的下属,对,更不能放过给他戴绿帽子的妻子! 刚爽完,竟得知所谓的人生循环不过是游戏副本,愤怒! 好在300年后重生的他,免费获得英俊潇洒的身体一枚。 啊?这身体还是皇帝的傻儿子,那好歹给我配个顶级系统吧! 且看罗天如何在未来的元宇宙世界里,呼风唤雨、无所不能,一边打赢星际战争,一边收获美女们的爱情,一步步成为宇宙主宰,拯救世界的大英雄!一代传奇摘星者! 新作者一枚,笔耕不辍,保证日更,谋生不易,求关注一波,送我上榜!【2020末世科幻经典】 系列第一部《星神劫》。 穿越数百万光年,他居然又回到了出发的地方——地球。 “他”重返地球了,但没人认得。没人知道,这颗行星上文明的毁灭,正是拜他所赐。 他舍弃了种族和肉体,依靠附体三柱神强横的灵力,一步步操纵着文明的演化。 QQ群:926185550,欢迎进群讨论。由于核战争的爆发,大量的能量,摧毁了地表许多的城市但是一直在各种动植物体内沉睡的基因苏醒了。各种各位出现过的神奇动植物都出现。人类的生存空间越来越小……妖乱末世,巨兽屠城,万妖夜行,人间如狱。 神秘少年,半妖之身,踏上猎妖风云路,书写一代妖相传奇! 且看他,猎妖、除魔、斗巨鳖、擒天龙、佐明君、征天下、运筹帷幄、纵横捭阖、荡除妖兽、平定末世!横推都市无敌手,轩辕重开林仙人。 灭门之仇,断腿之恨,血海深仇,不报难安! 我林枫修仙归来,你们这些练武的也配?一场神秘的游戏,胜利的人,将会被带去哪里?没人知道,我只是一个游戏的参与者,静静的完成着自己的任务,杀人,放火······然爱心盼今身付,故瑶无悔千里寻!夜半梦醒红妆泪,抚琴扰绪恨难平!地幽凰鸣孤仟影,初心不变万世情!楼窗望月忧愁梦,奈何红殷落他身!爱恨情仇姻缘起,瑶琴仟梦负心零! 命运的无情铁手将你们搓圆拍扁,你们可曾不甘白白任其施为?梦中捡到的这册《耐普罗德之书》,便是打开命运枷锁的钥匙。 去异世界吧。虽然这东西还在测试阶段,但请别担心,绝不是什么新人坑杀局,任何人只要订阅了我们的vip礼遇,无论是锻造、铭文、附魔之类的小伎俩,还是法术百科、血统、神术甚至干脆天降猛男,各种神乎其技的能力不在话下。 手头不太宽裕嘛?不要紧,作为好运到可以捡到耐普罗德之书的你,值得我们小小的搏一把。试用一小段时间吧,相信再次见面时,您已经把定金准备好了。 尊敬的林飞扬,这次您的旅程有些特别,作为有着丰富异界冒险经历的体验官,我们可是对您寄予了厚望。 实话说,这个试验场出了一点小问题,它应该,也只应该是一个普通的魔法世界才对。我们需要您顺便帮我们把它夺回来。为此,我们慷慨的特许您使用一些还在测试中的功能。 将《耐普罗德之书》贴在这,然后签名。不然你出不去。 By一位不愿意透露姓氏和性别的崔姓男子明末农民起义军领袖李自成兵败九宫山身死,其孙儿李来亨和高夫人等于清康熙三年率余部与清军死战得脱,而后,李来亨屡得奇遇,历经千难万险,自创剑宗,带领麾下人众修炼成神,号之曰&amp;quot;灵剑门&amp;quot;…
顺义广州网站建设 有关互联网营销的点子 国家信息安全管理办法 上海市信息安全活动周 绵阳的网站建设公司 旅游网站设计模板 信息安全管理体系包括 邹城建网站 汽车软文营销的案例 在常用的网络营销方法中哪些网络营销的方法更适合中小企业 迟缓儿的治疗方法【www.richdady.cn】 外灵干扰的自我提升咨询【www.richdady.cn】 冤亲债主干扰有哪些常见症状?【www.richdady.cn】 失业的原因分析咨询【www.richdady.cn】 不爱读书【www.richdady.cn】 如何缓解耳鸣症状【www.richdady.cn】√转ihbwel 大龄剩女的情感生活咨询【微:qq383550880 】√转ihbwel 大龄剩女的心理调适【企鹅383550880】√转ihbwel 与老公前世的因果关系【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家宅磁场对居住者的影响咨询【企鹅383550880】√转ihbwel 前世老婆的咨询技巧【微:qq383550880 】√转ihbwel 儿子不读书【www.richdady.cn】√转ihbwel 什么原因意外的前世缘分【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 失业的咨询技巧咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生的修行方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 大龄剩女的婚姻选择有哪些?咨询【σσЗ8З55О88О√转ihbwel 磁场化解服务咨询【σσЗ8З55О88О√转ihbwel 家庭关系的矛盾化解咨询【企鹅383550880】√转ihbwel 前世缘份的重逢有何迹象?咨询【企鹅383550880】√转ihbwel 前世缘份的化解方法咨询【微:qq383550880 】√转ihbwel 公安部网络安全通报局 网络安全日志 做互联网营销执行 手机网站设计 上海网络安全专业大学 信息安全等保必要性 重庆网站开发设计公司电话 css 2017 网络安全 在常用的网络营销方法中哪些网络营销的方法更适合中小企业 服务营销网 厦门网站优化公司 网站建设com 默网络营销 广州 信息安全公司 互联网营销是干什么的 江苏 第三届信息安全技能竞赛 网络推广微信营销公司 学校网站网站建设 建设网站网址 中山网站建设文化策划书 全网营销软件 在网站中添加百度地图 默网络营销 摩拜单车的网络营销 微商营销模式缺点 :国家网络与信息安全中心 信阳做网站 网络安全资讯 平面设计师网站 贵州网站优化 信息安全测评机构资质 建网站的公司 网络安全实验报告 信息网络安全 监 预警 机制 网络安全方面国内外研究成果 做网站责任 网站的设计 大型企业信息安全规划 网络安全资讯 网络游戏营销 信息安全管理体系包括 国家网络信息安全网站 国外网络安全事件有哪些 信息安全口令 广州网络安全学校shopex站点栏目内容编辑后在网站上无法显示是什么原因 丹阳网站建设 温州网站建设案例 信息安全等保必要性 微信营销的发展 时间 太原门户网站 邮箱营销案例 服务营销网 网络营销对未来的前景分析 策划 营销 互联网营销是干什么的 网络营销开始先怎么做 网络安全的保护技术 网站移动端 在常用的网络营销方法中哪些网络营销的方法更适合中小企业 国际间的网络安全 360信息安全大会 上海市信息安全活动周 太原门户网站 自己怎样建立个人网站 汽车软文营销的案例 网站如何上传 网络营销目标包括哪些 网络营销团队培训课程 国家信息安全工程技术中心,-1 做互联网营销执行 江苏 第三届信息安全技能竞赛 网络营销数据的来源网络安全检测系统 软文营销标题的作用 有关互联网营销的点子 网络安全防范的技术手段有哪些? 大学生公众号 营销 建造网站 网络安全的保护技术 网站建设com 2016网络安全峰会 网站建设优化服务价格 罗湖高端网站设计 化妆品 网站建设案例 温州网站建设案例 长沙网站建设工作室 深圳营销型网站建设 织梦v57网站底部power by dedecms 怎么去掉 网站建设发布 职场信息安全 创建网站公司 徐州 网站栏目名 河南信息安全电子认证中心 营销电商 网络营销对未来的前景分析 2016年网络安全年会 信息安全技术 信息系统安全审计产品技术要求和测试评价方法 平面设计师网站 网络安全陪训 莱芜网站优化 信息安全等级保护规范 郑州网站建设哪家有 网站建设公司顺义 信息安全周 营销课程 我司如何自己建设动态网站 红蓝攻防信息安全演练 上海市信息安全活动周 设计网站需要什么条件国家网络营销师 网络安全标准体系 国家信息安全管理办法 广道网络安全审计 国外网络安全事件有哪些 顺义广州网站建设 吉安高端网站建设公司 服务厅网络安全管理 邯郸做网站 旅游网站设计模板 谷歌网站地图 河南信息安全电子认证中心 微商营销模式缺点 网络营销目标包括哪些 搜索引擎营销竞价账户托管 网络安全安全大会2015 网络营销目标包括哪些 吉安高端网站建设公司 建设网站网址 网站后台 设计 营销电商 社会大学生网络安全总体数据分析 信息安全服务包括 化工公司营销推广方案 公安部网络安全通报局 全网营销软件 打造公司的网站 惠州网站推广