CSS

HTML　CSS　テーブル（表）の作り方とその装飾の仕方基本

表（table）の作り方

表を作るには。
テーブルタグを使います。

<TABLE>はテーブル（表）を作成するタグで

<TABLE>～</TABLE>内に<TR>～</TR>を加えることでで表の横一行をまずは定義します。

つまりTR数が行数ということになります。

TRはtable raw（テーブル行）の略で。
この行の中に<TH>～</TH>や <TD>～</TD>でセルを定義します。

THはtablen header（テーブル見出し）の略で。身出しセルを作るものです。

それに対してTDはTable Data（テーブル素子）の略で<TD>～</TD>はさまれた部分がそれぞれ
表のセルの内容になります。

これらを組み合わせることでテーブルが出来上がります。
簡単な例を記述してみたいと思います。

HTML

<table border="1">
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th>
 		</tr>

 		<tr>	
 			<td>セキセイインコ</td><td>かわいい</td>
 		</tr>

 		<tr>
 			<td>オカメインコ</td><td>人懐っこい</td>
 		</tr>
 	</table>

テーブル全体に関係する属性はtableタグに追加していきます。
今回は最低限ということで枠をつけて太さを１pxにしました。

border="1"

と記述することで1pxの指定になります。

またTRタグで囲んだところが３つありますので。
今回の表は３行であることがわかります。

TRタグで囲んだ一番上は見出しなのでTHタグで囲みその中に内容を入れていきます。
今回は２つですので横に<TH>～</TH>が２つ並びます。
その下にさらに<TR>～</TR>を起き同じ様に今度は内容なので<TD>～</TD>を２つ並べます。
更に同様な作業を行います。

それぞれのTRタグ内の<TH>～</TH>または<TD>～</TD>は２つありますので列が２つだとわかります。

ブラウザ表示は以下。

THタグ内の文字が太字になっています。

以上を最低限の基礎として様々変更を加えていきたいと思います。

セルの中の余白を増やしたり文字を中央に寄せる

padding

セル内のテキストなどを見やすくするために余白を入れてみたいと思います。

こういう場合paddingを使うんでした。よくわかr無い方は以下をご覧ください。

CSS marginとpadding 余白の指定方法　基礎

とりあえず外部CSSで見出し部分の余白を大きく取ってみます。

table th{
	padding: 4px 15px
}

余白は値を２つ書くと上下、左右の余白の大きさを表すんでした。
先程の表と並べてみます。

見出しが上下左右とも余裕が出てきたことがわかります。
余白のおポキ差の分だけ表全体も広がりますが。
指定していないTDタグで囲ったセルは上下は先程と変化はありません。
TD タグにも同じ様に余白を指定します。（わざと大きく取ってみました）
CSS

table th{
	padding: 4px 15px
}
table td{
	padding: 10px 20px
}

先程の見出しだけ余白を設けたものと比較をしてみます。

余白の分だけ更に全体が広がっているのがわかります。

text-align

また余白を入れると文字が中央によるのがわかります。

しかし文字を真ん中に寄せる方法は他にもあります。

それは

text-alignプロパティ

を使うやり方です。

text-alignはブロックコンテナ内の行の揃え位置・均等割付を指定するプロパティで。

値はleft,center,right,end,justyなどがありますが。

中央に揃えるにはcenterを使います。

text-align:center

で指定します。

余白をつけるとテーブル全体が大きくなってしまいますので。
それを避けたいが、セル内のテキストはきれいに揃えたい、などという場合には便利です。

先程の記述から、余白指定の部分を削除し、テーブル全体の文字を真ん中に揃えてきます。

table {
	text-align: center;
}

すると以下のようになります。指定をしていなかった元のテーブルは以下。

セル内のテキストが中央に揃っているのがわかります。

テーブル内のテキストや背景色を変える

テキストの色を変える

先程から使っている記述を使っていきます。

文字の中央揃えの指定はそのままにしてあります。

それで。

例えばテーブルの中にある文字の色を赤に変える場合は
CSSに以下のように記述をします。

table {
	text-align: center;
	color: red
}

color: red

を付け加えただけです。

すると以下のようにブラウザ表示されます。

もし見出しだけを変えたい場合には
CSSを以下のように書き換えます。

table {
	text-align: center;

}
table th{
	color: red;
}

すると以下のようにブラウザ表示されます。

背景色を変える

background :

を使います。

先程の記述を以下のように変えます。THタグを指定して背景を赤にします。

table {
	text-align: center;

}
table th{
	background:  red;
}

すると以下のようにブラウザ表示されます。

見出し行の色を変えるのはこの様に簡単にできるんですが。
列に色がついているものを見かけることも多いです。
列に色をつけるには同じ列のTDタグにそれぞれ同じ目印を付けてCSSで色を指定するのが一番簡単です。

ここで２行２列だと今後の変更に差し障りが出てきますので３行３列にします。
HTMLを以下のように変えました。

<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>
 		<tr>
 			<td>シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>
 		</tr>
 	</table>

ブラウザ表示

一番左の列の色を変えてみます。

列の背景を変えるには対応セルを一つ一つ目印を付けていかなくてはなりません。

見出しの下一番左側の列のセルの背景色を変える場合。
<td class=”color”>セキセイインコ</td>

クラス名を付けて目印とします。

同じ様に

<td class=”color”>オカメインコ</td>
<td class=”color”>シロハラインコ</td

とします。

HTML

<table border="1">
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th><th>原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td>かわいい</td><td>オーストラリア</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td><td>人懐っこい</td><td>オーストラリア</td>
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>

