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

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

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

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

table header 1	table header 2	table header 3
table data 1A	table data 1B	table data 1C
table data 2A	table data 2B	table data 2C
table data 3A	table data 3B	table data 3C
table data 4A	table data 4B	table data 4C
table data 5A	table data 5B	table 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>