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信息安全标准 认证证书网络安全通告深圳h5网站制作佛山建网站网络安全与信息活动方案一个虚拟游戏的元宇宙,一个可以与现实连接的游戏人生,一个在游戏里的爱恨情仇!快乐和我们一起游戏人生吧,你总会在我的书中找到你玩游戏的影子!疫情期间在外面漂泊异乡人要怎么回家,魏东阳天天想着要怎么回家的事情,青梅竹马的初恋情人病危。自己在外面要如何才能回去了。拥有灭魔血脉的木子余在十六岁觉醒了灭魔血脉之力,从此告别了平凡人生,更因为一次意外,掉落山崖,获得了不死天功传承,打开了更为广阔的一片天地。穷了十好几代,你告诉我叶家有个仙尊老祖? 叶不凡不得已,牵着牛儿,开始了一段弑仙屠魔的之旅! 修炼我又快又猛,杀人我又猛又快! 惹到了萧家?大武朝最鼎盛的修真家族? 那得说声抱歉了,因为主角外挂已到货! 纳尼,老祖下线? 不要紧,都不要紧,我和牛儿冲上仙罡杀天尊! 这是一个光怪陆离,广大无垠的世界,一条狗是儒门圣者。一个貌不惊人的猎户,是以猎杀古族,异族为职业的猎人。一个文弱书生是高来高去的剑仙。 为了生存,为了回家他们努力奋斗在这陌生的世界。当他们即将踏上回家之路时,友情,爱情,师徒之情,族群的爱护之情,萦绕心头。这是他们发现与这个世界纠缠着太多的因果。他们面临两个选择。是离开,逃避这纷乱的战场?还是留下,与那些同伴一起战斗? 当夕阳余晖散尽时,落雨关已经岌岌可危。天际边缘,两道匹炼携开天之势强势来袭,一战斩十八异界圣人,自此成名天下知。 他们的崛起星海之路,从征服三垣大界开始。从而揭开了宇宙星海的大迷。他们又面临选择,这次的选择关系到整个宇宙星海的未来。是勇往直前,披荆斩棘,趟出一条长生大道;还是颠倒星河,绝天地通,偏居一隅的苟活! 一副副热血,激情,温馨,惨烈,悲情,壮烈的画面将从一次意外的旅游而慢慢展开。我的红颜知己,倾国倾城! 我的后台靠山,权势无边! 我的武功医术,举世无双! 人生几何,对酒当歌,道路长远,上下求索。 如果有一天,你不用再去考虑任何东西,只需要去做自己想要做的,那你会想要去做什么? 高骑大马的白衣少侠,手捧书卷的儒袍读书人,端着破碗的褴褛乞丐,身份贵重的华袍官员······ 如果有一天,你突然穿越之后,又发现了自己不会死,你又会想要做什么? 我叫李三四,木子李,不三不四的三四。 从现在开始,我宣布我是最大的,我宣布我是最自由的,我宣布,这个时代······它就叫李三四! 苍生涂涂,天下燎缭。 妖魔肆虐,正魔相争。 赵念之意外重生来到神秘莫测的修仙世界,成为一名修仙家族中的一员。 家族危机四伏,举步维艰,随时可能破灭。 在长辈的殷切希望和同辈的期望下,赵念之该如何带领自己的家族奋勇挣扎,逆流挣扎,一步步从寒门中崛起。在港岛的乡下有一个九叔,收了两个徒弟,替人驱邪伏魔。 在济州岛有一个风叔,虽然是警员,但是却擅长利用道术破案。 还有在郊区一处人迹罕至的地方,有一个和尚和一个道士,传说身居神通,能驱邪灭鬼。 还有一个茅山弟子名曰傲天龙,在港岛各处游历,无数厉鬼僵尸死于他的剑下。 还有所谓的南毛北马,毛小方和马小玲,那更是灵幻界的扛把子,类似于前世武林盟主一样的人物。 一个鬼怪横行的世界,还有这么多大佬的存在,让李峰想要混吃等死的愿望彻底落空。 萧凡因被人害死意外穿梭异界大陆,无意间打开了屠龙变强系统,从此走上了神挡杀神佛挡杀佛的屠龙道路,走向人生巅峰。
网站建设常出现的问题 网络安全事件 网络营销课程资源 陌陌社交营销 平台营销能力分析报告 网络安全证 小满借势营销海报 网站建设服务费标准 泊头网站建设 2014 国家信息安全专项 祖灵【www.richdady.cn】 纠纷的调解技巧咨询【www.richdady.cn】 查财运专业服务咨询【www.richdady.cn】 脑部不清晰的生活习惯咨询【www.richdady.cn】 忧郁症的心理调适【www.richdady.cn】 冤亲债主的干扰案例咨询【www.richdady.cn】√转ihbwel 无形干扰的心理调适咨询【微:qq383550880 】√转ihbwel 阴间生活的前世解析【www.richdady.cn】√转ihbwel 亲子关系的教育策略有哪些?咨询【σσЗ8З55О88О√转ihbwel 大龄剩女的婚恋心态如何调整?【微:qq383550880 】√转ihbwel 心慌胸闷头晕的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 解梦的前世影响咨询【www.richdady.cn】√转ihbwel √转ihbwel 化解外灵的专业手段【www.richdady.cn】√转ihbwel 人际关系不好的前世因果【www.richdady.cn】√转ihbwel 人际关系不好的咨询技巧【σσЗ8З55О88О√转ihbwel 头脑混沌咨询【σσЗ8З55О88О√转ihbwel 缺心眼【企鹅383550880】√转ihbwel 老公家暴的自我保护【企鹅383550880】√转ihbwel 孩子学习不好的案例分享【企鹅383550880】√转ihbwel 南京网站设公司 2014 国家信息安全专项 营销网页设计 成都 网络安全 工作 设计君网站 小满借势营销海报 优秀网站案列 网络媒体新闻营销 织梦dedecms网站改版后幻灯片部分显示空白的解决方法 email营销的含义 织梦dedecms网站改版后幻灯片部分显示空白的解决方法 开展网络安全宣传 网络信息安全培训报道 天融信网络安全审计系统 网站建设服务费标准 中国网络安全法律法规 信息安全标准 认证证书 网站建设公司平台 无线网络安全现状 顺义手机网站设计 区域整合营销 山东网站优化 网络信息安全管理员 报名 成都 信息安全大会 信息安全技术实验报告 2016年第四届中国网络安全大会 湖北信息安全测评中心 网络安全事件 绵阳网站建设 网站策划方案 锦州做网站 windows7网络安全 漯河做网站 优秀网站案列 信息安全语录,-1 工业控制系统信息安全联盟 天津网站建设咨询 如何做搜索引擎营销 网络安全案例设计 门户型网站特点 上海网站设计 网络安全 教育 昆明网站建设排名 网络安全 最好的大学 网络安全中的个人信息安全 佛山建网站 信息安全等级保护备案表 网站文章图片加标签加 格力公司网络营销定位 网络安全2017大检查 信息安全攻防平台 微信公众号的营销特点 广州外贸网站效果 网络营销课程资源 北京手机版网站制作 工信委网络安全设备 写网站代码 泊头网站建设 南京网站优化公司 建网站需要什么 网站文章图片加标签加 网络营销渠道类型 网络营销英文怎么读信息安全日 简述网络营销的特征 网络安全研发工程师 区域整合营销 网站建设案列 网络营销目标市场选择 网络安全 教育 网络安全平台网 手机网站备案费用 网络安全事件应急流程图 织梦dedecms网站改版后幻灯片部分显示空白的解决方法 设计君网站 百度营销部 北京手机版网站制作 网络营销环境分析步骤 北京wap网站开发 青岛营销推广公司 昆明网站推广优化 信息安全语录,-1 信息安全和管理中心 中国网络安全法律法规 营销网页设计 信息安全要求 2014 国家信息安全专项 深圳h5网站制作 信息安全认证检测机构 网络安全通告 佛山建网站 昆明网站推广优化 网站建设 银川 漯河做网站 网站建设服务费标准 成都营销策划 佛山建网站 营销型网站建 建网站需要什么 windows7网络安全 信息安全相关法规 2014年省级基础电信企业网络与信息安全工作考核要点与评分标准 网络安全部队 网络安全产品的重要性 保定做公司网站的 网络安全报道 网络营销目标市场选择 建网站需要什么 微信小程序做网站 南京网站设公司 上海网站设计 企业网站趋势 松江营销型网站建设 互联网有什么营销资源 简述网络营销组合内容 社区营销 武汉 网站设计公司 杭州营销型网站 山西全网营销服务商 网络安全重要威胁 信息安全等级保护备案表 标准网站优势 网络安全研发工程师 松江营销型网站建设 网络安全 攻防竞赛 高校网络信息安全,-1 昆明高端网站设计 可信网站验证 上海品质网站建设网站八个 互联的信息安全 优秀网站案列 山东省网络安全技能大赛官网 平台营销能力分析报告 site.pan.baidu.com 百度推广营销方案 信息安全技术实验报告 信息安全语录,-1