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

Web作成支援

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

今週<第14号>マガジンのおさらい
                   毎週金曜日配信 What's New 2002/8/16
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■ テーブルの作成 その2
テーブルの行(横列)のグループ化
先週は、縦列のグループ化を行いましたが、今度は横列をグループ化します。テーブルで表わすセルの横の行をグループ化して、読み手に分かりやすい表を形成できます。
テーブルの横列をグループ化させる要素には、
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">  横に2個のセルを結合する
縦列のセルの結合 <td rowspan="2">  縦に2個のセルを結合する

下記の実行結果のHTML文は今週のメールマガジン14号を参照してください。
<サンプル>
colspan="2"
花の絵
PNG画像花の絵です
rowspan="2"
花の絵 PNG画像
花の絵です
セルを結合させる場合の注意点として、結合された列のセルの数の注意してください。既に結合されているにもかかわらず、セル数を変更していないとヘントコリンな表になってしまいます。


Copyright(C) 2002-2003 banban@scollabo.com