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

表格--基础表格

大家对表格并不太陌生,但对于Bootstrap中的表格如何使用,或许还有点陌生,接下来的内容,将根据不同的表格类型向大家介绍Bootstrap表格的实际使用方法。
对表格的结构,跟我们平时使用表格是一样的:

<table>
<thead>
<tr>
<th>表格标题</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
…
</tr>
     …
</tbody>
</table>


如无特别声明,下面介绍表格类型的时候,结构都是类似上面的代码。
基础表格
在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果在<table>元素中不添加任何类名,表格是无任何样式效果的。想得到基础表格,我们只需要在<table>元素上添加“.table”类名,就可以得到Bootstrap的基础表格:

<table class="table">
…
</table>

Bootstrap的基础表格,大致长得像下图所示的样子:

主要源码查看bootstrap.css文件第1402行~第1441行,由于代码太长,此处不一一列举。

“.table”主要有三个作用:

  ☑  给表格设置了margin-bottom:20px以及设置单元内距

  ☑  在thead底部设置了一个2px的浅灰实线

  ☑  每个单元格顶部设置了一个1px的浅灰实线

任务

本小节没有任务,单击按钮进行下一个小节的学习。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; 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. <table class="table">
  11. <thead>
  12. <tr>
  13. <th>表格标题</th>
  14. <th>表格标题</th>
  15. <th>表格标题</th>
  16. </tr>
  17. </thead>
  18. <tbody>
  19. <tr>
  20. <td>表格单元格</td>
  21. <td>表格单元格</td>
  22. <td>表格单元格</td>
  23. </tr>
  24. <tr>
  25. <td>表格单元格</td>
  26. <td>表格单元格</td>
  27. <td>表格单元格</td>
  28. </tr>
  29. </tbody>
  30. </table>
  31.  
  32.  
  33.  
  34.  
  35. </body>
  36. </html>
  1. body{margin:20px;}
下一节