Bulma - 表格

說明

Bulma 在一個表格格式中封裝了顯示資料的元素。您需要將 table 的基本類新增到具有以下表格元素的表中 -

序號	標記和說明
1	<table> 這是一個主容器，封裝了用於以表格格式顯示資料的元素。
2	<thead> 這是表格的頭部分，包含表的標題行的元素。
3	<tbody> 它包含表格體中表格行 (<tr>) 的元素。
4	<tr> 它指定出現在一行上的表格單元 (<td> 或 <th>)。
5	<th> 它定義表格單元的標題。
6	<td> 這是一個預設表格單元。
7	<tfoot> 這是表格的底部。

基本表格

如果您想在頁面中顯示基本的表格樣式，請將 table 的基本類新增到任何表格中，如下例所示 -

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Basic Table
            </span>
            <br>
            
            <table class = "table">
               <thead>
                  <tr>
                     <th>Position</th>
                     <th>Name</th>
                     <th>Country</th>
                  </tr>
               </thead>
               <tfoot>
                  <tr>
                     <th><abbr title = "Position">Pos</abbr></th>
                     <th>Player</th>
                     <th>
                        <abbr title = "Played for the country">Country</abbr>
                     </th>
                  </tr>
               </tfoot>
               <tbody>
                  <tr>
                     <td>1</td>
                     <td>Sachin</td>
                     <td>India</td>
                  </tr>
                  <tr>
                     <td>2</td>
                     <td>Smith</td>
                     <td>Australia</td>
                  </tr>
                  <tr>
                     <td>3</td>
                     <td>Joe Root</td>
                     <td>England</td>
                  </tr>
               </tbody>
            </table>
            
         </div>
      </section>
      
   </body>
</html>

它顯示了下例輸出 -

修飾符

Bulma 支援以下修飾符以顯示不同樣式的表格。

is-bordered
is-striped
is-narrow
is-hoverable
is-fullwidth

我們將會採用上述示例，並使用所需的修飾符以及 .table 類。這裡，我們將看到在表格中使用 is-bordered 修飾符，如下所示。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Bordered Table
            </span>
            <br>
            
            <table class = "table is-bordered">
               <thead>
                  <tr>
                     <th>Position</th>
                     <th>Name</th>
                     <th>Country</th>
                  </tr>
               </thead>
               
               <tfoot>
                  <tr>
                     <th>
                        <abbr title = "Position">Pos</abbr>
                     </th>
                     <th>Player</th>
                     <th>
                        <abbr title = "Played for the country">Country</abbr>
                     </th>
                  </tr>
               </tfoot>
               
               <tbody>
                  <tr>
                     <td>1</td>
                     <td>Sachin</td>
                     <td>India</td>
                  </tr>
                  <tr>
                     <td>2</td>
                     <td>Smith</td>
                     <td>Australia</td>
                  </tr>
                  <tr>
                     <td>3</td>
                     <td>Joe Root</td>
                     <td>England</td>
                  </tr>
               </tbody>
            </table>
            
         </div>
      </section>
      
   </body>
</html>

它顯示了下例輸出 -

要使用其他修飾符，只需將表格中上述使用的修飾符替換為其他修飾符。

bulma_elements.htm

列印頁面

上一個

下一個