たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ホームページ作成講座　　　STEP8　テーブル（表）


メニュー

▲STEP7 ▼STEP9

テーブル（表）を作成します

■STEP8　　テーブル（表）

テーブル（表）についてです。

関連
■エクセルファイルからHTMLコードを作成する

★テーブルの基本

テーブルは、<table>タグを用い <table>はテーブル（表）を作成するタグです。 テーブル（表）の基本は、<table>〜</table>。 その内に表の横一行を<tr>〜</tr>で定義します。 さらにそのにセル（<td>〜</td>）を定義します。

<table> 〜 </table>・・・テーブル
　　<tr> 〜 </tr>・・・１行
　　　　<td> 〜 </td>・・・セル

table要素のborder属性は線の太さです。この属性を記述しないときは枠線が描かれません。 または、0を指定すると枠線が描かれません。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用います。
また、borderはスタイルシートに入れると若干意味が違い、表示も変わってしまいますので注意してください。 これについては、別途詳細を記述する予定です。

border・・・線の太さ

ソースコード（HTML)

<table border= "1">
<tr>
<td>ホームページ作成講座</td><td>タイトル</td>
</tr>
<tr>
<td>STEP 1</td><td>HTMLファイルとCSSファイル</td>
</tr>
<tr>
<td>STEP 2</td><td>見出し</td>
</tr>
</table>


表示
ホームページ作成講座タイトル
STEP 1HTMLファイルとCSSファイル
STEP 2見出し

このページのトップ

★ヘッダセルとデータセル

セルは、<td>〜</td>のほかに、 見出しを定義するヘッダセル（<th>〜</th>）を使用することができます。
<td>〜</td>セルはヘッダセルに対して、データを定義するデータセルといいます。 ヘッダセル内のテキストは、一般的なブラウザでは太字でセンタリングされて表示されます。

<th> 〜 </th>・・・ヘッダセル
<td> 〜 </td>・・・データセル

ソースコード（HTML)

<table border= "1">
<tr>
<th>ホームページ作成講座</th><th>タイトル</th>
</tr>
<tr>
<th>STEP 1</th><td>HTMLファイルとCSSファイル</td>
</tr>
<tr>
<th>STEP 2</th><td>見出し</td>
</tr>
</table>


表示
ホームページ作成講座タイトル
STEP 1HTMLファイルとCSSファイル
STEP 2見出し

味気ないので、色をつけてみましょう。スタイルシートを使用します。

ソースコード（CSS)

table.sample1 {
border-collapse: collapse;
}
table.sample1 th {
background-color: #FFFF99;
color: blue;
}
table.sample1 td {
background-color: #CCFF99;
}


border-collapseプロパティはセルボーダーを重ねて表示するか間隔をあけるかを指定します。

collapse・・・隣接するセルボーダーを重ねて表示
separate・・・隣接するセルボーダーを間隔をあけて表示（IE８、９ではデフォルト）
　　セルボーダー間隔はborder-spacingプロパティで指定します（IE８、９ではデフォルト2px）

background-colorプロパティでバックグラウンドの色、colorプロパティで文字の色を指定しました。


ソースコード（HTML)

<table border= "1" class= "sample1" >
<tr>
<th>ホームページ作成講座</th><th>タイトル</th>
</tr>
<tr>
<th>STEP 1</th><td>HTMLファイルとCSSファイル</td>
</tr>
<tr>
<th>STEP 2</th><td>見出し</td>
</tr>
</table>


表示
ホームページ作成講座タイトル
STEP 1HTMLファイルとCSSファイル
STEP 2見出し

このページのトップ

★ヘッダ、ボディとフッタ

テーブルの行を、ヘッダ、フッタ、ボディに分けることができます。 これによってヘッダとフッタを固定したまま、ボディのみをスクロールすることが可能ですが、対応ブラウザは少ないようです。
それよりは、スタイルシートを適用するために使用することのほうが多いのではないでしょうか。

<thead>・・・ヘッダ
<tbody>・・・ボディ
<tfoot>・・・フッタ

ヘッダとフッタを先読みして表示するために、<tbody> よりも <tfoot> の方を先に記述しなくてはなりません。 そのため、対応していないブラウザでは実際の表示順序が<tbody> と <tfoot>が逆になることに注意が必要です。

ソースコード（CSS)

table.sample1 {
border-collapse: collapse;
}
table.sample1 th {
background-color: #FFFF99;
color: blue;
}
table.sample1 td {
background-color: #CCFF99;
}
table.sample1 thead th {
background-color: #13039C;
color: white;
}
table.sample1 tfoot th, tfoot td {
background-color: #999999;
}


ソースコード（HTML)

<table border= "1" class= "sample1" >
<thead>
<tr>
<th>ホームページ作成講座</th><th>タイトル</th>
</tr>
</thead>
<tfoot>
<tr>
<th>STEP 3〜</th><td>ホームページを参照</td>
</tr>
</tfoot>
<body>
<tr>
<th>STEP 1</th><td>HTMLファイルとCSSファイル</td>
</tr>
<tr>
<th>STEP 2</th><td>見出し</td>
</tr>
</body>
</table>


