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
知乎 无线网络安全网站 制作公司盐城做网站网络安全加密名词解释网络营销含义网络安全测试用例网络安全比赛微博 事件营销方案互联网网络安全周秦皇岛网站建设信息安全的发展与风险管理 ppt我出生那天,父母上吊自杀,村里人想要拿我祭河神。 洪水围而不退,爷爷将我丢进河里,九龙拖着我回来。 我的命是爷爷给的,爷爷留给我的姻缘和造化,居然有人妄图染指。 人性的丑陋、欲望的贪婪、索命的黄泉。 为了活下去,我必须要完成我的使命!这个世界本来是关于修仙的,一切都向好的发展……但是有一天魔法突然复苏了!!!惊动了修真界!短短几天修真界崩溃了!!!新的秩序诞生了。 魔气降临在地球上面,让世界发生了巨大的变化!世界的另一边…也缓缓露出水面。 世界的尽头,是什么? 世界之外有什么?是宇宙吗? 魔法复苏?这是什么情况? 魔气复苏?这又是什么惰况? 是魔法复苏、还是魔气复苏?这是福还是祸?主角该怎么去面对? 灵气复苏?魔法复苏?是魔法复苏,还是魔气复苏!究竟是什么呢?主角是人还是魔! 还是说地球原本就是一个魔法的世界! 渊辰是男生的名,临渊星辰。深邃,明亮。他是游走于世间的鬼魂,时而有质,时而无质。非人非仙,三界不留。不知何所从来,亦不知何所归去?用心,记下这浮生相遇,探寻生命的起点和终止!以及他背后的真相…… 因为携带违禁物品,苏浩被迫加入了民俗调查局。 在这里他见识到了无数不为人知的秘密。 你见过装扮成旅店的鬼吗?你听过在无人的客厅响起的人脸识别失败的声音吗? 欢迎来道诡异的世界”简介:天若灭我我逆天,神若阻我我弑神,小青年杨业回家祭祖不小心掉落悬崖被血魔殿主残魂带领穿越异界,强势崛起,打破上世界枷锁,开启了一个新世纪的传奇,并留下了万古传说, 九天之上我为巅, 覆灭星辰反手间, 血魔一怒银河碎, 帝骸遍布星空间一直遭受女朋友母亲无情刁难辱骂为“破代驾”的他,却因其英俊,技术好被绝美女客户看中,青睐有加! 旋即,叶飞豪在卷入一场女人的战争后,可谓时来运转,竟意外获得第一桶金,并寻得惊世灵根,激发旷世医武道法! 从此他投身商海,掀波弄潮,美女财富涌来;更是纵横医武,打脸各色权贵,横扫都市,成就一代豪横世家!“他,被称作民族脊梁。在风云变幻的民国时期,他进军教育业,创办无数中小学,以及顶尖大学,以一己之力使无数龙国少年获得良好的教育,使得龙国的科研水平走在了世界前列。” “他进军工业,招收无数流民,旗下无数家轻工业工厂,活人无数。” “正是因为他,龙国出现了遮天蔽日的坦克、舰船、飞机、大炮……” “短短十年间,他赫然已经完全改变了龙国的样貌。经济强大、工业强盛、科技先进……他自然已经成为世界首富!” 特约记者如此说! 而面对记者,林玄却不由得大吐苦水。 “我的成功,真的真的都是运气使然!” “我最初的目标,真的就只是亏钱而已啊!” “子荆,我死后,不要将我埋在小孤山,那里太冷了,我不喜欢。” “陈子荆!你个孽障,竟做出如此大逆不道之事,你如何对得起列祖列宗!” “陈子荆,我们都是替你去死的,你的良心何安?!” 陈子荆失忆了五年,这五年来他一直都在追寻着梦里的那个地方,总觉得那里有很重要的东西在等着自己,有很重要的责任需要自己去负。 本以为自己只是芸芸众生里最不起眼的一个,可那一日,遇狼妖,诛邪出,陈子荆五年来的平静生活彻底的被打破……我是谁?我在废墟残垣中醒来,人类和机器人的战争让世界都濒临毁灭,谁来救救我们?谁来救救世界?谁来拯救这次末日之战?本该平凡,奈何世道所逼,捡起三尺长剑,斩尽黑暗护你永生
网站建设移动端是什么意思 海淀网站设计 信息安全从业 信息安全工程专业兴趣研究报告 学院信息安全工作 网络安全技术介绍 互联网网络安全周 平台营销能力分析报告 上海手机网站建设电话咨询 简述网络营销的特征 佛教视角下的前世今生【www.richdady.cn】 事业不顺的改运方法咨询【www.richdady.cn】 婴灵的超度与慈悲心咨询【www.richdady.cn】 孩子学习不好的咨询技巧【www.richdady.cn】 感情纠纷的情感和解【www.richdady.cn】 与老公前世的故事分析【企鹅383550880】√转ihbwel 事业不顺的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家宅磁场的检测工具咨询【www.richdady.cn】√转ihbwel 大龄剩女的婚姻建议【www.richdady.cn】√转ihbwel 化解【σσЗ8З55О88О√转ihbwel 情感心理咨询在线咨询【www.richdady.cn】√转ihbwel 什么原因意外的前世记忆咨询【σσЗ8З55О88О√转ihbwel 前世今生的故事有哪些经典案例?【微:qq383550880 】√转ihbwel 事业不顺的职场提升路径有哪些?【企鹅383550880】√转ihbwel 前世老婆的前世修行咨询【微:qq383550880 】√转ihbwel 前世老婆的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的轮回解析【www.richdady.cn】√转ihbwel 感情纠纷的情感咨询如何进行?【σσЗ8З55О88О√转ihbwel 前世今生的轮回有哪些科学依据?【σσЗ8З55О88О√转ihbwel 邪灵的驱除仪式咨询【σσЗ8З55О88О√转ihbwel 知乎 无线网络安全网站 制作公司 五级网络安全危 中国黑白it信息安全 网络安全主要解决问题 2016年关于网络安全的案例 博客营销有哪些优势 承德网站制作公司 网站策划方案 公安部关于网络安全 2017世界网络安全大会 高校信息安全建设方案 信息安全工程专业兴趣研究报告 昆明网站推广 政府信息安全管理 做网站的人 网站建站前期准备工作 知乎 无线网络安全网站 制作公司 五级网络安全危 中国黑白it信息安全 网络安全主要解决问题 2016年关于网络安全的案例 博客营销有哪些优势 承德网站制作公司 网站策划方案 公安部关于网络安全 2017世界网络安全大会 高校信息安全建设方案 信息安全工程专业兴趣研究报告 昆明网站推广 政府信息安全管理 常用网络安全技术 上海营销 网站成本 信息安全等级最高级别 柳州网站建设 金融网络安全案例分析 德阳响应式网站建设 网站策划方案 高校网络安全教育 新的营销新观念 网站 制作公司 营销中的市场细分 网络安全比赛 互联网有什么营销资源 简述网络营销的特征 网站建设移动端是什么意思 网站实例 常用网络安全技术 信息安全系 学院信息安全工作 便宜的网站设计 高校信息安全建设方案 知乎 无线网络安全网站 制作公司 海尔集团品牌营销战略 网络信息安全法 2016 西安做网站的公司 信息安全的职业 深圳网站建设 公司元 公安部信息安全电视会议 顺义手机网站设计网络安全攻防书籍 互联网有什么营销资源 网站建设图 网站建设图 信息安全系 信息安全保护是指,-1 信息安全的职业 银川建立网站 网站推广渠道 网站建设公司营销推广 小米成功营销案例 乔布斯式营销 科技类网站色彩搭配 人物营销 网站成本 营销中的市场细分 如何成为顶级信息安全 网络安全主要解决问题 南通江苏网站建设 小米网络营销应用分析 信息安全和管理办法 网络安全培训材料 常用网络营销推广思路 信息安全的发展与风险管理 ppt 德阳响应式网站建设 大岭山网站 潍坊网站建设多少钱 网络营销环境分析步骤 2013网络安全案例 网络营销方向学什么不同 网络安全和信息化官网 网站建设新闻分享 网站建设论坛 博客营销有哪些优势 最先进的网络营销 西安做网站的公司 拍拍网营销 信息安全 c++ 推广及建设网站 中山营销外包 什么是网络安全风险 承德网站制作公司 国内做网络安全的公司排名 信息安全工信部,-1 跨境网络营销的发展观念 玉林网站建设 互联网网络安全周 什么是网络安全风险 便宜的网站设计 旅游网站案例 网站建设公司营销推广 山东专业企业网站建设 信息安全人员等级 嘉兴品牌网站建设 网站开发建设 南京seo营销 行业网络安全培训 网络安全 逆向 杭州网络安全解决方案 海尔集团品牌营销战略 网站建设初期 怎么管理网站添加代码 办公室 信息安全工作 网络安全 硬件 网络安全控制层次 2017世界网络安全大会 做网站的人 2013网络安全案例 密码信息安全测评中心 网站关键词库 信息安全等级最高级别 可信网站验证 视频网站设计 高校信息安全建设方案 营销网 重庆网站推