2-17 表格
本节编程练习不计算学习进度，请电脑登录imooc.com操作

表格

表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。

同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本：
  ☑  LESS版本，对应的文件是 tables.less
  ☑  Sass版本，对应的文件是 _tables.scss

如果你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中可以查阅到所有有关于table的样式代码。由于代码太长，此处不一一列举。

刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

  ☑  .table：基础表格

  ☑  .table-striped：斑马线表格

  ☑  .table-bordered：带边框的表格

  ☑  .table-hover：鼠标悬停高亮的表格

  ☑  .table-condensed：紧凑型表格

  ☑  .table-responsive：响应式表格

 

任务

本小节没有代码任务，单击“提交”按钮进行下一个小节学习。

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>基础表格</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <h1>基础表格</h1>
  11. <table class="table">
  12.    <thead>
  13.      <tr>
  14.        <th>表格标题</th>
  15.        <th>表格标题</th>
  16.        <th>表格标题</th>
  17.      </tr>
  18.    </thead>
  19.    <tbody>
  20.      <tr>
  21.        <td>表格单元格</td>
  22.        <td>表格单元格</td>
  23.        <td>表格单元格</td>
  24.      </tr>
  25.      <tr>
  26.        <td>表格单元格</td>
  27.        <td>表格单元格</td>
  28.        <td>表格单元格</td>
  29.      </tr>
  30.    </tbody>
  31.  </table>
  32. <h1>斑马线表格</h1>
  33. <table class="table table-striped">
  34.    <thead>
  35.      <tr>
  36.        <th>表格标题</th>
  37.        <th>表格标题</th>
  38.        <th>表格标题</th>
  39.      </tr>
  40.    </thead>
  41.    <tbody>
  42.      <tr>
  43.        <td>表格单元格</td>
  44.        <td>表格单元格</td>
  45.        <td>表格单元格</td>
  46.      </tr>
  47.      <tr>
  48.        <td>表格单元格</td>
  49.        <td>表格单元格</td>
  50.        <td>表格单元格</td>
  51.      </tr>
  52.      <tr>
  53.        <td>表格单元格</td>
  54.        <td>表格单元格</td>
  55.        <td>表格单元格</td>
  56.      </tr>
  57.      <tr>
  58.        <td>表格单元格</td>
  59.        <td>表格单元格</td>
  60.        <td>表格单元格</td>
  61.      </tr>
  62.    </tbody>
  63.  </table>
  64. <h1>带边框的表格</h1>
  65.  <table class="table table-bordered">
  66.    <thead>
  67.      <tr>
  68.        <th>表格标题</th>
  69.        <th>表格标题</th>
  70.        <th>表格标题</th>
  71.      </tr>
  72.    </thead>
  73.    <tbody>
  74.      <tr>
  75.        <td>表格单元格</td>
  76.        <td>表格单元格</td>
  77.        <td>表格单元格</td>
  78.      </tr>
  79.      <tr>
  80.        <td>表格单元格</td>
  81.        <td>表格单元格</td>
  82.        <td>表格单元格</td>
  83.      </tr>
  84.      <tr>
  85.        <td>表格单元格</td>
  86.        <td>表格单元格</td>
  87.        <td>表格单元格</td>
  88.      </tr>
  89.      <tr>
  90.        <td>表格单元格</td>
  91.        <td>表格单元格</td>
  92.        <td>表格单元格</td>
  93.      </tr>
  94.    </tbody>
  95.  </table>
  96. <h1>鼠标悬浮高亮的表格</h1>
  97. <table class="table table-striped table-bordered table-hover">
  98.    <thead>
  99.      <tr>
  100.        <th>表格标题</th>
  101.        <th>表格标题</th>
  102.        <th>表格标题</th>
  103.      </tr>
  104.    </thead>
  105.    <tbody>
  106.      <tr>
  107.        <td>表格单元格</td>
  108.        <td>表格单元格</td>
  109.        <td>表格单元格</td>
  110.      </tr>
  111.      <tr>
  112.        <td>表格单元格</td>
  113.        <td>表格单元格</td>
  114.        <td>表格单元格</td>
  115.      </tr>
  116.      <tr>
  117.        <td>表格单元格</td>
  118.        <td>表格单元格</td>
  119.        <td>表格单元格</td>
  120.      </tr>
  121.      <tr>
  122.        <td>表格单元格</td>
  123.        <td>表格单元格</td>
  124.        <td>表格单元格</td>
  125.      </tr>
  126.    </tbody>
  127.  </table>
  128.  <h1>紧凑型表格</h1>
  129.   <table class="table table-condensed">
  130.    <thead>
  131.      <tr>
  132.        <th>表格标题</th>
  133.        <th>表格标题</th>
  134.        <th>表格标题</th>
  135.      </tr>
  136.    </thead>
  137.    <tbody>
  138.      <tr>
  139.        <td>表格单元格</td>
  140.        <td>表格单元格</td>
  141.        <td>表格单元格</td>
  142.      </tr>
  143.      <tr>
  144.        <td>表格单元格</td>
  145.        <td>表格单元格</td>
  146.        <td>表格单元格</td>
  147.      </tr>
  148.      <tr>
  149.        <td>表格单元格</td>
  150.        <td>表格单元格</td>
  151.        <td>表格单元格</td>
  152.      </tr>
  153.      <tr>
  154.        <td>表格单元格</td>
  155.        <td>表格单元格</td>
  156.        <td>表格单元格</td>
  157.      </tr>
  158.    </tbody>
  159.  </table>
  160.  <h1>响应式表格</h1>
  161.  <div class="table-responsive">
  162.    <table class="table table-bordered">
  163.    <thead>
  164.      <tr>
  165.        <th>表格标题</th>
  166.        <th>表格标题</th>
  167.        <th>表格标题</th>
  168.      </tr>
  169.    </thead>
  170.    <tbody>
  171.      <tr>
  172.        <td>表格单元格</td>
  173.        <td>表格单元格</td>
  174.        <td>表格单元格</td>
  175.      </tr>
  176.      <tr>
  177.        <td>表格单元格</td>
  178.        <td>表格单元格</td>
  179.        <td>表格单元格</td>
  180.      </tr>
  181.      <tr>
  182.        <td>表格单元格</td>
  183.        <td>表格单元格</td>
  184.        <td>表格单元格</td>
  185.      </tr>
  186.      <tr>
  187.        <td>表格单元格</td>
  188.        <td>表格单元格</td>
  189.        <td>表格单元格</td>
  190.      </tr>
  191.    </tbody>
  192.  </table>
  193. </div>
  194. </body>
  195. </html>
下一节