<!DOCTYPE html>
<html lang="ja">
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">

    	<title>Project Nyaan</title>
    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    	<style>
    		body {
    			padding-top: 50px;
    			background-color: lightgray;
    		}
    		.starter-template {
    			padding: 40px 15px;
    			background-color: white;
    		}
    	</style>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
        		<div class="container">
        			<div class="navbar-header">
        				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        					<span class="sr-only">Toggle navigation</span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        				</button>
        				<a class="navbar-brand" href="#">Project Nyaan</a>
        			</div>
        			<div id="navbar" class="collapse navbar-collapse">
        				<ul class="nav navbar-nav">
        					<li class="active"><a href="#">Home</a></li>
        					<li><a href="#list">List</a></li>
        					<li><a href="#table">Table</a></li>
        				</ul>
        			</div>
        		</div>
        	</nav>
    	<div class="container">
    		<div class="starter-template">
    			<h1>吾輩は猫である。</h1>
    			<p class="lead">名前はまだない。</p>
    			<img class="img-responsive center-block" src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg">
    			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
    			</p>
				<h2 id="list">動物リスト</h2>
    			<ul class="list-group">
    				<li class="list-group-item">ねこ</li>
    				<li class="list-group-item">いぬ</li>
    				<li class="list-group-item">うさぎ</li>
    			</ul>
    			<h2 id="table">猫テーブル</h2>
    			<table class="table table-striped">
    			    <thead>
    			        <tr>
    			            <th>#</th>
    			            <th>名前</th>
    			            <th>特徴</th>
    			            <th>住所</th>
    			        </tr>
    			    </thead>
    			    <tbody>
    			        <tr>
    			            <td>1</td>
    			            <td>たま</td>
    			            <td>くつした</td>
    			            <td>東京都港区青山</td>
    			        </tr>
                    	<tr>
                    		<td>2</td>
                    		<td>ミケ</td>
                    		<td>三毛</td>
                    		<td>東京都千代田区秋葉原駅周辺</td>
                    	</tr>
	                    <tr>
					        <td>3</td>
                    		<td>トラ</td>
                    		<td>シマ</td>
                    		<td>兵庫県西宮市甲子園町</td>
                    	</tr>
                    	<tr>
                    		<td>4</td>
                    		<td>にゃあ</td>
                    		<td>トラの兄弟</td>
                    		<td>兵庫県西宮市甲子園町</td>
                    	</tr>
    			    </tbody>
    			</table>
    			<a class="btn btn-primary" href="#">Topに戻る</a>
            	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            </div>
        </div>
    </body>
</html>

<table>
	<thead><!-- ここが表題-->
			<tr><!-- 横一行ごとに記述する-->
				<th>#</th>
				<th>名前</th>
				<th>特徴</th>
				<th>住所</th>
			</tr>
	</thead>
	<tbody><!-- ここが表の本体-->
		<tr><!-- 横一行ごとに記述する-->
				<td>1</td>
				<td>たま</td>
				<td>くつ下</td>
				<td>東京都港区南青山</td>
			</tr>
	</tbody>
</table>