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
厦门网站建设的公司哪家好近年信息安全事件十八大 信息安全让网站降权怎么建设自己的网站海淀网站设计做一个营销型网站有哪些内容跨境网络营销的发展观念手机网站做成app昆明网站推广万族争霸,祸乱星海,沦落为奴的少年凭一柄神秘之剑,于微末中崛起,勇闯异界,一路逆袭,吞噬无尽种族,铸炼无上剑体,从此踏上热血争霸之路,力压万族天骄,剑斩诸天神王,横扫八方星海,乱世之中为人族斩开一片天,带领人族称尊寰宇!最终成为一代人王剑尊! “天赋逆天,机缘无数,杀不死我的,终将成为我的养料!” “吾为万古第一人王,诸天万界第一剑尊!” 莫名的厄运缠身,是命运还是阴谋,让泣无泪踏上了异界的历程。 天道弃吾,吾宁成魔,天要灭我,我便逆天。 逐鹿异界,一方强者,笑看花开花落,只为携美渡生。 杀戮,只是为了我能活下去,世人道我魔,那又如何? 命运多舛的少年,不谙世事的灵智,两者的结合在九州大陆掀起了阵阵腥风血雨。 在这里也许会看到华夏神话的延续,也许会看到超强的灵宝,也许会看到上古遗迹,也许会看到各种稀奇古怪的异兽,也许会看到魔之本相……这个世上有鬼吗? 真的有,而且有很多。 我叫徐艺,在我十八岁那年,我猛然发现了这个世界的真相。 姜止戈穿越书中成为恶名滔天的反派魔帝,开局就被男主带着女主围攻陷入必死局面。 濒死之际,他觉醒了人生记忆编辑系统,向世人展现他的过往。 于是乎,一段段催人泪下的记忆显现在世人面前。 “柔儿,记住,宁为乞丐,不为人奴,只要我还在一天,便绝不会让你去为奴为婢。” “紫烟,为了你,成魔又有何妨,举世皆敌又有何妨?” ....... 待到一切浮出水面,世人才明白。 恶贯满盈的魔帝,所做一切只为所爱之人,只为庇佑世间安宁。他是一个怀揣着成为伟大探险家梦想的中二少年,然而在现实中他却只是一个普通的高中学生,因此他每天感叹生不逢时。。。停停停,谁把我的草稿给换了?赶紧给我拿回来,爷什么时候感叹生不逢时了?开什么玩笑以为这就可以打败我了吗不存在的,我可是励志要想成为麦哲伦,哥伦布那样伟大探险家的男人,就算是老妈的拖鞋也无法阻止我,哎哎,班长你干嘛这个眼神看我,不要用看狗一样的眼神去看一个未来的伟大探险家啊,搞笑幽默的校园日常,身份神秘的未知来客,离谱扯淡的高科技,可甜可虐的恋爱故事,以及那一切背后的神秘男人,看似日常的生活,事实上背后早已被人画上了巨大的计划图纸,当然最难受的就是,这么多后宫我该选谁好啊。(本书原名薄荷样的青春)天雷滚滚,天雷汇聚,就像是有人在渡劫一样,我就是说了一句何方道友在此渡劫,就被雷劈中了,还穿越了。有这样一个世界,名为植人世界,为什么叫这么怪的名字呢?因为呀!这个世界上的人类,都拥有植物以及大自然的能力,故而因此得名植人世界,咱们的故事,也在这个世界里开始了……作为海城警局刚刚入职的萌新,程望打死也想不到,有一天会和鬼打交道。 给鬼做饭,陪鬼逛街,跟着鬼探案,跟着鬼捉鬼…… 等等等等!鬼捉鬼? 哦哦,原来是鬼仙!还是个仙子!! 仔细看看,这鬼仙长得还蛮好看的。 其实,和鬼仙呆在一起,还算不赖。 可是你要回你的苦厄界,我还要混迹在这尘世间,你我二人总是要散场的。 别哭了,我再陪你捉最后一只鬼。 好吗?有的人穿越了,但是没有完全穿越。 因为他的妹妹也跟他一起穿越了,并且两人共用一个系统,所以在地球统一的穿越通道中停留了好几年,终于等到了自己的妹妹。 兄妹俩穿越到三光大陆成为了应月宗的大长老和宗主。 “师尊,小师妹差点被渣男骗了!” 秦时关:“敢欺负我应月宗弟子,徒弟们上!给我围殴他!死了算罪有应得,没死算罪不至死!” “师尊,小师弟被退婚了!” 秦时关:“什么?传我指令,让圣城圣女给我小弟子当媳妇。” 秦时关:“我也不想护犊子啊,可是他们叫我师尊诶!”
网络营销师证书 龙岗网站建设 2016国内网络安全事件 个人备案网站能用公司 常州做网站 网站后台 网站静态 小米营销方式的调整 企业网络安全培训 信息安全保证人员认证(简称cisaw) 不爱读书的环境影响【www.richdady.cn】 维护良好家庭关系的秘诀咨询【www.richdady.cn】 前世缘份如何影响事业发展?【www.richdady.cn】 投资项目的环境影响咨询【www.richdady.cn】 与公婆前世的因果关系咨询【www.richdady.cn】 忧郁症的环境影响【σσЗ8З55О88О√转ihbwel 冤亲债主干扰对生活有哪些影响?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老公的前世案例【σσЗ8З55О88О√转ihbwel 解梦的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 干扰的预防与化解咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的改善方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份的前世修行咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的职场提升咨询【企鹅383550880】√转ihbwel 与男友前世威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 忧郁症的环境影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷的解决技巧咨询【微:qq383550880 】√转ihbwel 事业不顺的职场调整咨询【σσЗ8З55О88О√转ihbwel 有官司的原因分析【σσЗ8З55О88О√转ihbwel 事业不顺的前世因果【σσЗ8З55О88О√转ihbwel 冤亲债主干扰的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 2016国内网络安全事件 2017国家网络安全主题 苏州专业做网站 网络安全热点 网络营销词语 昆明网站推广 常州做网站 郑州网站制作公司 网站静态 中国网络安全管理中心 设计网站怎么收费 信息安全 小技巧 网站内容要突出什么原因 2015中国网络安全年会 政府网络安全事件 信息安全等级保护二级标准linux网络安全招聘 手机网站 苏州专业网站设计制作公司 自己造网站 信息安全博士就业 物联网网络安全 网络信息安全 党员 黄山网站建设 唯品会的营销在哪里看 网站静态 中国网络安全管理中心 设计网站怎么收费 信息安全 小技巧 网站内容要突出什么原因 2015中国网络安全年会 网站建设图 高大上设计网站欣赏 搜索引擎营销分析 病毒性营销有哪些特点 营销的网站 德阳响应式网站建设 中山网站建设文化方案 政府网络安全事件 网站建设 技术 跨境网络营销的发展观念 邮件营销电子邮件模板 2014信息安全培训 龙岗网站建设 2016国内网络安全事件 中国个人信息安全 网络事件营销优点 信息安全等级保护二级标准linux网络安全招聘 深圳 网站定制 世界网络安全市场 vc 网络安全编程范例 宁夏网页设计网站 419网络安全 信息安全等级最高级别 网站建设移动端是什么意思 日本国家网络安全中心 杭州网站制作外包 搜索引擎营销 北京网站设计价格 网络营销师证书 自己造网站 近年信息安全事件 苏州专业网站设计制作公司 网络安全官网 中央信息安全委员会 德宏网站建设公司 网站设计欣赏 网络营销信息传播过程 好建网站 网站设计咨询电话 网络营销教学 嘉祥网站建设 网站备案幕布照规范 怎么建设自己的网站 营销广告语 信息安全技术有限公司 公安局信息安全证明,-1 网站建设图 网络营销考试案例分析题 网站 制作公司 十大网络安全案件 网站建立费用 做网站好处 唯品会的营销在哪里看 电商网站模板 网络营销工具和方法有哪些内容 做一个营销型网站有哪些内容 中国个人信息安全 湛江网站建设 高校信息安全实验室 关于网络安全的通知 德阳响应式网站建设 十八大 信息安全 企业网络安全建议 网络安全宣传周资料'' 营销的网站 网站建设图 中山营销外包 网络安全等级保护政策 常州做网站 微信运营营销的区别是什么意思 物联网网络安全 网站能在别的电脑打开但在我电脑打不开但我又能打开其他网站南阳网站建设 网络安全防范手段 360网络安全大会 十八大 信息安全 东营有网站 2017国家网络安全主题 伍佰亿书画网网站 政府网络安全事件 国外的网络安全网站 hack 网站托管维护 网络安全威胁与挑战 做一个营销型网站有哪些内容 网络安全字体图片 信息安全保证人员认证(简称cisaw) 网站配色 北京网站设计价格 信息安全 一级 病毒性营销有哪些特点 网站建设协议 昌平手机网站建设 海尔公司营销组合策略 手机网站 外贸网站运营 网站伪静态 网络营销信息传播过程 大白兔奶糖营销案例 北京网站设计价格 中央信息安全委员会 网站建设 技术 郑州网站制作公司 高校信息安全实验室 信息安全等级保护二级标准linux网络安全招聘 厦门网站制作 网络安全热点