表示
ホームページ作成講座タイトル
STEP 3〜ホームページを参照
STEP 1HTMLファイルとCSSファイル
STEP 2見出し

このページのトップ

★テーブルの見出し

テーブルの見出しは、<caption>タグを使います。

<caption>・・・テーブルの見出し

ソースコード（HTML)

<table border= "1" class= "sample1" >
<caption>ホームページ作成講座</captionh>
<thead>
<tr>
<th>ステップ</th><th>タイトル</th>
</tr>
</thead>
<tfoot>
<tr>
<th>STEP 3〜</th><td>ホームページを参照</td>
</tr>
</tfoot>
<body>
<tr>
<th>STEP 1</th><td>HTMLファイルとCSSファイル</td>
</tr>
<tr>
<th>STEP 2</th><td>見出し</td>
</tr>
</body>
</table>


表示
ホームページ作成講座
ステップタイトル
STEP 3〜ホームページを参照
STEP 1HTMLファイルとCSSファイル
STEP 2見出し

このページのトップ

★テーブルの表示位置と幅

表の幅はwidth属性、位置（横）はalign属性で中央表示/左端表示/右端表示ができます。
縦の位置はvalign属性で指定します。
これらは、セル単位での指定も可能です。

width・・・表の幅
align・・・テーブルの位置（横）
　　　　center：中央表示
　　　　left：左端表示
　　　　right：右端表示
valign・・・テーブルの位置（縦）
　　　　middle：中央表示
　　　　top：上揃え
　　　　bottom：下揃え

ソースコード（HTML)

<table border= "1" width= "400" align= "center" class= "sample1" >
<caption>ホームページ作成講座</captionh>
<thead>
<tr>
<th>ステップ</th><th>タイトル</th>
</tr>
</thead>
<tfoot>
<tr>
<th>STEP 3〜</th><td>ホームページを参照</td>
</tr>
</tfoot>
<body>
<tr>
<th>STEP 1</th><td>HTMLファイルとCSSファイル</td>
</tr>
<tr>
<th>STEP 2</th><td>見出し</td>
</tr>
</body>
</table>


表示
ホームページ作成講座
ステップタイトル
STEP 3〜ホームページを参照
STEP 1HTMLファイルとCSSファイル
STEP 2見出し

このページのトップ

★セルの表示位置と幅と余白

セルの幅はwidth属性、横の位置はalign属性、縦の位置はvalign属性で指定できますが、 スタイルシートで指定したほうが良いでしょう。

width・・・セルの幅
　　　%、em、exやpxなどの単位で指定
height・・・セルの高さ
text-align・・・横方向の揃え位置
　　　　center：中央表示
　　　　left：左端表示
　　　　right：右端表示
vertical-align・・・縦方向の揃え位置
　　　　baseline：ベースライン
　　　　top：上揃え
　　　　bottom：下揃え

paddingプロパティを使って、余白の調整もできます。


ソースコード（CSS)　追加分

table.sample2 th {
width: 120px;
text-align: center;
vertical-align: babaseline;
}
table.sample2 td {
height: 30px;
padding-left: 20px;
}


ソースコード（HTML)

<table border= "1" width= "400" align= "center" class= "sample1 sample2" >
<caption>ホームページ作成講座</captionh>
<thead>
<tr>
<th>ステップ</th><th>タイトル</th>
</tr>
</thead>
<tfoot>
<tr>
<th>STEP 3〜</th><td>ホームページを参照</td>
</tr>
</tfoot>
<body>
<tr>
<th>STEP 1</th><td>HTMLファイルとCSSファイル</td>
</tr>
<tr>
<th>STEP 2</th><td>見出し</td>
</tr>
</body>
</table>


表示
ホームページ作成講座
ステップタイトル
STEP 3〜ホームページを参照
STEP 1HTMLファイルとCSSファイル
STEP 2見出し

このページのトップ

★セルの結合

colspan属性 rowspan属性を使って結合セル数を指定することにより、 横方向・縦方向のセルの結合ができます。

colspan・・・横方向に連結
rowspan・・・縦方向に連結

ソースコード（HTML)

<table border= "1" width= "500" align= "center" class= "sample1" >
<caption>ホームページ作成講座</captionh>
<thead>
<tr>
<th>ステップ</th><th>タイトル</th><th>タイトル２</th>
</tr>
</thead>
<tfoot>
<tr>
<th>STEP 3〜</th><td>ホームページを参照</td><td>左に同じ</td>
</tr>
</tfoot>
<body>
<tr>
<th rowspan= 2 >STEP 1、２</th><td colspan= 2 >HTMLファイルとCSSファイル</td>
</tr>
<tr>
<td>見出し</td><td>見出し２</td>
</tr>
</body>
</table>


表示
ホームページ作成講座
ステップタイトルタイトル２
STEP 3〜ホームページを参照左に同じ
STEP 1、２HTMLファイルとCSSファイル
見出し見出し２

属性とスタイルシートの対応については、ACQUA MINERALEさんの tableの属性とスタイルシートの対応表を参照してください。

▼STEP9へ

このページのトップ

Wixでホームページ作成

Copyright (C) 2012 たまちゃん All rights reserved
http://tamachan.tama777.com/