Bulma-elements-table
提供：Dev Guides
ブルマ-テーブル
説明
Bulmaは、データを表形式で表示するための要素をラップします。 あなたは_.table_クラスの基本クラスを以下の表要素で<table>に追加する必要があります-
| Sr.No | Tag & Description |
|---|---|
| 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は、テーブルをさまざまなスタイルで表示するために、次の修飾子をサポートしています。
- 縁取られた
- 縞模様
- 狭い
- ホバリング可能
- 全角
上記の例を使用して、_。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>以下の出力が表示されます-
他の修飾子を使用するには、上記の修飾子を表内の他の修飾子に置き換えてください。
