English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrapテーブル

Bootstrapは明確なテーブルのレイアウトを提供しています。以下のテーブルには、Bootstrapがサポートしている一部のテーブル要素が示されています：

タグクラス
<table>テーブルに基本的なスタイルを追加
<thead>テーブルのタイトル行のコンテナ要素（<tr>）、テーブルの列を識別するために使用されます。
<tbody>テーブル主体のテーブル行のコンテナ要素（<tr>）。
<tr>単一行に現れるテーブルセルのコンテナ要素（<td>または<th>）。
<td>デフォルトのテーブルセル。
<th>列や行（範囲と位置によって異なります）を識別するための特別なテーブルセル。<thead>内で使用する必要があります。
<caption>テーブルに含まれる内容の説明や要約

テーブルクラス

以下のスタイルはテーブルに使用できます：

以下のテーブルに示されるコンテキストクラスを使用して、テーブルの行または単一のセルの背景色を変更できます。クラスオンラインサンプル
を含める任意の<table>に基本的なスタイルを適用（横分割線のみ）試してみてください
を含める-striped<tbody>内にズボラライン形式のストライプを追加（IE）8 （非サポート）試してみてください
を含める-borderedすべてのテーブルセルにボーダーを追加試してみてください
を含める-hover<tbody>内の任意の行でマウスホバー状態を有効に試してみてください
を含める-condensedテーブルをよりコンパクトに試してみてください
すべてのテーブルクラスを組み合わせ使用試してみてください

<tr>, <th>, <td>クラス

以下のクラスはテーブルの行やセルに使用できます：

以下のテーブルに示されるコンテキストクラスを使用して、テーブルの行または単一のセルの背景色を変更できます。クラスオンラインサンプル
説明行やセルにホバーの色を適用試してみてください
特定の行またはセルにホバー色を適用します成功の操作を示す試してみてください
.info情報の変更を示す操作試してみてください
成功またはポジティブなアクションを示します警告の操作を示す試してみてください
注意が必要な警告を示します危険な操作を示す試してみてください

基本的なテーブル

内余白（padding）と水平分割のみを持つ基本的なテーブルを望む場合は、classを追加してください。 を含める、以下の例を参照してください：

px幅の大規模デバイスで表示すると、差は見られません。

サンプル
!DOCTYPE　html>
<html>
	<head>-8<meta　charset="utf　
	">　-　基本的なテーブル</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table　class="table">
	<caption>基本的なテーブルレイアウト</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<caption>コンパクトテーブルレイアウト</<th>
　　　　　　　　　<th>名前</<th>
　　　　　　</tr>
　　　</<thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<th>郵便番号</td>
　　　　　　　　　<td>Tanmay</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　000/td>
　　　　　　　　　<td>Sachin</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>
テストを見てみる‹/›

以下の結果が表示されます：

オプションのテーブルクラス

基本的なテーブルマークと.tableクラスの他にも、マークにスタイルを定義するために使えるクラスがあります。これらのクラスについて説明します。

ストライプ・テーブル

追加することで を含める-striped クラス、<tbody>内の行にストライプが見られます。以下の例を参照してください：

px幅の大規模デバイスで表示すると、差は見られません。

サンプル
!DOCTYPE　html>
<html>
	<head>-8<meta　charset="utf　
	">　-　ストライプ・テーブル</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
コンパクトテーブル<-striped">
	<caption>ストライプ・テーブルレイアウト</caption>
	<thead>
		<tr>
			<caption>コンパクトテーブルレイアウト</<th>
			<th>名前</<th>
			<th>都市</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>郵便番号</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
テストを見てみる‹/›

以下の結果が表示されます：

ボーダー・テーブル

追加することで を含める-bordered クラス、各要素の周りにボーダーがあり、テーブル全体が丸みを帯びています。以下の例を参照してください：

px幅の大規模デバイスで表示すると、差は見られません。

サンプル
!DOCTYPE　html>
<html>
	<head>-8<meta　charset="utf　
	">　-　ボーダー・テーブル</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
コンパクトテーブル<-bordered">
	<caption>ボーダー・テーブルレイアウト</caption>
	<thead>
		<tr>
			<caption>コンパクトテーブルレイアウト</<th>
			<th>名前</<th>
			<th>都市</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>郵便番号</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
