<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>テーブル０１</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="row" style="margin: 10px;">
<div class="span12">
<h1>テーブル</h1>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>基本はclass="table"</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<table class="table">
<tr>
<td>1</td>
<td>テスト１</td>
<td>テストメモ１</td>
</tr>
<tr>
<td>2</td>
<td>テスト２</td>
<td>テストメモ２</td>
</tr>
<tr>
<td>3</td>
<td>テスト３</td>
<td>テストメモ３</td>
</tr>
</table>
</div>
</div>
<hr />
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>table-stripedを付加することで奇数行を変更</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<table class="table table-striped">
<tr>
<td>1</td>
<td>テスト１</td>
<td>テストメモ１</td>
</tr>
<tr>
<td>2</td>
<td>テスト２</td>
<td>テストメモ２</td>
</tr>
<tr>
<td>3</td>
<td>テスト３</td>
<td>テストメモ３</td>
</tr>
</table>
</div>
</div>
<hr />
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>table-borderedを付加することで罫線を描画</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<table class="table table-bordered">
<tr>
<td>1</td>
<td>テスト１</td>
<td>テストメモ１</td>
</tr>
<tr>
<td>2</td>
<td>テスト２</td>
<td>テストメモ２</td>
</tr>
<tr>
<td>3</td>
<td>テスト３</td>
<td>テストメモ３</td>
</tr>
</table>
</div>
</div>
<hr />
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>table-hoverを付加することでマウスホバー時に色を変更</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<table class="table table-hover">
<tr>
<td>1</td>
<td>テスト１</td>
<td>テストメモ１</td>
</tr>
<tr>
<td>2</td>
<td>テスト２</td>
<td>テストメモ２</td>
</tr>
<tr>
<td>3</td>
<td>テスト３</td>
<td>テストメモ３</td>
</tr>
</table>
</div>
</div>
<hr />
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>table-condensedを付加することで行を少し狭くする</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<table class="table table-condensed">
<tr>
<td>1</td>
<td>テスト１</td>
<td>テストメモ１</td>
</tr>
<tr>
<td>2</td>
<td>テスト２</td>
<td>テストメモ２</td>
</tr>
<tr>
<td>3</td>
<td>テスト３</td>
<td>テストメモ３</td>
</tr>
</table>
</div>
</div>
<hr />
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>複数のclassを併用する</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<table class="table table-striped table-hover table-bordered">
<tr>
<td>1</td>
<td>テスト１</td>
<td>テストメモ１</td>
</tr>
<tr>
<td>2</td>
<td>テスト２</td>
<td>テストメモ２</td>
</tr>
<tr>
<td>3</td>
<td>テスト３</td>
<td>テストメモ３</td>
</tr>
<tr>
<td>4</td>
<td>テスト４</td>
<td>テストメモ４</td>
</tr>
</table>
</div>
</div>
<hr />
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>trタグに"success"、"error"、"warning"、"info"</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<table class="table">
<tr class="success">
<td>1</td>
<td>テスト１（success）</td>
<td>テストメモ１</td>
</tr>
<tr class="error">
<td>2</td>
<td>テスト２（error）</td>
<td>テストメモ２</td>
</tr>
<tr class="warning">
<td>3</td>
<td>テスト３（warning）</td>
<td>テストメモ３</td>
</tr>
<tr class="info">
<td>4</td>
<td>テスト４（info）</td>
<td>テストメモ４</td>
</tr>
</table>
</div>
</div>
<hr />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
