SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.02.06
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回はtableタグについて勉強しましょう!

 

tableタグの使い方

一般的なテーブル表

tableタグはtrtrtdのタグを使用します。

一般的なテーブル

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

<!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タグの説明
  • 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で設定するようにしましょう。

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

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

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

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

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

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

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

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

1
枠線の太さを指定する方法
table {
		width: 540px;
		margin: 0 auto;
	}
	
table th,
table td {
		border: 3px solid #000000;
	}

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

枠線の色を指定する方法

2
枠線の色を指定する方法
table {
		width: 540px;
		margin: 0 auto;
	}
	
table th,
table td {
		border: 3px solid #c00c00;
	}

thtd
border: 3px solid #c00c00を指定しています。

枠線の隙間を無くす方法

3
枠線の隙間を無くす方法<
table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}

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

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

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

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

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

1
背景色を変更する指定
table {
		width: 540px;
		margin: 0 auto;
		border-collapse: collapse;
		background-color: #cf563a;
	}
	
table th,
table td {
		border: 1px solid #000000;
	}

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

2
背景色を変更する指定
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を指定しています。

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

3
クラス名を付け行や列の背景の色を変更する指定
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を指定しています。

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

1
文字の色を変更する指定
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を指定します。

2
文字の色を変更する指定
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を指定しています。

3
文字の色を変更する指定
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を指定しています。

文字を中央寄せする指定

文字を中央寄せする指定

文字を中央寄せする指定

1
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を指定します。

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

2
文字を左右に配置する指定
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を指定しています。

表の余白を変える指定

表の余白を変える指定

表の余白を変える指定

1
表の余白を変える指定
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;
	}

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

2
表の余白を変える指定
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属性

1
セルを横方向に結合するcolspan属性
<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属性

2
セルを横方向に結合する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の指定はとくに変える必要はありません。

関連記事

【HTML table】複雑な表(テーブル)をコピペで簡単に作る方法

今回は、【Table Tag Generator】についてのご説明です。HTMLの表を簡単に作成についてご説明しております。複雑な表の結合も文字の入力も簡単に出来ます。最後にHTMLコードが反映させるのでコピペで簡単作成。

まとめ

今回はこれで以上です。

HTMLのtableタグについて説明いたしました。
今後はtableタグに関するレスポンシブ、ジェネレーターについても記事にしていきます!

最後まで読んでいただきありがとうございました。
表を作成からレイアウトの変更まで1度お試しください。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top