iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
自我挑戰組

資工的日常系列 第 28

HTML Bootstrap 4 Tables

w3school:https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

基礎table

<table class="table">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
    </tr>
</tbody>
</table>

最外框是<table class="table">,內層是thead(table head欄位名稱)和tbody(table body資料)。thead裡放HTML內原本的tr(table row)包th。tbody則放數筆tr包td。


Striped Rows:
table的class後接table-striped,就能做出灰白灰白的條紋效果。

<table class="table table-striped">
    <thread>.(欄位名稱).</thread>
    <tbody>.(數筆資料).</tbody>
</table>

Bordered Table:
基礎的Bootstrap Table只有橫線分隔,table的class後再加"table-bordered"把每一個都切出來

<table class="table table-bordered"
    ...
</table>

Hover Rows:
一樣在table的class後接"table-hover",就能製造出mouseover的效果了。

<table class="table table-hover"
    ...
</table>

https://ithelp.ithome.com.tw/upload/images/20180117/20107866tE8V4GNIba.png


table colors:
bootstrap提供的顏色一樣可以用在table上,且根前面的table-hover,table-striped都不衝突。用法table-'Bootstrap的顏色',EX:table-primary,table-success...etc。
Bootstrap 4 Colors:
https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

<table class="table table-striped table-primary" style="width:50%">
    ...
</table>

https://ithelp.ithome.com.tw/upload/images/20180117/20107866UdDbPTII6i.png

此外,table-'color'也可以用在tbody中的table cells(<td>)和thread上的table rows(<tr>)。

<table class="table table-striped table-primary" style="width:50%">
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John</td>
    <td class="table-success">Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr class="table-success">
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td class="table-success">Dooley</td>
    <td>july@example.com</td>
  </tr>
</tbody>
</table>

https://ithelp.ithome.com.tw/upload/images/20180117/201078666TIPfmziSl.png

下一篇:https://ithelp.ithome.com.tw/articles/10197525


上一篇
PYTHON regular expression 實戰
下一篇
HTML Bootstrap 4 Tables 續
系列文
資工的日常30

尚未有邦友留言

立即登入留言