テストを見てみる‹/›

以下の結果が表示されます：

ホバー・テーブル

追加することで を含める-hover クラス、指が行に乗ったときに薄いグレーの背景が表示されます。以下の例を参照してください：

px幅の大規模デバイスで表示すると、差は見られません。

サンプル
!DOCTYPE　html>
<html>
	<head>-8<meta　charset="utf　
	">　-　ホバー・テーブル</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
コンパクトテーブル<-hover">
	<caption>ホバー・テーブルレイアウト</caption>
	<thead>
		<tr>
			<caption>コンパクトテーブルレイアウト</<th>
			<th>名前</<th>
			<th>都市</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>郵便番号</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
テストを見てみる‹/›

以下の結果が表示されます：

テーブルを簡略化

追加することで を含める-condensed クラス、インラインの余白（padding）が半分に切られており、テーブルがよりコンパクトに見えるようにしています。以下の例を参照してください。情報をよりコンパクトに見せたい場合に非常に役立ちます。

px幅の大規模デバイスで表示すると、差は見られません。

サンプル
!DOCTYPE　html>
<html>
	<head>-8<meta　charset="utf　
	">　-　コンパクトテーブル</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
コンパクトテーブル<-<table　class="table　table
	condensed">/caption>
	<thead>
		<tr>
			<caption>コンパクトテーブルレイアウト</<th>
			<th>名前</<th>
			<th>都市</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>郵便番号</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
テストを見てみる‹/›

以下の結果が表示されます：

<td>Pune<

コンテキストクラス

以下のテーブルに示されるコンテキストクラスを使用して、テーブルの行または単一のセルの背景色を変更できます。クラス
説明.active
特定の行またはセルにホバー色を適用します.success
成功またはポジティブなアクションを示します.warning
注意が必要な警告を示します.danger

危険または潜在的なネガティブアクションを示します

px幅の大規模デバイスで表示すると、差は見られません。

サンプル
!DOCTYPE　html>
<html>
	<head>-8<meta　charset="utf
	">　-　これらのクラスは<tr>、<td>、または<th>に適用できます。/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table　class="table">
	コンテキストクラス</caption>
	<thead>
		<tr>
			<th>商品</<th>
			<th>支払い日付</<th>
			<th>状態</<th>
		</tr>
	</<thead>
	<tbody>
		<caption>コンテキストテーブルレイアウト<
			<td>商品1</td>
			<td>23/11/2013</td>
			<td>待出荷</td>
		</tr>
		<tr　class="active">
			<td>商品2</td>
			<td>10/11/2013</td>
			<td>出荷中</td>
		</tr>
		<tr　class="success">
			<td>商品3</td>
			<td>20/10/2013</td>
			<td>未確認</td>
		</tr>
		<tr　　class="warning">
			<td>商品4</td>
			<td>20/10/2013</td>
			<td>返品済</td>
		</tr>
	</tbody>
</table>
</body>
</html>
テストを見てみる‹/›

以下の結果が表示されます：

<tr　　class="danger">

レスポンシブテーブル を含める を任意の を含める-.table responsive 768class内で、テーブルを水平にスクロールして小さなデバイス（ 768px）。大きさが

px幅の大規模デバイスで表示すると、差は見られません。

サンプル
!DOCTYPE　html>
<html>
	<head>-8<meta　charset="utf
	">　-　<title>Bootstrap　サンプル/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="table-responsive">
	<table　class="table">
		<caption>レスポンシブテーブルレイアウト</caption>
		<thead>
			<tr>
				<th>商品</<th>
				<th>支払い日付</<th>
				<th>状態</<th>
			</tr>
		</<thead>
		<tbody>
			<tr>
				<td>商品1</td>
				<td>23/11/2013</td>
				<td>待出荷</td>
			</tr>
			<tr>
				<td>商品2</td>
				<td>10/11/2013</td>
				<td>出荷中</td>
			</tr>
			<tr>
				<td>商品3</td>
				<td>20/10/2013</td>
				<td>未確認</td>
			</tr>
			<tr>
				<td>商品4</td>
				<td>20/10/2013</td>
				<td>返品済</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>
テストを見てみる‹/›

以下の結果が表示されます：

BootstrapフォームBootstrapコード