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
营销的基本要素包括企业型网站山东网络营销掌握网络安全技术网站seo常州制作网站价格贾君鹏营销服务厅网络安全管理企业型网站外贸营销语信息安全中常见的攻击,-12016网络信息安全案例QQ:1263528348,微博:竹楼听细雨本尊,VX公众号:竹楼听细雨,欢迎大家加入。 张泽穿越到平行世界,这里的人们依靠魔域打怪变强,来抵抗魔窟魔物的入侵。 为了妹妹张泽进入魔域,取名罗刹,结果意外激活最强SSS级天赋召唤术! 杀怪就能召唤,召唤术等级越高,召唤的怪物越多,还能升级,简直是逆天! 魔域里,当其他冒险者组成百人甚至千人团队去攻打BOSS时,张泽已经带领他的召唤怪大军一路碾压过去! 现实中,各国还在为对付高级魔物发愁时,张泽单挑上百只高级魔物,震惊全世界! “罗刹到底是谁?一路打破人类探索魔域的记录,眼看就要突破一百层了!” “大夏国有了张泽,已经一跃成为全球最强国!此人如果不能拉拢,必须除掉!” “什么?张泽一个人挑了十名五阶魔域强者?完了……大夏国迟早一统全球!”浩瀚无垠的星空中,不知何时便存在着一个神秘的会“造魔”黑色洞口。 古老相传,黑色洞口的另一端,是属于仙的世界,跨出这一步,便能羽化登仙。数万年来无数强者怀着憧憬踏入其中,但却无一人返回…… 黑色洞口的另一端,究竟是什么? 三起连续的人口失踪案,加上突发的床底藏尸案,让刑侦队长沈杰手忙脚乱。男主聂一仑用他专长的美术学和心理学,以及法医女主宁无瑕的帮助下,藏尸案得以告破。 可人口失踪数还在增加,更诡异的是,接踵而来的大街割喉案、静脉投毒案等多起命案,似乎都与藏尸案有些关联。随着逐一的侦查,发现身边的人才是最可怕的。 而且,最终的矛头还指向了四年前的一起案件……从梦中苏醒,游柏发现自己穿越到了《游戏王》的世界! 稀有卡什么的都是浮云! 唯有十年牌龄才是王道! 赢下各大顶尖赛事的冠军!登上决斗者的荣耀最高峰!成为海马濑人一辈子都想战胜的对手! “我!游柏!十年牌佬!从今天起将君临《游戏王》!”吃喝闲侃而已。 人物剧情,纯属虚构。 如有雷同,纯属巧合。一代帝师,遭遇自己十位爱徒的背叛,复苏后彻底迈上魔道之路…… 刀劈帝宫镇四方,掌灭星辰踏踏苍穹,诸天万道群雄起,看尽英豪我为尊! 现实生活诸多枯燥,人生百味需要细细品味,男主一路成长,一边学着成长,一边面对社会风云。个人传记,如有雷同,纯属意外!我叫鲁笠一个大学新生,通过自己吭哧瘪肚的努力加上家里的钞能力终于考上了大学,不过是个二流大学,专业的传媒。 今天是新生报到的第一天,而我的寝室是男生宿舍4号楼四单元404室!一个据传很邪门的寝室。 而我们的故事也从这里开始。 仙凡之隔是什么?是前者闭眼万里无云睁眼乾坤变色?是后者资质愚钝数只配残生数十年?规则下强者受人尊敬而弱者只能任人宰割。前世饱受欺压羞辱,流落异世因为资质平平只能做个凡人,在这个更加残酷的世界生弱者苟活都是奢侈;凭什么天赋资质由天定?凭什么三千大道不可逆?非要用自己的道逆转这规则,我命由我不由天! 2022年世界处于爆发的未知灾害之中,百鬼索命,丧尸横行……就在人类面临种族存亡之时,世界面临毁灭时刻。一股神奇的力量在人类种族中爆发,力量拥有者有与其灾害抗争的能力,于是人与灾害的战斗就此展开。截止目前2070年,人类已然掌握了与灾害对峙的能力。而在世界的一个角落,钟源绑定了末日生存系统,从此踏上了不断变强的生存之路!
国内全屏网站有哪些 网络安全是什么专业 营销每日总结 网站写文案 020营销模式的不足 网站的栏目 网络安全是什么专业 微信营销成功的关键 信息安全 顶级会议 符合国家信息安全产品 自闭症的案例分享咨询【www.richdady.cn】 无形干扰的前世故事【www.richdady.cn】 冤亲债主干扰咨询【www.richdady.cn】 自闭症的家庭支持【www.richdady.cn】 孩子不爱读书的家长引导方法有哪些?【www.richdady.cn】 纠纷的法律咨询【企鹅383550880】√转ihbwel 构建和谐亲子关系的方法咨询【企鹅383550880】√转ihbwel 财运不佳的财富增长技巧有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 发育倒退的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 存不住钱的原因分析咨询【www.richdady.cn】√转ihbwel 去世的父亲的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 工作压力大导致的精神不振咨询【www.richdady.cn】√转ihbwel 婚姻生活不顺的案例分享咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心理咨询与灵性指导【www.richdady.cn】√转ihbwel 存不住钱的咨询技巧【www.richdady.cn】√转ihbwel 存不住钱的心理调适【σσЗ8З55О88О√转ihbwel 事业不顺的解决方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子不读书的咨询技巧威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 婴灵的化解仪式威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的缘分奇迹咨询【微:qq383550880 】√转ihbwel 石家庄网站设计制作服务 网络安全零基础书籍推荐 国家信息安全专项介绍 广道网络安全审计 网站搭建价格 网络营销事件地产 河南省网站建设 制作网站公司唐山 西安网站建设案例 铁人三项信息安全大赛 网站写文案 智能电网信息安全 公司网站定制 很有风格的网站有哪些 关关于信息安全的网站 最流行的网站设计风格 保护网络安全的常用手段有 营销的基本要素包括 四川网络营销 临沂做网站 信息安全服务资质一级 国家信息安全等级保护制度 拨号访问控制 公司网站定制 创网站软件 淮北网站建设 深圳手机网站建设多少钱 020营销模式的不足 深圳网站建设迅美 网站托管费 微信营销成功的关键 公司网站设计与开发 信息安全 身份鉴别 网络安全实验班 搭建网站 网页 网站设置好了关键词怎么样在搜索引擎里搜索关键词就能有排名 网站营销方法有哪些内容 网络安全 研究方法 深圳网站建设迅美 中企动力网站开发 旅游网站设计模板 珠海网站设计 搭建网站 网页 网站建设发布 太原建网站 如何建立个人网站 儿童节网络营销 网络营销事件地产 创网站软件 家具 营销网络 信息安全技术 路由器安全技术要求 铁人三项信息安全大赛 社会大学生网络安全总体数据分析 网站自建 关关于信息安全的网站 中国信息安全测评中心隶属 安康网站建设 湖南信息安全测评中心,-1 网站建设排版规定 网站搭建价格 极速营销软件 做网站责任 家具 营销网络 郴州网站seo 贾君鹏营销 邢台网站制作哪家好 soc网络安全管理平台 网站关键词更新信息安全有关的专业吗 建网站怎么上线 信息安全 内网ppt,-1 网站建设发布 网站建设com 建网站中企动力 网站变灰色 工业控制系统信息安全蓝皮书 建网站中企动力 华为 网络安全特性 河南省网站建设 上海微网站 易营销官网 网络安全 研究方法 什么是网络营销 深圳手机网站建设多少钱 传播式营销 搭建网站 网页 社会工程学和网络安全 掌握网络安全技术网站seo 吉安网站 途牛网营销 常州制作网站价格 重庆免费网络营销 南昌寻南昌网站设计 国家信息安全专项介绍 石家庄网站设计制作服务 江西信息安全 整体性营销 湖南高端网站制作公 信息安全 身份鉴别 广道网络安全审计 信息安全等级保 温州手机网站推广 绍兴网站建设 建设手机网站费用 重庆信息安全评估中心 电影网络营销推广 中国信息安全优秀用户案例 营销每日总结 顺德网站制作案例价位 信息安全 身份鉴别 支付宝网络营销成果 网络安全零基础书籍推荐 华为 网络安全特性 360信息安全大会 网络安全法 2016 techcrunch 公司网站定制 团购网站制作 珠海网站设计 国务院负责统筹协调网络安全工作和相关 湛江网站设计 做网站责任 阜阳网站设计 无锡网站建设原则 智能电网信息安全 网站的申请 浙江 网络安全 兰州做网站 网络安全法 2016 techcrunch 信息安全 内网ppt,-1 保护网络安全的常用手段有 信息安全中常见的攻击,-12016网络信息安全案例 大学病毒营销方案 江西信息安全 重庆信息安全评估中心 国内全屏网站有哪些 网站站内优化 静安微信手机网站制作