サイト内検索  

第6章:表を作ってみる

何かデータを示したいときは、長ったらしい文章で記述するよりも、表形式で示した方が理解しやすくなります。

ただし、誰しもが表を閲覧できるわけではありませんので、閲覧できない場合でもデータをわかりやすく示せるように配慮する必要があります。

表を作成する

ツールバーの表の挿入ボタンをクリックします。すると、次の画面が出てきます。


図1:表の挿入画面

今回は、3行3列の表を作ってみましょう。V9からは表にスタイルを適用することが可能となりましたが、今回は適用しないようにしますので、「表にスタイルを適用する」のチェックをはずしておきます。

そして、「最初の行を見出しセルにする」にチェックを入れます。


図2:表挿入後の状態

この時点でのテーブル部分のHTMLソースは以下のようになります。

<table border="1">
  <tbody>
    <tr>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
table要素
その範囲が表であることを示します。
tbody要素
表の本体部分です。
tr要素
1行分のセルを含みます。HTMLでは、先に行を設定して、その中に各セルが存在する形になります。
th要素
見出しセルです。
td要素
データセルです。

では、セルに入力を行います。

センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

と入力すると、th要素、td要素に入力した内容が入ります。HTMLソースでは以下のようになります。

<table border="1">
  <tbody>
    <tr>
      <th>センター名</th>
      <th>ゲーム数</th>
      <th>アベレージ</th>
    </tr>
    <tr>
      <td>ロードボウル</td>
      <td>30</td>
      <td>158.0</td>
    </tr>
    <tr>
      <td>イーグルボウル</td>
      <td>6</td>
      <td>135.5</td>
    </tr>
  </tbody>
</table>

行や列を追加したい

行を追加したい場合は、ツールバーの行追加をクリックします。すると、現在カーソルのある行の下に新しい行が追加されます。HTMLソースの上では、tr要素と列数分のtd要素が追加されます。
ボタン右の▼をクリックした場合は、現在カーソルのある行の上下どちらに何行追加するのかを選択することが出来ます。

列を追加したい場合は、ツールバーの列追加をクリックします。すると、現在カーソルのある右に新しい列が追加されます。HTMLソースの上では、各行ごとにtd要素が1つずつ追加されます。
ボタン右の▼をクリックした場合は、現在カーソルのある列の左右どちらに何列追加するのかを選択することが出来ます。

表題をつけてみる

表には表題もほしいですよね。表題をつけるには、table要素の属性変更画面を出します。


図3:table要素の属性変更画面

表題のところで、表示位置を選びます。選んだ部分に表題を入れるスペースが出来ます。上に表題を入れてみます。

FUMINGのボウリングアベレージ
センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

HTMLソースでは以下のようになります。caption要素が追加されました。

<table border="1">
  <caption>FUMINGのボウリングアベレージ</caption>
  <tbody>
    <tr>
      <th>センター名</th>
      <th>ゲーム数</th>
      <th>アベレージ</th>
    </tr>
    <tr>
      <td>ロードボウル</td>
      <td>30</td>
      <td>158.0</td>
    </tr>
    <tr>
      <td>イーグルボウル</td>
      <td>6</td>
      <td>135.5</td>
    </tr>
  </tbody>
</table>

CSSを適用してみる

V11以降ではではスタイルシートマネージャーで表に関するCSSを適用することが可能になりました。

先ほど作成した表の枠線を1本線で黒く縁取りたいとします。スタイルシートマネージャーを起動します。

「追加」ボタンをクリックした後、table要素を選択し、「テーブル」タブを選択します。

table要素へのテーブル表示方法指定画面

内罫線の表示方法を「collapse」を選択します。また、空白セルがある場合に備えて、「show」を選択します。

この時点でのCSSの内容は以下の通りです。

table{
  border-collapse : collapse;
  empty-cells : show;
}

次に、「レイアウト」タブを選択します。

スタイルの設定(レイアウト)画面

ボーダーのところで、幅、スタイル(実線)、色(黒)を選択します。幅指定で数値+単位を使う場合は、単位選択→数値入力の順で指定して下さい。

table{
  border-collapse : collapse;
  empty-cells : show;
 border-width : 1px 1px 1px 1px;
  border-style : solid solid solid solid;
  border-color : black black black black;
}
(表示の都合で一部折り返しています)
FUMINGのボウリングアベレージ
センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

この状態では、外枠だけにしか適用されませんので、td、th要素にもボーダーを指定します。CSSをシンプルに記述したパターンは、以下の通りです。

table{
  border-collapse : collapse;
  empty-cells : show;
  border : 1px solid black;
}
td,th{
  border : 1px solid black;
}
FUMINGのボウリングアベレージ
センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

表に関するCSSの説明

表題の表示位置

caption要素に対して指定します。特に指定がなければ、「上」として扱われます。

表の上に表題を挿入します。
CSSでの指定は、caption-side : top;
表の下に表題を挿入します。
CSSでの指定は、caption-side : bottom;

テーブルの表示方法

table要素に対して指定します。特に指定がなければ、「自動」として扱われます。

自動
テーブル全体のデータを読み込んでからその内容に応じて各縦列の幅を決定し表示します。
CSSでの指定は、table-layout : auto;
固定
最初の横1列のデータを読み込んだ段階で、各縦列の幅を決定して、データを1列ごとに表示します。ただし、table要素、td要素、th要素の幅をwidthプロパティで指定する必要があります。
CSSでの指定は、table-layout : fixed;

