- #HTML/CSS
2024.01.062024.01.06

HTML/CSSでtable作成！border装飾してオシャレに仕上げよう！

この記事を書いた人

まりこ

専業主婦から在宅ワーママに転身した一児の母。制作会社でコーダーとして勤務しながらフリーランスとしても活動中！

表の作成ってなんだか難しそう。。
タグが似ていて違いがわからない。。

こんな悩みを抱えていませんか？

テーブルタグは似たようなタグが多くて違いが分かりにくいですよね。

今回はそんな方に向けて、タグの意味から使用方法、表の装飾方法を網羅的に説明します。

タグの意味をしっかり理解すれば、テーブルの作成も怖くありません。最後には簡単に表が作成できるツールも紹介しています！

是非この記事をしっかり読んで、表に対する苦手意識をなくしましょう♪

tableタグの基本解説

HTMLで表を作成するには「table」タグを使用します。

「table」は「tr」や「th」,「td」などのタグを使用して表の行や列、見出しを表現します。

次項でそれぞれのタグについて説明します。

table

「table」は表全体（テーブル）を囲うタグです。表を作成するには「table」タグで囲う必要があります。

tr

「tr」とは「Table Row」の略で表の行（横方向）を指定するタグです。

<table>
　<tr>
　　<th>行1</th>
　　<td>1-1</td>
　　<td>1-2</td>
　　<td>1-3</td>
　</tr>
</table>

th

「th」とは「Table Header」の略で、表の見出しを表すタグで、必ずtrの中に入れる必要があります。

thタグのテキストは、一般的なブラウザでは太字で中央揃えされます。

見出しがない場合はthタグはなくても大丈夫です。

<table>
	<tr>
　　　<th>見出し</th>
　　　<th>見出し</th>
　　　<th>見出し</th>
　　　<th>見出し</th>
	</tr>
</table>

td

「td」とは「Table Data」の略で、表の列（縦方向）を指定するタグで、必ずtrの中に入れる必要があります。

tdはデフォルトでは左寄せになります。

<td>の数で列の数が決まります。

<tr>
  <th>行1</th>
  <td>1-1</td>
  <td>1-2</td>
  <td>1-3</td>
</tr>

caption

「caption」とは、テーブル全体のタイトルを指定するタグです。

「caption」タグは、table開始タグの直後に1つだけ記述します。

初期値では表の上部に中央寄せされます。位置はcssのプロパティ（caption-sideやtext-align）で調整します。

caption {
  caption-side: bottom; /* 表の下に指定 */
  text-align: right;    /* 表の右端に指定 */
}

tableタグの属性（HTML）について

border属性やbordercolor属性などありますが、実はほとんどが廃止（非推奨）とされています。

現在で非推奨の属性

align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width, height, sortable

実質tableタグに設定する属性は、他要素と同様にグローバル属性であることを認識しておきましょう。

グローバル属性: グローバル属性とはすべての要素に指定できる共通の属性のことで、id属性やclass属性などを指します。

tableタグ独自のプロパティ（CSS）について

tableのcssで各要素にborderを指定することで線を引くことができます。

table,tr,td,th {
  border: 1px solid black;
}

初期では境界線が空いた以下のような表になります。

border-collapse

border-collapse プロパティで、セルの境界線を空けるか空けないかの指定ができます。

指定できるプロパティの値は以下の2つになります。

separate（初期値）
collspse

次項でそれぞれの値について説明します。

separate（初期値）

→セルの境界線を空けて表示する

初期値のため指定の必要はありません。

collapse

→セルの境界線を空けないで表示する

table {
  border-collapse: collapse;
}

border-collapse: collapse;を指定することで以下の表のように境界線がない表を作成することが出来ます。

border-spacing

→テーブルの境界線の間隔を指定します。

こちらのプロパティはborder-collapseがseparateの時にしか使用しません。

1つの値を指定すると、セルの上下左右の間隔が指定されます。

/* 上下左右に10px指定 */
table {
  border-spacing: 10px;
}

半角スペースを入れて2つの値を指定すると、1つ目が左右、2つ目が上下の値に指定されます。4つ別の値を指定することはできません。

