English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTMLテーブルは、グリッド方式（行と列など）でデータを表示するために使用されます。Bootstrapを使用して4、テーブルの外観を非常に簡単に大幅に変更できます。
Bootstrap4 以下の例のように.tableクラスを使用して基本テーブルのスタイルを設定します：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>基本テーブル</h2> <p>.tableクラスで基本テーブルのスタイルを設定します:</<p>ブラウザのサイズをリセットして効果を確認してください。< sm> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
通过添加 .table-stripedクラスで、 thead> の行にストライプが見られます。以下の例を参照してください：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>ストライプテーブル</h2> <p>通过添加 .table-stripedクラスでストライプテーブルを設定します:</<p>ブラウザのサイズをリセットして効果を確認してください。< <table class="table table-striped"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
.table-borderedクラスは、テーブルに枠を追加できます
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>枠付きテーブル</h2> <p>.テーブル-borderedクラスは、テーブルに枠を追加できます:</<p>ブラウザのサイズをリセットして効果を確認してください。< <table class="table table-bordered"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
.table-hoverクラスは、テーブルの各行にマウスオーバー効果（グレー背景）を追加できます：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>マウスオーバー状態テーブル</h2> <p>.テーブル-hoverクラスは、テーブルの各行にマウスオーバー効果（グレー背景）を追加できます：</<p>ブラウザのサイズをリセットして効果を確認してください。< <table class="table table-hover"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
.table-ダーククラスは、テーブルにダーク背景を追加できます：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>ダーク背景テーブル</h2> <p>.テーブル-ダーククラスは、テーブルにダーク背景を追加できます：</<p>ブラウザのサイズをリセットして効果を確認してください。< <table class="table table-dark"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
联合使用.table-ダークと.table-stripedクラスは、ダークのストライプテーブルを作成できます：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>ダークストライプテーブル</h2> <p>联合使用.table-ダークと.table-stripedクラスは、ダークのストライプテーブルを作成できます：</<p>ブラウザのサイズをリセットして効果を確認してください。< <table class="table table-ダークテーブル-striped"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
联合使用.table-ダークと.table-hoverクラスは、ダーク背景テーブルのマウスオーバー効果を設定できます：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>マウスオーバー効果 - ダーク背景テーブル</h2> <p>联合使用.table-ダークと.table-hoverクラスは、ダーク背景テーブルのマウスオーバー効果を設定できます：</<p>ブラウザのサイズをリセットして効果を確認してください。< <table class="table table-ダークテーブル-hover"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
意味のある色クラスを指定することで、テーブルの行やセルに色を設定できます：
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>意味のある色クラスを指定する</h2> <p>意味のある色クラスを指定することで、テーブルの行やセルに色を設定できます：</<p>ブラウザのサイズをリセットして効果を確認してください。< sm> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>Default</<td>Yes< <td>Defaultson</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-primary"> <td>Primary</<td>Yes< <td>Joe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-success"> <td>Success</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-danger"> <td>Danger</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-info"> <td>Info</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-warning"> <td>Warning</<td>Yes< <td>Refs</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-active"> <td>Active</<td>Yes< <td>Activeson</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-secondary"> <td>Secondary</<td>Yes< <td>Secondson</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-light"> <td>Light</<td>Yes< <td>Angie</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-dark text-dark"> <td>Dark</<td>Yes< <td>Bo</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
以下のテーブルにテーブルの色クラスの説明を示します:
| クラス名 | 説明 |
|---|---|
| .table-primary | 青色: 重要な操作を指定します |
| .table-success | 緑色: 执行可能な操作を指定します |
| .table-danger | 赤色: 危険な操作を指定します |
| .table-info | 薄い青色: 内容が変更されたことを示します |
| .table-warning | オレンジ: 注意が必要な操作を示します |
| .table-active | グレー: マウスオーバー効果に使用されます |
| .table-secondary | グレー: 内容があまり重要でないことを示します |
| .table-light | 薄いグレー、テーブルの行の背景になることができます |
| .table-dark | 濃いグレー、テーブルの行の背景になることができます |
Bootstrap v4.0.0-beta.2 中.thead-dark クラスは表の見出しに黒い背景を追加するために使用されます， .thead-light クラスは表の見出しに灰色の背景を追加するために使用されます:
Bootstrap v4.0.0-beta このバージョンでは，.thead-inverse クラスは表の見出しに黒い背景を追加するために使用されます，.thead-default クラスは表の見出しに灰色の背景を追加するために使用されます。
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>表の見出しの色</h2> <p>.thead-dark クラスは表の見出しに黒い背景を追加するために使用されます，.thead-light クラスは表の見出しに灰色の背景を追加するために使用されます:</<p>ブラウザのサイズをリセットして効果を確認してください。< sm> <thead class="thead-dark"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> sm> <thead class="thead-light"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
.table-sm クラスを使用して、内側マージンを減らして小さなテーブルを設定できます:
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>小さなテーブル</h2> <p>.テーブル-sm クラスを使用して、内側マージンを減らして小さなテーブルを設定できます:</<p>ブラウザのサイズをリセットして効果を確認してください。< <table class="table table-bordered テーブル-responsive <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>テストを見てみる ‹/›
.table-responsive クラスを使用して、スクリーン幅が 992px の場合、水平スクロールバーが作成されます。視覚領域の幅が 992px の場合、異なる効果が表示されます（スクロールバーはありません）:
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>レスポンシブテーブル</h2> <p>.テーブル-responsive クラスを使用して、スクリーン幅が 992px の場合、水平スクロールバーが作成されます。視覚領域の幅が 992px の場合、異なる効果が表示されます（スクロールバーはありません）:</<p>ブラウザのサイズをリセットして効果を確認してください。< p>-responsive"> sm> <table class="table"> <tbody> <thead>/<th>Example< <th>#</<th>Example< <th>Firstname</<th>Example< <th>Lastname</<th>Example< <th>Age</<th>Example< <th>City</<th>Example< <th>Country</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< </tr> </th> thead> <tbody> <td>Pitt<1</<td>Yes< <tr>/<td>Yes< <td>Anna</<td>Yes< <td>Pitt<35</<td>Yes< <td></<td>Yes< <td>New York</<td>Yes< <td>USA</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< </tr> </tbody> </table> </div> </div> </body> </html>テストを見てみる ‹/›
以下のクラスを使用して、指定されたスクリーン幅でスクロールバーを表示設定できます：
| クラス名 | スクリーン幅 |
|---|---|
| .table-<div class="table-sm | < 576px |
| .table-<div class="table-md | < 768px |
| .table-<div class="table-lg | < 992px |
| .table-<div class="table-xl | < 1200px |
<!DOCTYPE html> <html> <head> <title>Bootstrap サンプル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>レスポンシブテーブル</h2> <p>.テーブル-<div class="table-sm 类用于创建响应式表格，在屏幕宽度小于 576sm クラスはレスポンシブテーブルを作成するために使用されます。スクリーン幅が/<p>ブラウザのサイズをリセットして効果を確認してください。< px の時に水平スクロールバーが表示されます。</<p>ブラウザのサイズをリセットして効果を確認してください。< p>-<div class="table-responsive sm> <table class="table"> <tbody> <thead>/<th>Example< <th>#</<th>Example< <th>Firstname</<th>Example< <th>Lastname</<th>Example< <th>Age</<th>Example< <th>City</<th>Example< <th>Country</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< </tr> </th> thead> <tbody> <td>Pitt<1</<td>Yes< <tr>/<td>Yes< <td>Anna</<td>Yes< <td>Pitt<35</<td>Yes< <td></<td>Yes< <td>New York</<td>Yes< <td>USA</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< </tr> </tbody> </table> </div> </div> </body> </html>テストを見てみる ‹/›