内罫線の表示方法

table要素に対して指定します。特に指定がなければcollapseとして扱われますが、その通りに解釈しないブラウザがあるため、指定してください。

collapse
テーブル周りのボーダーや各セルのボーダーを、その境界上に重ねて表示します。
CSSでの指定は、border-collapse : collapse;
separate
テーブル周りのボーダーと各セルのボーダーを別々に表示します。tr、col、colgroup要素に対しては、表示されません。table要素に背景が指定されている場合は、各セルのボーダーとボーダーの空間部分に適用されます。
CSSでの指定は、border-collapse : collapse;

collapseを指定し、セルのボーダー形式が異なる場合は優先順位があります。

  1. border-style : hideen;
  2. 幅の広いボーダーが優先
  3. 同じ幅のボーダーの場合は、ボーダーのスタイルを以下の優先順位で適用
    1. double
    2. solid
    3. dashed
    4. dotted
    5. ridge
    6. outset
    7. groove
    8. inset
  4. 幅、スタイルが同じで色が異なる場合は以下の優先順位で適用
    1. セル(td,th)
    2. tr
    3. col
    4. colgroup
    5. table

空白セルの枠線表示

table要素に対して指定します。特に指定がなければ、showとして扱われます。

show
空白セルの枠線表示を行います。
CSSでの指定は、empty-cells : show;
hide
空白セルの枠線表示を行いません。
CSSでの指定は、empty-cells : hide;

セル間隔

table要素に対して指定します。border-collapse : sepalateが指定されている場合のセルのボーダー間隔を指定します。

1つだけ指定した場合のCSSでの指定は、border-spacing : 5px;

垂直方向・水平方向別々に指定した場合のCSSでの指定は、border-spacing : 10px 5px;
最初の値が水平方向、2番目の値が垂直方向で指定した値になります。

表にスタイルを適用した場合はどうなる?

図1の画面で、スタイル(デザイン1-A)を適用し、最初の行を見出しにして、3×3の表を挿入した直後は、以下のようになります。

図4:スタイルを適用して表を挿入した直後の状態

各セルに内容を入力して、表題をつけてみます。

FUMINGのボウリングアベレージ
センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5

HTMLソースは、以下のようになります。各セルにclassが設定されていますね。table要素にはidも設定されています。

ただ、class属性、id属性いずれも、ホームページ・ビルダー製であることがわかる「HBP」「hbp」という文字列が入ってきます。

<table border="1" cellspacing="0" cellpadding="2" 
id="_HPB_TABLE_1_A_050105083206" class="hpb-cnt-tb1">
  <caption>FUMINGのボウリングアベレージ</caption>
  <tbody>
    <tr>
      <th class="hpb-cnt-tb-th1">センター名</th>
      <th class="hpb-cnt-tb-th1">ゲーム数</th>
      <th class="hpb-cnt-tb-th1">アベレージ</th>
    </tr>
    <tr>
      <td class="hpb-cnt-tb-cell1">ロードボウル</td>
      <td class="hpb-cnt-tb-cell2">30</td>
      <td class="hpb-cnt-tb-cell2">158.0</td>
    </tr>
    <tr>
      <td class="hpb-cnt-tb-cell1">イーグルボウル</td>
      <td class="hpb-cnt-tb-cell2">6</td>
      <td class="hpb-cnt-tb-cell2">135.5</td>
    </tr>
  </tbody>
</table>

(注:表示の都合で一部折り返しています)

表にスタイルを適用した場合、HTMLと同じフォルダに外部CSSファイルが作成されます。

HTML内では、<link rel="stylesheet" href="table.css" type="text/css" id="_HPB_TABLE_CSS_ID_">となります。

その上、table要素やlink要素のid属性の属性値の付け方が、HTMLの文法に反するものになっています。これはまずいです。

外部CSSファイルの内容は以下のようになります。

表を閲覧できない人への配慮

表を理解しないブラウザの場合、HTMLに記述してある順序で表示されていきます。table要素のsummary属性で表の構造を示しましょう。

V14以降では、表の属性を開いて、「要約」の部分にその内容を入力します。

V13以前では、summary属性は「属性の変更」画面から吐き出させることが出来ません。
HTMLソース編集画面もしくは、ドキュメントアウトライナから挿入します。

FUMINGのボウリングアベレージ
センター名 ゲーム数 アベレージ
ロードボウル 30 158.0
イーグルボウル 6 135.5
<table border="1" summary="FUMINGのボウリングアベレージを示した表。
センター名、ゲーム数、アベレージの順にデータが示されている。">
  <caption>FUMINGのボウリングアベレージ</caption>
  <tbody>
    <tr>
      <th>センター名</th>
      <th>ゲーム数</th>
      <th>アベレージ</th>
    </tr>
    <tr>
      <td>ロードボウル</td>
      <td>30</td>
      <td>158.0</td>
    </tr>
    <tr>
      <td>イーグルボウル</td>
      <td>6</td>
      <td>135.5</td>
    </tr>
  </tbody>
</table>

(注:表示の都合でsummary要素の部分折り返しています)

また、情報の構造を示すには、scape属性、header属性、axis属性を使用します。これらの属性も、HTMLソース編集画面で直接手打ちするか、ドキュメントアウトライナで挿入します。これらの属性に対応しているブラウザなら少しはわかりやすく伝わります。

実際の使い方については、The Web KANZAKI内の「セルの関係を示す属性」を参照して下さい。