ソート機能付き テーブル

都道府県名 読み方 総人口 面積(km²) 人口密度(人/km²)
北海道 ほっかいどう 約547万人 83,450 66
東京都 とうきょうと 約1,327万人 2,189 6,000
大阪府 おおさかふ 約886万人 1,899 4,700
沖縄県 おきなわけん 約142万人 2,271 626 

<table id="myTable" class="tablesorter">
	<thead>
		<tr>
			<th class="{sorter:'metadata'}">都道府県名</th>
			<th class="{sorter:'metadata'}">読み方</th>
			<th class="{sorter:'metadata'}">総人口</th>
			<th class="{sorter:'metadata'}">面積(km²)</th>
			<th class="{sorter:'metadata'}">人口密度(人/km²)</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td class="{sortValue:10}">北海道</td>
			<td class="{sortValue:40}">ほっかいどう</td>
			<td class="{sortValue:547}">約547万人</td>
			<td class="{sortValue:83450}">83,450</td>
			<td class="{sortValue:66}">66</td>
		</tr>
		<tr>
			<td class="{sortValue:20}">東京都</td>
			<td class="{sortValue:30}">とうきょうと</td>
			<td class="{sortValue:1327}">約1,327万人</td>
			<td class="{sortValue:2189}">2,189</td>
			<td class="{sortValue:6000}">6,000</td>
		</tr>
	</tbody>
</table>


#myTable {
	width: 80%;
	margin: 2rem auto;
	border: 1px #ccc solid;
	}
#myTable th {
	color: #fff;
	background-color: #3591d1;
	letter-spacing: .2em;
	}
#myTable th,
#myTable td {
	text-align: center;
	padding:.5rem 1rem;
	}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css">
<script src="/Path/to/jquery.metadata.js"></script>
<script>
$(document).ready(function() {
	$('#myTable').tablesorter();
});
</script>

TOP