004 表格元素

一.表格的定义

我们只需要在table元素上面加上一个class="table" 就可以实现一个基本的表格样式.

实例:

<table class="table">
<thead>
   <tr>
          <th class="text-center">id</th>
          <th class="text-center">姓名</th>
          <th class="text-center">年龄</th>
  </tr>
</thead>
<tbody>
    <tr>
          <td class="text-center">01</td>
          <td class="text-center">trek</td>
          <td class="text-center">12</td>
    </tr>
    <tr>
          <td class="text-center">013</td>
          <td class="text-center">tom</td>
          <td class="text-center">12</td>
     </tr>
</tbody>
</table>

---

二.表格的其它样式

给表格添加其它的样式也十分的简单,只要在table元素上面追加其它的样式就可以了.

(2)表格斑马线

class=”table-striped”

(3)表格边框

class=”table-bordered”

(4)鼠标经过的高亮显示

class=”table-hover”

(5)表格创建的全部属性

class=”table table-striped table-bordered table-hover”

我们在使用表格的时候,可以直接追加全部的表格属性就行了.

另外,给我们的td标签追加class="text-center"就可以实现文字居中显示.