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
 吉林时时彩平台 www.3zce.com <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
  • 中国强硬反击美国相关新闻 2019-02-15
  • 陈学冬拍摄杂志大片 “萌神”变身轻熟男 2019-02-02
  • “中国红枣之乡·临县特色旅游”产品推介会将于6月23日开幕 2019-02-02
  • 天津市政府党组召开扩大会议 张国清主持 2019-01-30
  • 商务部公布对原产于美国和日本的进口氢碘酸产品反倾销调查的初步裁定 2019-01-30
  • 数十年月球温度上升谜团解开:都是美国惹的祸 2019-01-26
  • 全国空气污染地图 大家来吐霾 2019-01-24
  • 无惧台风“艾云尼” T 2019-01-24
  • 《新乌龙院之笑闹江湖》 吴孟达郝劭文时隔24年再聚首 2019-01-17
  • 凰家尚书房:巧用风水助学业,孩子成绩节节高 ——凤凰网房产天津 2019-01-04
  • 中央环保督查整改进行时 2019-01-04
  • 荆门全面实现社会保障卡即时制卡 2019-01-03
  • 科技赋能助力医保革新,平安开启商保服务新模式 2019-01-03
  • 紫光阁中共中央国家机关工作委员会 2018-12-18
  • 航天员群体获“时代楷模”荣誉称号 2018-12-18
  • 864| 166| 787| 644| 878| 563| 516| 632| 624| 436|