7.4 テーブル・セルのサイズを指定する
テーブルやセルのサイズは、自由に指定することができます。サイズの指定は、ピクセル数で指定する方法と画面に対する比率で指定する方法の2通りがあります。
1. テーブルのサイズをピクセル数で指定する
<table>タグにwidth属性（幅）を追加してピクセル数を指定すると、テーブルのサイズを指定することができます。
早速、幅400ピクセルのテーブルを作成してみます。
新しくテキストエディタを開いて、[table4_1.html]と[table4_1.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_1.html]と[table4_1.css]に以下のソースコードを記述してください。
①ソース・フォルダー ：webpage/ch07
②ファイル名 ：table4_1.html、table4_1.css
➢ table4_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_1.css">
<title>テーブルのサイズ</title>
</head>
<body>
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
➢ table4_1.css
@charset "UTF-8";
table {
border: 1px solid gray;
width: 400px;
height: 100px;
}
td {
border: 1px solid gray;
}
ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。
図 7.4.1
幅400ピクセル、高さ100ピクセルのテーブルができました。このようにピクセル数を指定して、テーブルのサイズを指定することができます。
2. テーブルのサイズを比率指定する
テーブルのサイズは、パーセントで指定することも可能です。widthプロパティやheightプロパティにパーセントを指定すると、表示画面（ブラウザ画面）に対する指定比率で表示されます。
では、表示されるブラウザ画面に対して、幅70%、高さ80%のサイズのテーブルを作成します。
新しくテキストエディタを開いて、[table4_2.html]と[table4_2.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_2.html]と[table4_2.css]に以下のソースコードを記述してください。
①ソース・フォルダー ：webpage/ch07
②ファイル名 ：table4_2.html、table4_2.css
➢ table4_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_2.css">
<title>テーブルのサイズ</title>
</head>
<body>
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
➢ table4_2.css
@charset "UTF-8";
html,
body {
height: 100%;
}
table {
border: 1px solid gray;
width: 70%;
height: 80%;
}
td {
border: 1px solid gray;
}
ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。
図 7.4.2
テーブルサイズの比率指定(%)では、ブラウザ画面に対して指定した比率で表示されますが、ブラウザによっては、横幅は比率通りに表示されても、高さは指定通りに表示されないことがありますので、注意してください。
3. セルのサイズをピクセル数で指定をする
テーブルだけでなく、セルの幅や高さもテーブルと同じように指定することができます。<td>タグにwidthプロパティ・heightプロパティを追加して、ピクセル数を指定し、セルのサイズを指定していきましょう。
新しくテキストエディタを開いて、[table4_3.html]と[table4_3.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_3.html]と[table4_3.css]に以下のソースコードを記述してください。
①ソース・フォルダー ：webpage/ch07
②ファイル名 ：table4_3.html、table4_3.css
➢ table4_3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_3.css">
<title>セルのサイズ</title>
</head>
<body>
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
➢ table4_3.css
@charset "UTF-8";
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
width: 200px;
height: 100px;
}
ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。
図 7.4.3
A1のセルが、指定されたピクセル数で設定されました。A1のセル以外のセルの大きさは、行や列の中で最大のセルに合わせて設定されますので、サイズの設定されていないA2のセルの縦幅やB1のセルの横幅のサイズも自動調整されました。
4. セルのサイズを比率指定する
続いて、セルのサイズをパーセントで指定してみましょう。<td>タグのwidthプロパティ・heightプロパティにパーセントを指定すると、テーブルに対する指定比率で表示されます。
新しくテキストエディタを開いて、[table4_4.html]と[table4_4.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_4.html]と[table4_4.css]に以下のソースコードを記述してください。
①ソース・フォルダー ：webpage/ch07
②ファイル名 ：table4_4.html、table4_4.css
➢ table4_4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_4.css">
<title>セルのサイズ</title>
</head>
<body>
<table>
<tr>
<td class="td-first">A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
➢ table4_4.css
@charset "UTF-8";
table {
border: 1px solid gray;
width: 400px;
height: 200px;
}
td {
border: 1px solid gray;
}
td.td-first {
width: 70%;
height: 60%;
}
ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。
図 7.4.4
A1のセルが、指定されたピクセル数で設定されました。セルのあるテーブルに対して、幅70%、高さ60%のサイズになっています。
A1のセル以外のセルの大きさは、行や列の中で最大のセルに合わせて設定されますので、サイズの設定されていないA2のセルの高さやB1のセルの幅のサイズも自動調整されました。
◉border-collapseプロパティ
border-collapseはテーブルのスタイルに固有のプロパティです。<th>、<td>のセルごとにボーダーを引くか、隣り合うボーダーを1本にまとめるか、どちらかを決めるプロパティです。値は collapseかseparateで、このプロパティを指定しない場合は、デフォルトでseparateが適用されます。collapseにすると、隣り合うボーダーは1本にまとまります。
◉Google Chromeデベロッパーツール
HTMLとCSSのコーディングが完了したあとで、「意図したスタイルが反映されていない」という不具合を修正することや、「やっぱりフォントサイズをもう少し大きくしたい」、「下の余白をもっと小さくしたい」などのレイアウト修正を行うことはよくあります。そのようなとき、Google Chromeデベロッパーツール（以下、デベロッパーツール）を使うと、リアルタイムでページの修正を試すことができます。
デベロッパーツールを起動するには、GoogleChromeを起動して、F12キーを押すか、ページ上で右クリックして「要素の検証」をクリックします。また、ページの変更したい箇所を選択したまま、「要素の検証」を選ぶと、デベロッパーツールの「Elements」パネルで該当箇所がハイライトされ、適用されているCSSが把握できます。また、「Elements」パネルの状態でルーペアイコンを選び、ページ上の要素をクリックしても、同様に該当箇所がハイライトされます。
7.4で作成したページを使って、ページを修正する方法を見てみましょう。
A1を選択した状態で「要素の検証」を選ぶと、デベロッパーツールが起動します。
Elementsパネルで、該当箇所の<td>タグの部分がハイライトされ、サイドバー（①）で適用されているCSSの情報が確認できます。DOMエレメントツリー（②）では、ブラウザ部分で表示中のHTML要素をツリー形式で表示されます。また、現在表示している要素の階層はパンくずリスト（③）に表示されます。
「最初の<td>タグの背景を薄い青色にして、文字サイズをもっと大きくしてほしい」という修正依頼があったと想定してみましょう。
CSSファイルを変更する前に、デベロッパーツール上でCSSを追加して、リアルタイムで編集を行って修正を試してみます。対象の要素がアクティブになった状態で、サイドバーの適用されているCSSの余白をクリックすると、CSSが追加できるようになります。
ここで、背景色を薄い青色にするために、「background-color:#b2d8ff」を追加すると、リアルタイムでA1の背景の色が変更されます。
リアルタイムでの変更を試すだけでなく、デベロッパーツールを使えば、CSSやHTMLの記述ミスを見つける手掛かりにもなります。
たとえば、CSSの記述を記載したにもかかわらず、サイドバーに記述した内容が表示されない場合は、クラス名や記述に間違いがあることを示しています。その場合には、デベロッパーツールを使ってソースコードを見直して、修正を行いましょう。