HTML5 / CSS3 シンプルなテーブルの作り方

今回はHTML5/CSS3で、シンプルなテーブルの作り方をご紹介します。


久しぶりにWebページを作るときに忘れがちですよね。
また、プログラム経験が浅い方はテーブル作りに手間取ることもあるでしょう。


今回の記事ではそんなテーブルを出来るだけシンプルな形でソースコードまで載せます。もちろんコピー&ペーストOKです。


table header 1table header 2table header 3
table data 1Atable data 1Btable data 1C
table data 2Atable data 2Btable data 2C
table data 3Atable data 3Btable data 3C
table data 4Atable data 4Btable data 4C
table data 5Atable data 5Btable data 5C


ソースコード

上記テーブルのソースコードはこちらです。コピペどうぞ。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table.simple_table {
	font-size:11px;/* ここでテーブルサイズが決定する */
	border-collapse: collapse;
}
table.simple_table th {
	border: 1px solid black;
	padding: 8px;
	background-color: silver;
}
table.simple_table td {
	border: 1px solid black;
	padding: 8px;
	background-color: white;
}
</style>
</head>
<body>
  <table class="simple_table">
    <tr><th>table header 1</th><th>table header 2</th><th>table header 3</th></tr>
    <tr><td>table data 1A</td><td>table data 1B</td><td>table data 1C</td></tr>
    <tr><td>table data 2A</td><td>table data 2B</td><td>table data 2C</td></tr>
    <tr><td>table data 3A</td><td>table data 3B</td><td>table data 3C</td></tr>
    <tr><td>table data 4A</td><td>table data 4B</td><td>table data 4C</td></tr>
    <tr><td>table data 5A</td><td>table data 5B</td><td>table data 5C</td></tr>
  </table>
</body>
</html>


シンプルゆえにソースコードも短く、非常に簡単な作りのテーブルでしたね。


応用編はこちらをどうぞ。
somegoro.hatenablog.com