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
  • 日照开通至中亚集装箱国际班列 2018-12-12
  • 蠢货!计划不是自下而上制订的。首先是国家战略计划,简称国家计划,其中与经济有关的,叫国民经济计划。5年计划,和一年一次的计划会议制订的计划,都是由国家计委主持制 2018-12-12
  • 奏响人才兴藏的时代强音 2018-11-27
  • 房地产就有国家和集体之土地不计价到计价,这笔是经济收入还是财产收入? 2018-11-26
  • 小萌们自认为能达到计划经济的要求么?你们那点小心思谁不知道?就是想跟着混! 2018-11-10
  • 调查显示近一半消费者上班不穿正装,那这些品牌怎么办? 2018-11-10
  • 神奇世界看看看——第150季 2018-10-28
  • “上党红色国际马拉松赛”将在长治县举办 2018-10-28
  • 中华人民共和国住房和城乡建设部 2018-08-16
  • 拼多多:你的梦想难道是成为下水道吗(原创首发) 2018-08-16
  • 环保督察回头看,“假整改”不该再心存侥幸 2018-07-01
  • 【学习时刻】中国人民大学副校长刘元春:中央经济工作会议的四大亮点 2018-07-01
  • 784| 872| 122| 861| 607| 68| 158| 292| 919| 411|