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
网站案例信息安全事件网络营销项目管理策划方案信息安全联合实验室长春网站制作网络营销平台 定价接设计网站山东省网络安全技能山东信息安全委员重庆整合营销哪里最好秦缘穿越到全民模拟人生的世界: 如果改变人生轨迹打破人生限制,可以成为人上人;如若失败,只能当个寿命只有五十多岁的下等人,终生贫苦。 毕业典礼:觉醒贤者。 贤者模式:可以推演一切。 模式时能力越强,推演越详细,成功率越高。 一世:【重生末世,觉醒超级异能,二十岁基因变异死了。】 “贤者模式开启,推演抑制基因变异的方法。 【你攻克基因突变,成为世界主宰,拯救人类开创修仙科技时代,寿终正寝。】 【模拟结束:贤者模式增强一倍、你获得三滴龙血、你获得灵米提供资格、你获得一次模拟机会、你获得......】 某世:【18岁的你,被女帝逼婚,虐待致死。】 “贤者模式开启,推演征服女帝方法。” 【女帝唱征服,获得最高评价。奖励:阴阳锻体决、获得….】 同届新人,纷纷成为普通人,苟延残喘。 此时:异族入侵基地时。 秦缘站出来,扮演异能强者,持仙法只手遮天。 这天: 异世入侵主世界。 秦缘仅仅一句话,万族臣服。 “怎么?征服不够,想被灭世?”当枯竭的灵气复苏 当远古的神魔苏醒 当大地的生物异变 平凡少年踏上求生之路,逐渐窥探世界的奥秘当黑暗侵袭,有人跪下,有人放弃。 而我们,会鲜血流尽,战斗到底。 而我,就是这诸天万界的主!为了逃避战友的逝去,三年的海外兵王回来了。张不苦选择开启自己的大学生涯,只是,自己重新获得生活依旧躲不开最终的宿命。 你这一生所遇见的人是你注定所遇见的,你遭受的苦难是你注定所遭受的。 这一世,我不想再失去。“我是上古的神。” 上海,16年的夏天,陆贺遇见的那个在酒吧里喝醉酒的少女如是说。 陆贺没有理会她,准确点说,陆贺把少女当作是一个中二病患者。 18年,陆贺生意失败,回到高鹤市和父母同住,楼上每天晚上都很吵,像是在开派对,“忍忍吧!这几个星期都这样,我们都习惯了。”父母都是很懦弱的人。 陆贺忍不了,他不是不敢出头的乌龟,终于是在一天夜里,陆贺穿着睡衣就冲到楼上去敲门,开门的是一个少女。 “有什么事吗?”少女问。 “你能不能安静一点?你不睡觉,别人也要睡觉的!”陆贺没好气地说。 “我认识你,好像是16年,我和你见过。”少女若有所思地点点头,“进来坐,我有事情让你帮忙。” “你听不听得懂我的意思啊?”陆贺感觉面前的少女简直是在侮辱他。 “帮点忙而已。”少女说着走回房间,留下陆贺一个人在门口吹凉风。“应该没什么大事吧?她总不能绑了我”陆贺想了想,还是走了进去……挺讽刺的,这改变了他无聊的人生。 以此铭记那段时光。高阳原本是个蓝星的雇佣兵,在一次执行任务中来到了金庸武侠世界--神雕。 在神雕世界中获得武林中人梦寐以求的武林秘籍,左手六脉神剑、右手降龙十八掌,年纪轻轻就达到别人一辈子的成就, 一个小小的蝴蝶能带动多大的效应?神雕世界因为高阳的到来又会有什么样的变化?神雕中的爱恨情况是否因为高阳的到来而改变? 让我们走进神雕世界,看高阳如何在江湖中翻云覆雨~~~~~ 各位书友要是觉得《神雕之我是大魔王》还不错的话请不要忘记向您的朋友推荐哦这里讲的是一些怎样的故事呢? 人皮模特、人骨拼图、凶宅奇案、真人蜡像、密室杀人、碎尸惨案…… 这些故事背后是怎样的一群人呢? 囚禁者、恋物癖、人格分裂、流浪汉、乞丐、白领、高智商人群…… 当你站在地狱仰望天堂,才能真正听懂来自地狱深处的哀鸣。 世界上哪有什么天生的罪犯,只不过是把老实人逼急了而已。 本小说及人物纯属虚构,请勿对号入座。如有雷同,纯属巧合,切勿模仿。 这篇文章是我对现实生活中一些事情的深省,并以这篇小说表达出自己的一些见解。读者在浏览时可以思考关于某些事物的了解我们是否相同。这个世界文道为尊,文人掌文箓,修文气,开文宫。 九品开窍文箓,一目十行,身轻体健。 八品修身文箓,文字加身,如有神助。 七品仁者文箓…… “诗词歌赋,笔墨丹青,棋艺话本这些你都懂?” “略懂略懂。” “都懂一点也行。” “是亿点点……” 官居一品,权倾朝野? 封王拜相,永享荣华? 不不不,身怀国家图书馆全部资料的李长安,无奈接受了,世人把他名字刻进圣庙的事实。 一夜飞远发花香,怎他不懂英雄情。我笔下的貂蝉是一个美女加英雄的气概,没有那衬衣的保护,怎能有今天的戏场,狼族吕仙儿的爱情,不是天给的,是一个叫吕仙儿的狼族英雄,她本是楼阁中人,最后情在崖天。这就是一个英雄的时代,三国!。
重庆整合营销哪里最好 做网站要多少钱 优秀的网站 卡通画风的网站 apmserv 127.0.0.1 怎么能直接访问本地网站 六安做网站 酒店网络营销具体方案 高端企业网站报价 东营网站优化 中国网络信息安全战争 投资项目咨询【www.richdady.cn】 事业不顺的职场建议有哪些?【www.richdady.cn】 纠纷的解决方法【www.richdady.cn】 公司破产后的员工安置问题咨询【www.richdady.cn】 老公家暴的应对方法咨询【www.richdady.cn】 感情纠纷的改运方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 为什么过世的前世影响【www.richdady.cn】√转ihbwel 外灵干扰的环境影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 处理感情纠纷的方法咨询【www.richdady.cn】√转ihbwel 前世今生的故事有哪些案例?咨询【σσЗ8З55О88О√转ihbwel 家庭关系的咨询技巧咨询【微:qq383550880 】√转ihbwel 婴灵的存在有哪些科学依据?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 自闭症的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 内心恐惧胆怯的原因分析咨询【微:qq383550880 】√转ihbwel 冤亲债主干扰威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主的干扰与因果【www.richdady.cn】√转ihbwel 意外的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 公司破产的法律咨询【σσЗ8З55О88О√转ihbwel 脑部不清晰【σσЗ8З55О88О√转ihbwel 外灵干扰对日常生活的影响【企鹅383550880】√转ihbwel 产品网络安全 邮件营销 你在平时是否遭受过网络安全问题?是怎么解决的? 论营销 国家信息安全检测中心 东营网站优化 山东信息安全委员 酒店网络营销具体方案 郑州上市企业网站建设 小米公司网络营销定位 教育数据中心网络安全方案 江苏网站建设机构 静安区品牌网站建设 营销合作 台州做网站seo 网络专业的网站建设 微信营销成功方案 国家信息安全检测中心 营销核心 网站制作 手机 广州响应式网站制作 做网站团队 网络安全警察电话 响应式公司网站 顺德网站建设原创 做网站网站 信息安全测评中心 编制 天融信网络安全准入 网络信息安全 ppt 网络营销结束语 网络营销理解不正确的是 个人网站设计模板 信息安全管理审核,-1 重庆南昌网站建设 建立网站需要多少钱 郑州网络营销外包公司排名 北邮信息安全找工作难吗 优秀的网站 网络安全进企业 内容营销作用 青色系网站 网站开发技术选择 淘宝网店营销培训 合肥网站制作报 响应式公司网站 百度知识营销广告 北京哪些大学的信息安全专业好 信息安全测评中心 编制 做网站网站 无印良品营销创意 微信网站方案 网络营销师培训网络安全 江苏 信息安全基本属性 2016年信息安全 什么是全网营销 营销策划案的理论意义 卡通画风的网站 营销要素 长春网站制作 静安区品牌网站建设 什么是网络营销 网站托管套餐 网站抄袭互联网个人信息安全 微信网站方案 网络营销理解不正确的是 你在平时是否遭受过网络安全问题?是怎么解决的? 什么是病毒营销? 网站打开速度优化 石家庄网站建设 长安网站优化 信息安全事件 曲阜做网站 网络安全手机可视化 医院网络营销是什么 网络安全公司有哪些 做网站要多少钱 医院网络营销是什么 什么是病毒营销? apmserv 127.0.0.1 怎么能直接访问本地网站 邮件营销合法吗 国家网络安全监管中心 网络安全进企业 营销合作 大安市网站 山东信息安全委员 长沙网站制作服务 访问网站慢 网络信息安全 ppt 重庆南昌网站建设 怎样搜网站 酒店网络营销具体方案 北京哪些大学的信息安全专业好 接设计网站 上海网络安全公司 网络安全 实验 如何利用网络平台营销策略 东莞整合网站建设公司 实战营销型网站建设思尚营销 西安网站建设公 信息安全等级证书 信息安全关键过程 网络安全手机可视化 台州做网站seo 微信营销成功方案 信息安全等级证书 国家信息安全检测中心 营销策划案的理论意义 信息安全管理的根本方法 国家信息安全检测中心 湛江网站设计 郑州上市企业网站建设 湖南专业做网站企业 天津 企业网站建设 信息安全事件 全国大学生电子设计竞赛信息安全技术专题邀请赛,-1 网站制作 手机 为什么要学网络营销 淘宝网店营销培训 2014信息安全竞赛题目 建设网站的成本 广州响应式网站制作 软件开发信息安全考试,-1 网络专业的网站建设 论营销 天融信网络安全准入 网络信息安全要求 卡通画风的网站 诸城网站制作 营销核心 做网站要多少钱 陕西信息安全管理中心地址 信息安全联合实验室 如何利用网络平台营销策略 2017重大信息安全事件 网络营销理解不正确的是