HTML5+CSS3【マルチデバイス】―Twitter Bootstrap０５

HTML5 授業



Tables

  • 「thead」「tbody」の記述が必須


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Twitter Bootstrap の導入</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<table class="table">
<thead>
<tr><th>曜日</th><th>訪問者数</th></tr>
</thead>
<tbody>
<tr><td>月</td><td>3100</td></tr>
<tr><td>火</td><td>2800</td></tr>
<tr><td>水</td><td>3000</td></tr>
<tr><td>木</td><td>2400</td></tr>
<tr><td>金</td><td>2200</td></tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


ブラウザで表示【 Chrome 】






  • table要素に「class="table"」を追加
<table class="table">


ブラウザで表示【 Chrome 】







  • tableクラスに「table-striped」を追加
<table class="table table-striped">

ブラウザで表示【 Chrome 】






  • tableクラスに「table-bordered」を追加
<table class="table table-striped table-bordered">

ブラウザで表示【 Chrome 】






  • tableクラスに「table-condensed」を追加
<table class="table table-striped table-bordered table-condensed">

ブラウザで表示【 Chrome 】