【html・CSS】tableタグ雛形～1からtable作成が面倒な方へ

Webサイトやブログで1からテーブルを作成するのが面倒臭いと思っているあなた！簡単な雛形があれば、それをコピペして使えれば一番いいですよね。また少し編集すれば自分好みのテーブルが作成できればもっといいですよね。と私自身も思っていたので作成して見ました。よければ使用して見て下さい。

最終的にこのようなテーブルを作成します。では行ってみましょう！

デフォルトのhtmlとCSS

htmlファイルと同じ階層に「css」フォルダを作成し、その中に「test.css」ファイルをいれて下さい。

table_default.htmlファイル

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title_name</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
  <body>
	<table border="1">
    	<tr>
    		<th>行タイトル１</th>
			<th>行タイトル２</th>
			<th>行タイトル３</th>
    	</tr>
       	<tr>
    		<td>行１列１</td>
			<td>行１列２</td>
			<td>行１列３</td>
		</tr>
		<tr>
    		<td>行２列１</td>
			<td>行２列２</td>
			<td>行２列３</td>
    	</tr>
	</table>
 </body>
</html>

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:400px;
    margin:auto;
}
tr{
    text-align: center;
}

Webブラウザで「table_default.html」を表示して見ます。

デフォルトのtableが出来ました。

行を追加したい

行を追加したければ赤枠の部分を下に追加して、「td」の部分を編集するだけです。ちなみに使用しているエディタはMicrosoftのVisual Studio Codeです。使用しやすいです。使用してみたいあなたはこちらからどうぞ。

行が追加されました。

行タイトルに色を付けてみましょう。

これだけでは味気ないのでタイトルに色を付けたりして装飾してみましょう。ここはスタイルなので「test.css」の中身を変更するだけでOKです。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:400px;
    margin:auto;
}
tr{
    text-align: center;
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
}

赤枠の部分を追加しました。

background-color: rgba(14, 71, 226, 0.87);

背景の色を青っぽく変えてみました。「rgba」の後の数字を変えてみて自分好みの色に変えてみてください。

color:white;

背景を濃い色にしたので文字を白にしています。「white」の部分を変更して文字の色を変えてみてください。

border-color:white;

ボーダーの色を文字に合わせて白にしてみました。「white」の部分を変更して文字の色を変えてみてください。

border-bottom:double black;

タイトルの下を二重線にしてみました。１つ手前の手順でボーダーの色を白にしてしまったので「boder-bottom」で下のボーダーを黒色にしました。これでタイトルの装飾は終わりにしておきます。

他にも色々と試してみて下さい。不要だなと思うところはcssから消せば良いだけです。下の二重線なんて要らないよってあなたは「border-bottom:double black;」を消せば良いだけです。

テーブルの中の文字の圧迫を緩和する

テーブルと文字の間の余白が少なく圧迫感があるので、テーブルと文字の間の余白をとってあげましょう。ここでも見た目なのでcssファイルを変更するだけです。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:400px;
    margin:auto;
}
tr{
    text-align: center;
    
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
    padding:5px 20px 5px 20px;
}
td{
    padding:5px 20px 5px 20px;
}

「th」と「td」に「padding」を設定します。padding-topなど四方向設定してもよいですが、paddingだけで四方向指定できます。順番ですが上、右、下、左の順番で指定していきます。この場合だと上の余白:5px、右の余白:20px、下の余白:5px、左の余白:20px。上と下、左と右は同じ余白をとる事が多いですので「padding:5px 20px;」と省略も出来ます。この場合、上下:5px、左右:20pxで編集しやすいですね。編集しやすくするか、細かく設定したいかで決めて下さい。これで一度見てみます。

余白は余裕が出て良くなりましたが、タイトルは余白をとりすぎて２行になり、縦長になってしまいました。余白調節してもいいですが、統一感を持たせる為にも数値はそのままで全体の大きさを設定しましょう。初めから「400px」にしていましたが「500px」に変更してみましょう。

横タイトルの最終CSSファイルです。htmlファイルは最初に貼ったものです。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:500px;
    margin:auto;
}
tr{
    text-align: center; 
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
    padding:5px 20px;
}
td{
    padding:5px 20px;
}

tableの「width」の値を「500px」に変更して見ました！見てみましょう。どうでしょうか？？

丁度よくなりました。これで基本的なテーブルは出来たかと思います。

列タイトルを入れてみる！

ちょっと縦のタイトルも入れたくなったのでおまけでやってみましょう。

table_default.html

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title_name</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
  <body>
	<table border="1">
    	<tr>
			<th></th>
			<th>行タイトル１</th>
			<th>行タイトル２</th>
			<th>行タイトル３</th>
    	</tr>
       	<tr>
			<th>列タイトル１</th>
			<td>行１列１</td>
			<td>行１列２</td>
			<td>行１列３</td>
		</tr>
		<tr>
			<th>列タイトル１</th>
			<td>行２列１</td>
			<td>行２列２</td>
			<td>行２列３</td>
		</tr>
		<tr>
			<th>列タイトル１</th>
			<td>行３列１</td>
			<td>行３列２</td>
			<td>行３列３</td>
    	</tr>
	</table>
 </body>
</html>

「tr」の中に「th」を入れてみましょう。最初の「th」はタグだけ入れます。どうなったか見てみましょう。

げげっ「th」タグのcssが列にも反映されています。列のタイトルだけ別のcssを適応させたいですね。ここでは「class」を使用して１．列だけ別のcssを適応させます。

<th class="col_title">列タイトル１</th>

また幅が足りなくなりまた２行になっているので幅を伸ばします。

width:600px;

またタイトルの文字は自動で太くなっており図太いので細くします。

font-weight: lighter;

縦横タイトルありの最終htmlファイルとCSSファイルです。

table_default.htmlファイル

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title_name</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
  <body>
	<table border="1">
    	<tr>
			<th></th>
			<th>行タイトル１</th>
			<th>行タイトル２</th>
			<th>行タイトル３</th>
    	</tr>
       	<tr>
			<th class="col_title">列タイトル１</th>
			<td>行１列１</td>
			<td>行１列２</td>
			<td>行１列３</td>
		</tr>
		<tr>
			<th class="col_title">列タイトル２</th>
			<td>行２列１</td>
			<td>行２列２</td>
			<td>行２列３</td>
		</tr>
		<tr>
			<th class="col_title">列タイトル３</th>
			<td>行３列１</td>
			<td>行３列２</td>
			<td>行３列３</td>
    	</tr>
	</table>
 </body>
</html>

htmlファイルの「tr」の中に入れた「th」のすべてに「class=”col_title”」と入力してみましょう。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:600px;
    margin:auto;
}
tr{
    text-align: center; 
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
    padding:5px 20px;
    font-weight: lighter;
}
td{
    padding:5px 20px;
}
.col_title{
    background-color: rgba(212, 220, 241, 0.87);
    color:black;
    border-color:gray;
    border-bottom:gray;
}