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
移动网络安全吗cn网站建设多少钱美国信息安全部门银川建网站信息安全测试资质证书武汉专业网站建设菏泽做网站沈阳建设公司网站网络安全重要性 flash展示型网站制作公司班里的美少女转校生告诉我,我们已经被卷入了一场狼人杀游戏当中,随时会死? 可是......为什么我的狼人杀,画风不一样? 深夜,无人居住的房间里传出了诡异的声音, 黑暗的海洋馆深处传来了阵阵婴儿的啼哭声, 桃花盛开的小村庄在黑夜里露出了血色的獠牙...... 我能不玩了吗...... 江城穿越平行世界,绑定神级科技系统,系统的触发条件是让他独自研发一项改变世界的发明。 于是他选择了可回收火箭,打造猎鹰九号升级版,在苦心研究五年之后,所有测试结果均为完美,成功率百分之九十五,一经上市,保守年收入五十亿。 为了拿到投资,他将自己的所有理念模型,包括他获得的荣誉电邮到了摩根银行,竟然真的得到了回信,并且对方愿意前来核验。 恰逢相亲走错桌,遇到年轻貌美的投行女大佬,没想到摩根银行的投资条件是让这项技术为M国专利,江城愤然拒绝。 摩根银行为此和媒体恶意渲染抹黑回收火箭技术不可能实现,想要毁掉江城。 关键时刻,看到一切的相亲女大佬林若溪在媒体面前支持江城,并且怒投十亿! 三个月后,当猎鹰九号升级版问世登上太空,并且成功返回之后,全世界都震惊了!而立之年的男子在破产失恋病危后,一觉醒来来到了新的世界,打开了新的人生…… 穿越到文娱行业刚刚起步的平行世界,方淮南激活了影帝系统,可以获得前世任意一位影帝级人物的表演经验! 他一个人就开创了华娱影坛十年的辉煌时刻! 他是《无间风云》里城府深沉的黑帮老大琛哥; 也是《枪燃》里忠义痞气交织的打手阿来; …… 正当所有人都以为方淮南只会演反派角色的时候, 他跑到横店去出演了《猫妖传》里五分钟的配角, 将盛唐气势下,那位如醉似癫的李白演出了神韵! 这时,所有人才知道方淮南的戏路宽阔到何等地步! …… 面对采访,融合了上百位影帝经验的方淮南很谦虚的表示: “我,不过是站在了巨人的肩膀上罢了。”天道之下的人,在追求着天道。只是,天道又是什么?人在追求什么?我是任友州是一位高二学生,平常生活中就是屌丝一位,刚被喜欢的女神何月月抛弃。每日都是在神神噩噩的度过每一天。突然有一天在往学校的途中突然眼前一白,身上穿的高中校服竟离奇变成我初中时期的校服。去到学校重新看到初中时期的女神。任友州是否将会重蹈覆辙呢叶帆重生在元宇宙刚刚开始的时候。 没有人比他更加清楚元宇宙到底是一个什么样的东西。 这是一个地球文明与高级文明联网的时代。 这是一个地球变异、人类接受各种全新科技、基因突变、生命进化的时代。 这是一个充满了机遇与挑战的时代。 前世的叶帆只能仰望强者,在卑微中走向死亡。 这一世,叶帆要向生命的终极进化迈进!“试着了解自己,未知的自己往往比熟悉的自己更有力量。” 飙车时被雷劈死是一种什么样的体验?青年小伙事业有成,家财万贯,衣食无忧,怎料天有不测风云,在秋名山之上正欲与人一较高下,随着倒数的结束,引擎的响起,他!被雷劈死了???他,一名退役杀手为了寻找当年真相,毅然回国。但另他没想到的是遇到的美女见一个爱一个。这不就是人生巅峰,人生天堂吗?但与之而来的还有危机,谜团,身世,背后的阴谋,暗流涌动……妖族,那是人族的好朋友,经常贡献妖骨妖皮,嗯,当然是过期的作废的。 魔族,妖族说那是我们跟人族的共同敌人,太不人道了,应该人道毁灭。 精怪,别动,谁都别动,那是能量,懂不懂,能量,都是我的! 这个世界,有人族,有妖族,有魔族,有精怪,人族只是其中最弱小的种族。
网络安全科普 银川建网站 珠海网站制作国家网络安全小组成员 信息安全的基本要求是 门户网站模板 国内渠道整合营销 营销型网站平台 东营做网站 网站项目进度 工控网络安全 研究方向 暗恋【www.richdady.cn】 头脑混沌的咨询技巧咨询【www.richdady.cn】 感情纠纷的前世因果【www.richdady.cn】 前世今生的故事有哪些经典案例?【www.richdady.cn】 前世老婆的前世因果咨询【www.richdady.cn】 外灵对人的影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何化解冤亲债主的干扰?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的前世记忆咨询【σσЗ8З55О88О√转ihbwel 事业不顺的应对策略【σσЗ8З55О88О√转ihbwel 婚姻生活不顺咨询【σσЗ8З55О88О√转ihbwel 什么原因意外的前世故事咨询【σσЗ8З55О88О√转ihbwel 事业不顺的心理调适【企鹅383550880】√转ihbwel 无形干扰的自我提升【www.richdady.cn】√转ihbwel 缺心眼的原因分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 大龄剩女的婚恋建议有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的婚恋规划咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 升迁障碍的职场规划咨询【微:qq383550880 】√转ihbwel 心慌胸闷头晕的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的原因分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 失业的职业规划咨询【企鹅383550880】√转ihbwel 珠海政府网站建设公司 美团外卖的网络营销 企业建网站的 程序 网站设计公司长沙 网站制作 中企动力公司 网络安全认证中心 信息安全章程范本 菏泽做网站 idcisp信息安全管理系统 美国信息安全排名网络安全技术规范 网络安全科普 网络营销入门指引 山西网站制作公司哪家好 网络安全重要性 flash 信息安全条例 确定 蓝色网站 企业网络安全系统 企业网站需要响应式 网站创建公司网站 个人信息安全的案例 女生做网络营销 信息网络安全产品备案 网络安全工作室 营销网络搭建方法 美国信息安全部门 罗湖网站制作 盈利模式和营销推广 网络安全信息检查 福州金山网站建设 上海信息安全培训班,-1 女生做网络营销 网络安全科普 国内渠道整合营销 企业网站建设公司排名 网络安全研究方法 徐州市网站 企业建网站的 程序 国内ui网站有哪些 网络信息安全测评企业 沈阳建设公司网站 网络营销入门指引 信息安全备案申请模版,-1 如何开展网络社群营销 怎么建个自己的网站商网营销 网络营销的定义及常用方法 网络安全标准体系 移动网络安全吗 企业建网站的 程序 系统网络安全测试 信息安全产品 等级 网络安全的经典实例 银川建网站 山东省信息网络安全协会是骗人的吗 珠海网站制作国家网络安全小组成员 网站制作 中企动力公司 指纹营销 仿建网站 企业网站需要响应式 番禺网站优化 idcisp信息安全管理系统 长沙建网站公司 信息安全的基本要求是 信息安全章程范本 公安部网络安全局官网 怎么建个自己的网站商网营销 网络安全教学平台 国内渠道整合营销 软件开发网络安全 营销动态 嘉兴的网站设计公司有哪些 罗湖网站设计 如何开展网络社群营销 珠海网站制作国家网络安全小组成员 工控网络安全 研究方向 南京交通大学信息安全 北京网站建设公司 国家信息安全服务 网络营销成功的案列 北京网站建设公司 营销动态 信息安全技术 信息系统安全审计产品技术要求和测试评价方法 营销的图片 信息安全产品厂家,-1 网络营销入门指引 网站项目进度 企业网络安全系统 信息安全管理 mobi 网站红色 营销型网站平台 公安部信息安全产品检测中心 全国网络安全大会 网络安全等级保护细则 公司信息安全管理建议和意见 系统网络安全测试 网络安全杂志社 信息安全条例 确定 信息安全设计 网站模板下载 北京高端网站设计外包公司 宜兴网站建设 蓝色网站 口碑营销的概念 徐州市网站 南京交通大学信息安全 企业网络安全系统 外贸最热门营销方式 我理解的网络营销 网络安全法 拒不整改 企业网站需要响应式 某某白酒进入南方市场请用4p营销理论为它制定销售策略 网络安全法 拒不整改 罗湖网站制作 网站创建公司网站 创新的南昌网站制作 网络安全陪训 厦门网络营销师培训学校 个人信息安全的案例 新媒体营销深圳 太原网站开发哪家好 网络营销外包公司 女生做网络营销 网络安全杂志社 武汉网站设计 云南微营销软件 信息网络安全产品备案 信息安全口令旅游网站管理系统 美团外卖的网络营销 网络安全方面国内外研究成果 网络安全工作室 网络信息安全测评企业 信息安全的基本要求是 网站制作软件 保障国家网络安全 优质公司网站 软件开发网络安全