つぎにCSS でその目印に背景色を付けていきます。

さきほどのCSSに

.color{ background: skyblue; }と記述を加えます。
colorで指定したTDタグのセルの背景を水色にします。

table {
	text-align: center;

}
table th{
	background:  red;
}
 .color{
	background: skyblue;

}

ブラウザ表示

表の枠への装飾

線の色や太さを変える

まずテーブルの外枠の色や太さを変える場合。
いままでのHTMLの記述では大枠やセルの枠の線の太さをその中で指定していました。
ただそれだと一々HTMLの記述を変えなくてはいけません。
それで。
CSSで枠の指定をしていこうと思います。
HTMLの＜table border=”1″＞からborder=”1″を削除する.

そのままだと枠は全て消えてしまいます。

これはこれで表現の仕方としてはありですが。

これにテーブル全体の枠を表示させてみます。

まず先程のCSSのtable

枠の値を指定します。

border:solid 3px green;

実戦で太さは3px、緑色と指定しました。

	table {
	border:solid 3px green;
	text-align: center;

すると以下のようになります。

値を変えればサカざまな表示が行なえます。

例えば二重線、太さは10px　色をピンクと指定すると

border:double  10px pink;

以下のように表示されます。

セルの枠の色や太さを変えてみます。

テーブルの中のTHタグとTDタグで囲まれたセルに枠をつけるということで
THタグとTDタグ両方に
例えば実線で太さは４px、濃い青色と指定した場合

border:solid 4px darkblue;

全体のCSSは以下のようになり。

table {
	border:double  10px pink;
	text-align: center;
	

}
table th{
	background:  red;
	border:solid 4px darkblue;
}
 .color{
	background: skyblue;

}
table td {
	border:solid 4px darkblue;
}

ブラウザ表示は以下。

だんだん様になってきました^^;

ただ大枠は二重線としてあるからいいとして。
セルとセルの間に隙間があります。

これを一重線にしたい場合などにはtableにborder-collapseという線と線の間の隙間について指定するプロパティを使います。

隣り合うするセルのボーダーを重ねて表示する場合は（collapse）、間隔をあけて表示するか（separate）を指定します。

CSSのテーブルをしているところにborder-collapse: collapseと指定して見ると

table {
	border:double  10px pink;
	text-align: center;
	border-collapse: collapse

}

以下のようにブラウザ表示されます。

複数のセルを結合したりテーブルのサイズを決める

テーブルのサイズを決める

余白を増やしたり枠の線の感覚を空けたり空けなかったりでテーブル全体の大きさが変わってしまいます。
大きさを指定するにはテーブルタグに
widthプロパティで幅を指定します。
例えば先程の表でwidthの値を変えてみます。

width:500px

width:200

CSSは以下。

table {
	border:double  10px pink;
	text-align: center;
	border-collapse: collapse;
	width:200px;

}
table th{
	background:  red;
	border:solid 4px darkblue;
}
 .color{
	background: skyblue;

}
table td {
	border:solid 4px darkblue;
}

なおレスポンシブデザインの場合、
width:100%
と指定しておくとどんなディスプレイであっても自動調整してくれて表を適切に表示してくれます

複数のセルの結合

縦に結合

縦方向に並ぶ複数のセルをつなげたいときは、HTMLの中のつなげたいthもしくはtdタグにrowspan=”つなげるセル数”と書き込みます

という感じですね。

例えば先程のTHMLに以下のように記述をしてみます。

２行目の一番最後のTDタグの部分に

<td rowspan=”2″>オーストラリア</td>

と記述をします。

同時に３行目にあった<td >オーストラリア</td>を削除します。

<table >
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th><th>原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td>かわいい</td><td rowspan="2">オーストラリア</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td><td>人懐っこい</td><!--tdを消す-->
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>
 		</tr>
 </table>

すると以下のようにブラウザ表示されます。

「インコの特徴」のところも同じ様にやってみます。
「かわいい」と「人懐っこい」になっていますが。

これも「かわいい」に統一してみます。

先ほどと同じ要領で２列目の２行目を<td rowspan=”2″>かわいい</td>とし。下にある「人懐っこい」セルを削除します。

	<table >
 		
 		<tr>
 			<th>インコの種類</th><th>インコの特徴</th><th>原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td rowspan="2">かわいい</td><td rowspan="2">オーストラリア</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td><!--td消す-->
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td>陽気な性格</td><td>アマゾン周辺</td>
 		</tr>
 	</table>

すると以下のようにブラウザ表示されます。

横に結合

横に結合させるためには

colspan＝”つなげるセルの数”

を使います。

rowspanと使い方は同じです。

今度は見出しの「インコの特徴」と「原産地」を結合させて「インコのと原産地」と変更します。
更にその下の「かわいい」と「オーストラリア」を結語させて「オーストラリア原産でかわいい」に変更してみます。

また４行目は後ろ２つのセルを結合して「アマゾン周辺出身は陽気だね」

</head>
 <body>    
 	<table >
 		
 		<tr>
 			<th>インコの種類</th><th colspan="2">インコの特徴と原産地</th>
 		</tr>

 		<tr>	
 			<td class="color">セキセイインコ</td><td rowspan="2" colspan="2">オーストラリア出身はかわいいね</td>
 		</tr>

 		<tr>
 			<td class="color">オカメインコ</td>
 		</tr>
 		<tr>
 			<td class="color">シロハラインコ</td><td colspan="2">アマゾン周辺出身は陽気だね</td>
 		</tr>
 	</table>

ブラウザ表示は以下。