/* 左右に5px、上下に15px指定 */
table {
  border-spacing: 5px 15px;
}

tableの実践的な装飾方法

ここからは応用編としてテーブルの実践的な装飾方法を説明します。

セルを結合したり、背景色をつけたりborderの線を変えたりとカスタマイズすることでこの表の完成を目指します！

HTMLの骨組みです。それぞれのセルにスタイルを当てるためにclass属性を付与しています。

<table>
	<tr>
		<th class="table-head">ダミーテーブル</th> 
		<th class="table-head">ダミーテーブル</th>
		<th class="table-head">ダミーテーブル</th>
		<th class="table-head">ダミーテーブル</th>
	</tr>
	<tr>
		<td class="row-head">row1</td>
		<td class="table-date">1-1</td>
		<td class="table-date">1-2</td>
		<td class="table-date">1-3</td>
	</tr>
	<tr>
		<td class="row-head">row2</td>
		<td class="table-date">2-1</td>
		<td class="table-date">rowspan2</td>
		<td class="table-date">2-2</td>
	</tr>
	<tr>
		<td class="row-head">row3</td>
		<td class="table-date">3-1</td>
		<td class="table-date">3-2</td>
		<td class="table-date">3-3</td>
	</tr>
</table>

CSSには事前に以下のスタイルを当てています。すでにテーブル全体に線を入れ、セルの境界線を空けない設定をしています。

/*リセットCSS*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*テーブル全体*/
table {
  margin: 50px auto 0;       /* テーブル全体を中央寄せ */
  width: 800px;              /* テーブルの幅を指定 */
  text-align: center;        /* セルを中央寄せ */
  border-collapse: collapse; /* セルの境界線を空けない */
  border: 1px solid black;   /* テーブル全体を囲う線 */
}

td,th {
  border: 1px solid black;   /*セル内の線*/
}

スタートの状態です。

セルの大きさを調整

セルの大きさは要素にpaddingを指定することで調整ができます。

今回はタイトルを構成する<th>と列を構成する<td>に共通のpaddingを指定します。それぞれ別に違う値を指定することもできます。

td , th {
  padding: 1em 2em;　/* 上下1em 左右2em の余白 */
}

このようになります。テキストが一番長いセルの幅に合わせて自動的に高さや幅が同じになります。

線の種類や太さを変える

境界線の種類や太さを変えるときはborder プロパティの指定をします。

「border : 太さ種類色;」で指定します。値を書く順番に決まりはありません。

代表的なもの

solid：１本線
double：２本線
dashed：破線

他の線の種類は border-styleをご確認ください。

線の太さを変えたい場合はpxの数字を変更します。

border: 2px solid black;

線の種類を変えたい場合はsolid部分を変更します。

border: 1px dashed black;

テーブルの外枠のborderを太さ2pxに変更しますと外枠だけ太くなりました。

/*表全体*/
table {
  margin: 50px auto 0;
  width: 800px;
  text-align: center;
  border-collapse: collapse;
  border: 2px solid black;　/*表全体を2pxの線で囲う*/
}

次に、データセルの境界線を点線、線の色を薄いグレーに変更してみましょう。今回はtable-dateクラスにスタイルを当てます。

.table-date {
	border: 1px dashed #7d7d7d; /*線のスタイル*/
}

border-rightやborder-leftやborder-bottomを指定することで一箇所だけ色を変えることもできます。

1行目のセルの下線を分かりやすいように赤色に変更してみます。

.table-head {
	border-bottom: 2px solid red; /*下線のスタイル*/
}

セルの色を変える

セルの色を変えるにはbackground-color プロパティを指定します。

さきほどのtable-headにオレンジ色の背景をつけます。下線の色は濃いグレーに変更します。

.table-head {
	border-bottom: 2px solid #595959;　/*線のスタイル*/
	background-color: #fecb79;　　　　　/*背景色*/
}

つづけて一列目の背景とボーダーも同じようにプロパティを指定して変更します。

