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
微信的网络营销推广案例分析后台与网站怎么建手机网站微博营销号怎么经营万脑网站建设长沙建网站2017网络安全大赛2017 网络安全 大会专业的网站建设新型网络安全技术穿越到大盛朝,无奈遭遇天崩开局,爹娘死得早,这个狗见了都摇头的混子把家财败了个干干净净,只留下一间破烂的茅草屋,就连吃饭都是有一顿没一顿的。   好在路上捡到一个漂亮妹子,还莫名其妙的就成了亲。   好吧,看着可怜巴巴、可爱至极的妻子和一贫如洗的家,作为无权无势的寒门农家子,黄廷晖只能开始凭借自己的双手,不断创造财富……他高傲,但是宅心仁厚。 他低调,但是万人敬仰。 他是天启皇帝的好朋友,亿万人的心中偶像。 他的宗旨是创建和谐新大明。 穿越成为镇南王府的世子,本来想安安心心当一个纨绔,上街打算强抢民女,却没想到一个不小心竟然抢走了微服出宫的当朝公主!更没想到的是,皇帝不但没有怪罪,反而将公主赐婚给他!不是吧,我真的不想当驸马爷!日本留学生竹下青禾为了完成父亲遗愿来到中国找寻祖母小林惠子,通过小林惠子昔日战友和爱人的讲述以及小林惠子留下的日记本,逐渐揭开了那段沉重的历史篇章。李复,一个22岁矿工,末世发生后偶得地下避难所系统。 他在地下造房收租,造餐厅有肉吃,造水厂有干净水用,造武器武装幸存者,造基因库帮助幸存者进化突破。造药房便宜出售,你在别的地方买不到的药我这里都有。 李复地下城的租客任何人见了都要礼让三分,说不定租客就身负超级血脉。 想住进李复的地下城吗?想过神仙般的日子吗?那就看你有没有那个运气了! 平淡的人生,又或许能够不一样?莫名被修士当成仙人,但是我的修为比你们任何人都低啊!我要怎么继续装下去?好像也可以不用装。特殊体质,资质绝佳,修炼救母。红尘中相视一眼,续写剪不断情缘。 不争大世,不逆天道,顺势修仙。无尽岁月一浮尘,凡人亦可登绝巅。穿越到了火影世界,穿越成为未被灭族的漩涡一族的族人,好在作为穿越者他也拥有必备的金手指系统,能够复制万能系统,我看一眼你这个禁术不错拿来吧,你这个血继限界不错拿来吧,你强任你强,系统最猖狂。一睁眼竟然来到另一个时代。 这是哪,我是谁,这人是谁
成都网站开发公司排名 信息安全pdf 计算机网络信息安全员 南昌网站建设资讯 重庆营销策划 优帮云 网站 模板 信息安全基本属性 国家实行网络安全等级保护 网站架设 网络营销证 孩子不爱读书的家长引导【www.richdady.cn】 亲子关系的改运方法【www.richdady.cn】 婴灵的预防措施咨询【www.richdady.cn】 孩子不爱读书的家庭教育咨询【www.richdady.cn】 暗恋的情感释放【www.richdady.cn】 灵魂化解威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的重逢有何迹象?【www.richdady.cn】√转ihbwel 家庭关系的和谐共建咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何判断自己是否被冤亲债主干扰?咨询【微:qq383550880 】√转ihbwel 冤亲债主干扰对生活有哪些影响?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 人际关系不好【企鹅383550880】√转ihbwel 前世缘份的解读方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 投资项目【www.richdady.cn】√转ihbwel 孩子厌学的家庭教育威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 佛教视角下的前世今生咨询【www.richdady.cn】√转ihbwel 升迁障碍的职业发展如何规划?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 脑部不清晰的前世记忆咨询【微:qq383550880 】√转ihbwel 强迫症的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 投资项目的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心慌胸闷头晕的前世记忆【微:qq383550880 】√转ihbwel 微信的网络营销推广案例分析 信息安全研究生院 网络信息安全发展史 南宁会制作网站的技术人员 网站域名 太原制作网站的公司哪家好 国网公司信息安全月,-1 深圳网站建站推广 软营销举例 昆明互联网营销 湖南信息安全公司 信息安全奖励等级 信息安全奖励等级 网络信息安全作文400 营销的核心 成都网站开发公司排名 百度问答推广营销多少钱 网站营销培训 营销网站设计 桂林网站推广 网络推广营销平台有哪些 亚马逊营销 苏州专业做网站 重庆璧山网站制作公司电话 怎么建手机网站 2016网络安全座谈 做网站公 html 5+css 3网页设计与网站布局 从新手到高手 近几年网络营销关键词 西宁网站建设 网站架设 深化网络安全思考讨论 病毒式营销常用载体 网站开发平台 重庆产品网络营销推广 新手可以自己建网站吗 新手可以自己建网站吗 网络营销店铺推广问题 长沙定制网站 微信的网络营销推广案例分析 网络营销证 手机网络安全内容 营销模式 定价策略 网络信息安全实用教程 鹰潭做网站 东营有网站 青岛青鸟网络营销学院 网络信息安全发展史 网络安全敏感的国家有哪些 网络推广营销平台有哪些 信息安全打印机厂家 中国 国家安全局 网络安全 国家网络安全 物联网 做网站群的公司 建网站推广 网站域名 营销培训学校 网络安全监管系统 网站备案幕布照规范 品牌营销和网络推广 重庆璧山网站制作公司推荐 2017优秀网站设计案例 温州手机网站制作推荐 国网公司信息安全月,-1 网络安全监管系统 病毒式营销常用载体 营销广告网站 信息安全基本属性 深圳网站建站推广 鹰潭做网站 网络安全法主题 佛山电商网站制作团队 软营销举例 网络安全主要威胁信息安全相关政策法规 asp.net网站从数据库读取长文本到网页并保持原有格式 网络营销行业由来 新型网络安全技术 品质网站设 网站备案照 重庆软文营销推广费用 湖南信息安全公司 计算机网络信息安全员 品牌营销和网络推广 网站建设协议 东营有网站 专题网站建站 计算机网络安全指什么 营销培训学校 网络营销的未来 营销的核心 网站更新后为什么不显示 微信营销总结主题 网络信息安全作文400 公司手机网站设计 深圳网站设计 做网站编程 营销的核心 餐饮业的网络营销 人工智能 信息安全 成都网站开发公司排名 成都网站开发公司排名 网络安全技术博客 网络信息安全发展史 购物网站建设公司 营销型手机网站 百度问答推广营销多少钱 南昌网站建设资讯 网站营销培训 微营销杂志 自己创网站 公司网站市场价 长沙定制网站 营销网站设计 重庆綦江网站制作公司哪家专业 微信营销总结主题 网站建设金 桂林网站推广 安徽省信息安全测评中心地址 信息安全评估级别表 网络营销的未来 网络推广营销平台有哪些 asp.net网站从数据库读取长文本到网页并保持原有格式 2016网络安全座谈 专业的网站建设 亚马逊营销 重庆企业网站建站 律师网站建设 做网站平台的公司 鞍山网站制作 医院营销4P.4C.STP 个人个案网站 类型企业信息安全管理方案 重庆璧山网站制作公司电话 重庆璧山网站制作公司电话 国家信息安全中心评级 营销销售的区别是什么