初心者のためのホームページ作り　第14号

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

今週＜第14号＞マガジンのおさらい
　　　　　　　　　　　　　　　　　  毎週金曜日配信　What's New 2002/8/16
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題■ テーブルの作成　その２

◆ テーブルの行（横列）のグループ化

先週は、縦列のグループ化を行いましたが、今度は横列をグループ化します。テーブルで表わすセルの横の行をグループ化して、読み手に分かりやすい表を形成できます。

テーブルの横列をグループ化させる要素には、

thead	表のヘッダ（見出し）に相当する横列のグループ化 表の一番上の表示されます。
tfoot	表のフッタに相当する横列のグループ化 表の一番下に表示されます。
tbody	表の本体にあたる部分の横列をグループ化します。 複数の横列を指定することが可能です。

実際の例をご覧ください。HTMLの実行結果は下のほうにあります。

＜スタイルシート＞
thead { background-color: #ccc }
tfoot { background-color: #ffc; font-weight: bold }

＜HTML＞
<table cellpadding="3" cellspacing="0" border="1" 
  summary="テーブルにおける行のグループ化のサンプルを表示します">
<colgroup><col span="3" width="120"></colgroup>

<thead>
<tr><th abbr="教科の科目を表わします">科目</th>
    <th abbr="テストの得点を表わします">得点</th>
    <th abbr="テストの平均点を表わします">平均点</th></tr>
</thead>

<tfoot align="center">
<tr><td>合計</td>
    <td>78点</td>
    <td>81点</td></tr>
</tfoot>

<tbody align="center">
<tr><td>国語</td>
    <td>85点</td>
    <td>88点</td></tr>

<tr><td>算数</td>
    <td>62点</td>
    <td>73点</td></tr>

<tr><td>理科</td>
    <td>70点</td>
    <td>75点</td></tr>

<tr><td>英語</td>
    <td>95点</td>
    <td>86点</td></tr>
</tbody>
</table>

＜実行結果＞

科目	得点	平均点
合計	78点	81点
国語	85点	88点
算数	62点	73点
理科	70点	75点
英語	95点	86点

このように横列をグループ化することにより、説得力のある見栄えの良い表が作成できます。縦列のグループ化と併用しながら全体のレイアウトを整えることができます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆セルを結合する
テーブルはセル単位で集まった表であることは先週解説しました。ひとつひ
とつのセルが縦と横に並べられたものです。
　ここで、セルを結合して表を作ってみましょう。

td要素内に次の属性を記述します。
横列のセルの結合　<td colspan="2">  横に２個のセルを結合する
縦列のセルの結合　<td rowspan="2">  縦に２個のセルを結合する

下記の実行結果のHTML文は今週のメールマガジン14号を参照してください。

＜サンプル＞

colspan="2" PNG画像 花の絵です

rowspan="2" PNG画像 花の絵です

セルを結合させる場合の注意点として、結合された列のセルの数の注意してください。既に結合されているにもかかわらず、セル数を変更していないとヘントコリンな表になってしまいます。

PageTop / Home / 目次