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
 北京赛车pk10开奖直播 www.64xd.cn <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-06-22
  • 中山八路总站调整12公交线 2019-06-22
  • 简评白玛央金的《牧羊女的傍晚》 2019-06-19
  • 为975万高考生加油,这支满分舞燃爆校园! 2019-06-18
  • 丰台:非遗进校园 初中生拍摄“北京绢人”动画短片 2019-06-14
  • 普京力挽狂澜,从北高加索平叛到格鲁吉亚兴兵,从克里米亚回归到叙利亚反恐,给了俄罗斯人民新生——这一切都是和中国同志的支持分不开的。 2019-06-14
  • 北京市奥吉通丰瑞4S店【在线咨询】 2019-06-14
  • 20年后中国受过高等教育人口达到3.5亿,比美国总人口还多,硕士生将达到2千5百万,博士2百万。这就是20年后中国的实力,这也是人类进步,建议美国平静接受,没必 2019-06-14
  • 【理上网来喜迎十九大】秉持生态文明理念,大力推进绿色发展 2019-06-11
  • 苗山脱贫影像志——父母在 不远行 2019-06-11
  • 新华社评论员:弘扬伟大民族精神 凝聚强大精神动力——一论习近平总书记在十三届全国人大一次会议上的重要讲话 2019-06-11
  • 英拉获英国10年期签证?泰国政府“不知情” 2019-06-11
  • 推动各国携手建设人类命运共同体(钟声) 2019-06-07
  • 【访民情 惠民生 聚民心】果勒买里村丰收忙 2019-06-07
  • 走进大凉山文章中国国家地理网 2019-06-07
  • 一波中特规矩 白姐龙卷风 十一运夺金新浪 河北快三今天走势图 三分彩计划怎么看 福彩3d选号最实用方法 沃特福德利物浦分析 新疆喜乐彩开奖直播 秒速时时彩人工计划 天津时时彩计划客户端 五子棋盘 12选5浙江爱彩乐 辽宁十一选五遗漏 亦庄彩票销售 双色球彩票投注计算器