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上海网络安全论坛营销策划推广执行关于网络安全保护公元前228年秦军兵临易水,燕国告急,燕太子丹召开武林大会,推选刺秦使者。身为刺秦使者的秦天雨得妻子皓月公主劝导,为了天下一统大和,转身变成护秦人,致使荆轲刺秦失败,自己也招来杀身之祸。燕二公子为制造混乱,散布谣言,致使秦王政要诛杀六国贵族的三千后裔,徐福为救三千孩童,谎称海外寻访仙丹带领三千孩童东渡。秦天雨之子秦风逃到东胡,秉承父志维护和平,揭发了东胡人制造匈奴与大秦战争的诡计,秦风逃避东胡人追杀,也逃到了东瀛,得遇鬼谷子,学得上乘武功,又重遇亲弟。兄弟二人重回中原报父仇,除奸恶,东瀛人来中原本意是帮秦风报大仇,却贪恋中原大好河山,趁楚汉相争之际侵略中原,秦风如何罢止楚汉内战,一致对外。力拔山盖,不可一世的项羽又为何败给了刘邦,项羽为何不划江而治,秦风为何不一统天下,成为天下共主,而宁愿选择隐居世外桃源…师傅交给我一传家宝,却只是一本老旧的《水浒传》,我郁闷的回到家,闲来无事,翻到武松打虎的那一夜时,竟神奇的穿越回了书中的那个年代,还意外有了自己美娇妻金莲,在这个有点凄惨的开局下,且看我如何积攒实力,成功逆袭,手撕渣男,救我兄弟,扳倒高俅,收降梁山,抗击北辽,平定方腊,一改乾坤!这是一个关于两位少女的故事。被神明眷恋的爱丽丝——西门子拥有被称为&amp;lt;凋叶咒&amp;gt;的诅咒,在得知自己害死了另一位少女的家族后,她决定踏上梦境世界的旅途,以自己的方式拯救那位少女。 楚歌意外穿越特种兵的世界,发现成为一名炊事兵。 面对考核,菜鸟叶峰觉醒神级提取系统,只要完成任务,就可以提取技能! 神级射击、宗师格斗、伪装隐藏、黑客技术…… 每一种技能都成为他的战争利器,所向披靡! 何晨光:“你从娘胎就开始特种训练的吗?” 高中队:“一人单挑全特种部队,老子服了!” 庄炎:“峰哥,求求你收我为徒吧?” 范天雷:“能不能不要再打我脸了?再坑我,信不信我死给你看?“21世纪末期人类在经历了“姆源时代”后大部分工作已经被人工智能取代,“万灵”这款沉浸式游戏应运而生受到全球追捧。 一个在现实世界因为残疾灰心失意的年轻人终于在“万灵”中找到了心灵寄托,可谁知在新版本更新后“万灵”中的人竟再也无法回到现实,游戏中的生死同样决定了现实世界中人的生死...... 万灵之域,七国共域,战火与辉煌,魔法与热血...... 魔窟,鬼洞、深渊......越是探索越发现万灵大有隐秘,被数据表象包裹的诡谲事物下究竟隐藏着什么真相,外星文明的介入又究竟代表了什么?究竟是人类的进化还是异族的屠杀? 妄想成神的人终究要付出代价...... 韶云,一个弱势的农村娃,逆境中成长的过程。性格内向、外柔内刚,困境中挣扎,有情有意,心地纯洁善良,武才兼备。无奈世俗所迫,家境贫寒过着即凄凉又奋进的生活。从泥巴少年成长到青春豆蔻,一路走来,经历过懵懂到成熟的过程。静茹 , 貌美娇姿,娇柔可爱。乖巧中带着豪爽。两个少小的青梅竹马,到成长后的渐行渐远的情感。带着遗憾走过一段青春无怨的历程。 “叮,你的体质嫌你修为太弱,主动帮你修炼,恭喜你突破了!” “叮,你的体质嫌你天赋平平无奇,帮你升级到万古无一的仙品天赋!” “叮,你的体质觉得你眼神不好使,帮你开启绝世神通,六道仙轮眼!” “叮,你的体质很暴躁,嫌你修为还是太弱,一言不合就截取世界本源助你修行,恭喜你又突破了!” 叶青穿越异界,觉醒万古最强妖孽体质,躺着就能变强,一路无敌横扫,威临诸天万界,镇压无数天骄! 仙庭圣女:“天呐,世间为何会有如此妖孽?这还让不让人活了!” 人族圣子:“自从我认识叶青,才知道什么叫天骄!都别拦着我,以后叶青就是我老大了!” 魔族魔女:“叶青这家伙,为何如此优秀?” 叶青:“其实我真的没有开挂啊!体质,咱求你低调一点行不行?”你相信这个世界上是没有鬼的,都市传说也总是有迹可循,八尺大人是人撑着木偶,灵异公车只是高仿车伪装,猫脸老太用面具拐卖儿童。不过当儿童用伞顶着的帽子被家长收回,在街上的“野公交”被交警罚下,人贩子被判刑7年,谁又能解释这之后的状况呢?是神?是鬼?还是人?少年穿越到一片全新大陆,大陆内人,兽,妖三族混居,战乱不断。为了寻找回家的路,少年来到人族,却发现人族内都是三国时期的名臣猛将,大家都是在某一天被一股奇怪的力量传送而来,多年来一直在寻找回家的路,还要面对兽族不停的进攻。少年与众人想要回家,不但要战胜一直进化的兽人,还要面对强大的妖族,少年能找到回家的路吗“这是哪?我不是在家么?刚才好像地震了,我好像被压死了……那我就好好再活一世吧!”叶岚想着,时间已经过去了许久。 “首先可以排除这里是仙侠世界,因为按照常规的话,仙侠小说一般都是古代!也不是末世,所以说……难不成是奥特世界么?但是我还是需要再想一想才好!”叶岚可是博士生,思考能力可不弱! “那我最近去一趟商场吧!那里应该有新闻!” 第二天…… “因帕克危机?难不成……捷德?那我肯定在奥特世界了!不然不可能没人管贝利亚!” “诶!兄弟!还什么因帕克危机,贝利亚,肯定是假的!这图片肯定是伪造的,对吧?”一个男子碰了碰他,笑着说。 “我觉得很有可能是真的!”叶岚边想边说。 (叶岚内心:我?不是碍于颜面就说这里有奥特曼了!) “诶?为什么?”那个男子问他到 “因帕克危机是由于一颗导弹而发生的!从图片里仔细观察就能看出!只要有怪兽,就一定会有奥特曼的!这是以前的事情,但是隔了几年了,可能也会出现怪兽了!”叶岚朝他道。
聊城集团网站建设多少钱 网络安全研发工程师 常用的网络安全应急响应办法包括 网络安全 ppt 网站运营 网络信息安全技术下载 南宁建企业网站公司 芜湖网站制作 惠普网络安全密钥多少 建云购网站 感情纠纷的情感咨询【www.richdady.cn】 不爱读书的自我提升【www.richdady.cn】 婴灵的形成原因咨询【www.richdady.cn】 官司的前世因果咨询【www.richdady.cn】 前世今生的故事与轮回咨询【www.richdady.cn】 事业不顺的风水布局咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 婴灵的超度方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 官司咨询【σσЗ8З55О88О√转ihbwel 与女友前世【σσЗ8З55О88О√转ihbwel 自闭症的案例分享【企鹅383550880】√转ihbwel 内心恐惧胆怯的自我提升咨询【σσЗ8З55О88О√转ihbwel 孩子不爱读书的心理分析有哪些?咨询【企鹅383550880】√转ihbwel 去世的母亲的咨询技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 解梦的方法与技巧【微:qq383550880 】√转ihbwel 家庭关系的和谐共建方法有哪些?【微:qq383550880 】√转ihbwel 精神不振的解决方法咨询【微:qq383550880 】√转ihbwel 强迫症的案例分享咨询【σσЗ8З55О88О√转ihbwel 与女友前世的影响分析【企鹅383550880】√转ihbwel 感情问题咨询专家【σσЗ8З55О88О√转ihbwel 升迁障碍的心理调适【www.richdady.cn】√转ihbwel 网络安全技术学习 网络与信息安全防护 电子商务师网络营销 网络安全 教育部 投资 网站报价 营销型商城 怎么样开网络营销公司 d:/网络信息安全研究 (1).pdf 邯山网站制作 计算机信息网络安全服务资质 芜湖网站制作 山东网站建设 网络安全国家标志 信息安全备案系统企业视频营销策划 十大网络营销案例ppt 信息安全等级保护要求 信息安全威胁发展趋势 本地的唐山网站建设 如何保证企业网络安全 网站有什么作用 app的社会化营销案例 高级信息安全管理师,-1 营销型网站平台 厦门网站制作品牌 石家庄企业商城版网站建设 360网络安全实验室数据 厦门网站制作品牌 2013年进行互联网营销推广的企业各种网络营销方式的渗透 欧洲网络信息安全局 厦门免费建立企业网站 网站定制 网络安全 运营商交流 服装外贸网站建设 厦门全网营销 网络安全平台网 大数据网络安全专业 幼儿园网站建设方案结语 枣庄网站设计 2014年省级基础电信企业网络与信息安全工作考核要点与评分标准 郑州市公安局信息网络安全报警网站 信息安全管理基本原则 杭州模板网站建设 网络安全 ppt 厦门全网营销 本地的唐山网站建设 郑州营销网站托管 网站的描述 深圳网络营销资讯 三只松鼠新媒体营销 2017上海网络安全论坛 网络营销工资 网站是怎么做的吗 天津信息安全测评中心 电子商务师网络营销 网络安全流程 软件开发与网络安全前景 浙江乾冠信息安全 建设门户网站需要注意什么 欧洲网络信息安全局 营销策划相关的视频 建设门户网站需要注意什么 网络营销工资 门户网站的功能 2013年进行互联网营销推广的企业各种网络营销方式的渗透 提供石家庄网站推广 网站建设公司浩森宇特 网络安全备案 网络安全国家标志 常见的信息安全威胁 信息安全 十项微信小程序做网站 肇东市网站 手机网站制作推广定制 网络安全研发工程师 美国网络安全信息共享法案 智慧城市 网络安全建设 触屏版网站开发 网络安全 教育部 投资 西安非营销类公司 网站主页怎么做 网络安全大学 手机网站设计机构 windows7网络安全 深圳外贸网络营销 广州外贸网站信息 网站有什么作用 浙江乾冠信息安全 网络安全技术学习 唐山网站搭建 广州外贸网站信息 兰州网站 郑州市公安局信息网络安全报警网站 网站侧边栏 兰州网站 网站报价 石家庄移动端网站建设 京东目标市场营销策略 芜湖网站制作 网络安全流程 金融客户信息安全 app的社会化营销案例 网络与信息安全防护 惠普网络安全密钥多少 厦门免费建立企业网站 如何保证企业网络安全 怎么样开网络营销公司 网站飘动 网络安全高级软件编... 门户网站的功能 长沙网站优化 嘉兴的网站设计公司有哪些 深圳 网站设计 杭电信息安全专业怎样 十大网络营销案例ppt 营销型商城 李苏杰的网站营销 青岛日文网站制作 360网络安全实验室数据 中国电信网络安全产品 信息安全岗位招聘 网络安全情报信息 青岛日文网站制作 网站建设仪器配置表 信息安全 十项微信小程序做网站 网站添加视频代码 网站建设仪器配置表 o2o电子商务网站内部列表email营销 网站制作公司排行榜 厦门网站制作品牌 网站报价 信息安全威胁发展趋势 宁波网上营销网微博营销的形式 网站运营 营销策划推广执行 网络安全 bbs 宝洁网络营销现状