【HTML table】表を作成からレイアウトの変更

シュウ

今回はtableタグについて勉強しましょう！

[記事の内容]

tableタグの使い方

tableタグはtr、tr、tdのタグを使用します。

実際にコードに表すとこうなります。

<!DOCTYPE html>
<html>
<head>
<title>【HTML】tableタグを簡単に作成する方法 </title>
</head>
<body>
 <table>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>鈴木</td>
      <td>20歳</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>24歳</td>
    </tr>
    <tr>
      <td>田中</td>
      <td>26歳</td>
    </tr>
  </table>
</body>
</html>

tableタグの説明

tableタグの説明

table: 表全体を囲むときに使用します。
tr: 「Table Row（行）」の略。
表を囲むときに使用します。
th: 「Table Header（見出し）の略。
表の見出しとして使用します。
td: 「Table Data（データ）」の略。
表のデータとして使用します。

: でも、最初の画像とイメージが全然違うね。

: ここから、CSSを使いイメージに近づけるよ！

幅のサイズを変更する

今回はブラウザサイズを640pxとして進めていきます。

幅のサイズ指定

1 htmlにサイズ指定をする。
2 cssにサイズ指定をする。

幅のサイズをhtmlで指定をする方法

htmlにwidth指定はせずに、CSSで設定するようにしましょう。
理由：スマートフォンで見た際に画面からはみ出る可能性があります。

<table width="540" border="1">
</table>

必ずCSSでwidth指定をおこないましょう。
今回は例としてあげています。

幅のサイズをcssで指定をする方法

必ず幅(width)はcssで設定するようにしましょう。

table {
  width: 540px;
  margin: 0 auto;
}

table {
	width: 100%;
}

CSS指定

パターン1:
width=”540px”に指定し、margin: 0 atuo;を指定することで中心にtableタグがくるように設置しています。
パターン2:
width=”100%”に指定することでブラウザいっぱいに広がります。
width=”100%” = 640pxになります。

: 今回は2番を使用して次に進めます。
レスポンシブにする際には必ず100%指定ににましょう。

tableタグ、枠線に色をつけるbordercolor指定

上記の画像は「border=”1″」が指定しています。

枠線の太さを指定する方法

htmlに「border=”1″」を指定すると後から変更する際に大変面倒です。
線(border)の設定は全てCSSでするのが良いでしょう。

CSSで指定する方法を紹介します。

table {
		width: 540px;
		margin: 0 auto;
	}
	
table th,
table td {
		border: 3px solid #000000;
	}

thとtdに
border: 3px solid #000000を指定しています。
tableタグにborder属性は指定しないようにしましょう。

枠線の色を指定する方法

table {
		width: 540px;
		margin: 0 auto;
	}
	
table th,
table td {
		border: 3px solid #c00c00;
	}

thとtdに
border: 3px solid #c00c00を指定しています。

枠線の隙間を無くす方法

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}

tableに
border-collapse: collapseを指定することで一重線になります。
※collapseとは隣接するボーダーラインを重ねあわせて表示させる指定になります。

: 少しずつ、いい感じになってきてる！あともう一息かな？

行や列の背景の色、文字の色を変更する指定

行や列の背景の色を変更する指定

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
		background-color: #cf563a;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}

全体に指定する際にはtableに
background-color: #cf563aを指定します。
th、tdの表の背景の色も変わります。

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}
	
table th {
		background-color: #cf563a;
	}
	
table td {
		background-color: #6fb067;
	}

thには
tbackground-color: #cf563aを指定しています。
tdには
tbackground-color: #6fb067を指定しています。

クラス名を付け行や列の背景の色を変更する指定

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}
	
table th {
		background-color: #cf563a;
	}
	
table td {
		background-color: #6fb067;
	}
	
table td.bg_color01 {
		background-color: #38a2c6;
	}

今回は年齢の表にクラス名を付けています。
td.bg_color01には
background-color: #38a2c6を指定しています。

行や列の文字の色を変更する指定

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
		color: #ffffff;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}
	
table th {
		background-color: #cf563a;
	}
	
table td {
		background-color: #6fb067;
	}

全体に指定する際にはtableに
color: #ffffffを指定します。

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}
	
table th {
		background-color: #cf563a;
		color: #ffffff;
	}
	
table td {
		background-color: #6fb067;
		color: #fff200;
	}

thには
color: #ffffffを指定しています。
tdには
color: #fff200を指定しています。

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}
	
table th {
		background-color: #cf563a;
		color: #ffffff;
	}
	
table td {
		background-color: #6fb067;
		color: #fff200;
	}
	
table td.font_color01 {
		color: #3a3706;
	}

今回は年齢の表にクラス名を付けています。
td.font_color01には
color: #3a3706を指定しています。

文字を中央寄せする指定

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
		color: #ffffff;
		text-align: center;
	}
	
	table th,
	table td {
		border: 1px solid #000000;
	}
	
	table th {
		background-color: #cf563a;
	}
	
	table td {
		background-color: #6fb067;
	}

全体に指定する際にはtableに
text-align: centerを指定します。

文字を左右に配置する指定

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
		color: #ffffff;
	}
	
	table th,
	table td {
		border: 1px solid #000000;
	}
	
	table th {
		background-color: #cf563a;
		text-align: left;
	}
	
	table td {
		background-color: #6fb067;
		text-align: right;
	}

thには
text-align: leftを指定しています。
tdには
text-align: rightを指定しています。

表の余白を変える指定

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
		color: #ffffff;
		text-align: center;
	}
	
	table th,
	table td {
		border: 1px solid #000000;
		padding: 10px;
	}
	
	table th {
		background-color: #cf563a;
	}
	
	table td {
		background-color: #6fb067;
	}

今回は、th、tdに
padding: 10pxを指定しています。

table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
		color: #ffffff;
		text-align: center;
	}
	
	table th,
	table td {
		border: 1px solid #000000;
	}
	
	table th {
		background-color: #cf563a;
		padding: 10px;
	}
	
	table td {
		background-color: #6fb067;
		padding: 5px 10px;
	}

thには
padding: 10pxを指定しています。
tdには
padding: 5px 10pxを指定しています。

このようにth、tdと個別に設定ができます。

: 最初のデザインと同じになったね！！これで終わりかな？

: あともう少し。ここからは、少し難しいセルを結合について解説するよ

セルを結合する指定

セルを縦方向に結合するrowspan属性

<table>
		<tr>
		  <th>名前</th>
		  <th>年齢</th>
		</tr>
		<tr>
			<td>鈴木</td>
			<td rowspan="2">① 20歳 ①と②を結合しております。</td>
		</tr>
		<tr>
			<td>佐藤</td>
			<!--<td>②</td>-->
		</tr>
		<tr>
			<td>田中</td>
			<td>26歳</td>
		</tr>
</table>

※rowspan属性はセルを縦方向に結合する際に使用します。
セルが縦につながりました。このときCSSの指定はとくに変える必要はありません。

セルを横方向に結合するcolspan属性

<table>
		<tr>
		  <th>名前</th>
		  <th>年齢</th>
		</tr>
		<tr>
			<td>鈴木</td>
			<td>20歳</td>
		</tr>
		<tr>
			<td>佐藤</td>
			<td>24歳</td>
		</tr>
		<tr>
			<td colspan="2">① 田中は欠席です ①と②を結合しております。</td>
			<!--<td>②</td>-->
		</tr>
</table>

※colspan属性はセルを横方向に結合する際に使用します。
セルが横につながりました。このときCSSの指定はとくに変える必要はありません。