.row-head {
	border-bottom: 2px solid #595959;　/*線のスタイル*/
	border-right: 2px solid #595959;　 /*線のスタイル*/
	background: #f9e0b7;　　　　　　　　　/*背景色*/
}

完成形に近づいてきました！

セルの結合

セルの結合は、thタグやtdタグにcolspan（横方向）やrowspan（縦方向）属性を指定をします。

指定方法

一行目をひとつの行にしたい場合、colspanで横方向を結合します。

このとき、不要な列は削除する必要があります。

<tr>
  <!-- 4つの列を結合するので不要な3つの列の記述は削除する -->
  <!-- colspanで結合 -->
　　<th class="table-head" colspan="4">ダミーテーブル</th>
</tr>

次にrowsapn2のセルと3-2のセルを結合します。行の結合なのでrowspanで縦方向を結合します。

今回はrow3の行の3-2を削除します。

<tr>
	<td class="row-head">row2row2</td>
	<td class="table-date">2-1</td>
	<td class="table-date" rowspan="2">rowspan2</td>
	<td class="table-date">2-2</td>
</tr>
<tr>
	<td class="row-head">row3</td>
	<td class="table-date">3-1</td>
	<td class="table-date">3-3</td>
</tr>

このように行が結合されました。

見出しを縦に並べる

見出しは一行目以外にも指定できます。

見出しを縦に並べるには、一列目の「td」タグを「th」タグに変更するだけです。

<tr>
	<th class="row-head">row1</th> 	<!-- tdからthにタグを変更 -->
	<td class="table-date">1-1</td>
	<td class="table-date">1-2</td>
	<td class="table-date">1-3</td>
</tr>
<tr>
	<th class="row-head">row2</th>　<!-- tdからthにタグを変更 -->
	<td class="table-date">2-1</td>
	<td class="table-date" rowspan="2">rowspan2</td>
	<td class="table-date">2-2</td>
</tr>
<tr>
	<th class="row-head">row3</th> <!-- tdからthにタグを変更 -->
	<td class="table-date">3-1</td>
	<td class="table-date">3-3</td>
</tr>

レスポンシブ対応させる

スマホの場合、表が入りきれず見切れることがあります。スマホ対応するには2通りの方法があります。

横スクロールで見切れた部分を見せる
セルの幅を100%にして縦に並べる

横スクロールで対応

①表全体を囲むwrapperを追加します。

<div class="wrapper"> <!-- テーブルを囲むwrapperを追加する  -->
	<table>
		<tr>
			<th class="table-head" colspan="4">ダミーテーブル</th>
		</tr>
		<tr>
			<th class="row-head">row1</th>
			<td class="table-date">1-1</td>
			<td class="table-date">1-2</td>
			<td class="table-date">1-3</td>
		</tr>
		<tr>
			<th class="row-head">row2</th>
			<td class="table-date">2-1</td>
			<td class="table-date" rowspan="2">rowspan2</td>
			<td class="table-date">2-2</td>
		</tr>
		<tr>
			<th class="row-head">row3</th>
			<td class="table-date">3-1</td>
			<td class="table-date">3-3</td>
		</tr>
	</table>
</div>

②追加したwrapperクラスにoverflow-x : scroll;を指定します。※プロパティ値はscrollでもautoでも同じ動きをします。

.wrapper {
	overflow-x: scroll; /* 横スクロールをscrollに設定 */
}

これで画面幅を狭めても、見切れてるテーブル部分は横スクロールで表示させることができます。

縦並びにカラムを変える

「th」と「td」にdisplay: block;を指定することで、ブロック要素にします。※ブロック要素にすると横幅100%のサイズになります。

@media screen and (max-width: 480px) {
	table {
		width: 90%;
	}

	td,
	th {
		display: block; /* ブロック要素に変更 */
	}

	th {
		border: 0px;
	}

	.row-head {
		border-bottom: 0px;
		border-right: 0px;
	}

	.table-date {
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		border-bottom: 1px dashed #7d7d7d;
	}

	.table-date:last-of-type {
		border-bottom: 0px;
	}
}

※上記のコードはスタイルを調整するcssも追加しています。