2017年 ウェブサイト作成講習会

• topページ
• 記録
• 参加者

テーブルを使った表の表示

１.table要素によるテーブル作成

Webページとして表形式でデータを表示するにはtable要素を使います。全体をでtable要素マークアップを行い、そのコンテンツとして、行tr要素、見出しセルth要素、セルtd要素等様々な要素を記述します。HTML5では枠線を表示するためのborder属性は廃止されたので、枠線はcssで指定します。3行3列の表の例（1行目 見出しセル）

<table>
  <tr>
    <th>見出しセルの内容</th>
    <th>見出しセルの内容</th>
    <th>見出しセルの内容</th>
  </tr>
  <tr>
    <td>セルの内容</td>
    <td>セルの内容</td>
    <td>セルの内容</td>
  </tr>
  <tr>
    <td>セルの内容</td>
    <td>セルの内容</td>
    <td>セルの内容</td>
  </tr>
</table>
    

CSS部分

<style type="text/css">
table,tr,td,th{
　border: 1px black solid; 
}
</style>		
    

下記により4行3列の表を作り、ファイル名「table.html」として「text」フォルダーに保存します。

大見出し：テーブルサンプル
1行目セル内容：部署名　計画　売上 (見出しセルとしてthタグで括ります)
2行目セル内容：本社　1,400　1,300
3行目セル内容：大阪支社　750　920
4行目セル内容：合計　2,150　2,220(1列目セルは見出しセルとしてthタグで括ります)

２．テーブルの幅の設定

テーブルの幅は自動的に決まりますが、テーブルの幅を指定したサイズに設定する場合はスタイルシートででピクセル又は親要素に対するパーセンテージで指定します。

<table style="width:幅;">

「table.html」をコピーし、表部分を4個コピペして、テーブルの幅を200px、300px、50%及び100%に設定してファイル名「table_size.html」として「text」フォルダーに保存します。

３．セルの幅と高さの設定

セルの幅は自動的に決まりますが、セルの幅を指定したサイズに設定する場合はスタイルシートでピクセルで指定します。セルの幅は親要素であるｔｒ要素（行）の幅に対するパーセンテージで指定することもできます。

<td style="width:幅;>

「table.html」をコピーし、次により編集しファイル名「table_cellsize.html」として「text」フォルダーに保存します。

1. タイトルとh1要素の内容を「セルの幅と高さの設定」に書き換えます。
2. 1行1列目のth要素に幅を120px、高さ50pxに設定します。
3. 4行1列目のth要素に5高さ50pxを設定します。

４．セルの結合

同じ行に含まれ横方向に続いているいるセルを連結するにはtd要素またはth要素のcolspan属性を使います。

<td colspan="結合するセル数">セル</td>

同じ列に含まれ縦方向に続いているいるセルを連結するにはtd要素またはth要素のrowspan属性を使います。

<td rowspan="結合するセル数">セル</td>

下記により新しいファイルを作成し、ファイル名「table_cellspan.html」として「text」フォルダーに保存します。

1. タイトルとh1要素の内容を「セルの結合」とします。
2. CSS部分に枠線のスタイルを指定します。
3. h2要素の内容を「結合なし」を記入します。
4. 2行3列の表を作成します。
   1行目：セル1-1、セル1-2、セル1-3
   2行目：セル2-1、セル2-2、セル2-3
   
5. h2要素の内容を「横方向に結合」を記入します。
6. 上の表をコピペして、下記により1行1列目のセルと1行2列目のセルを結合します。
   1行1列目のtdタグに「colspan="2"」を追記します。
   1行2列目のセルを削除します。
7. h2要素の内容を「縦方向に結合」を記入します。
8. 結合なしの表をコピペして、下記により1行2列目のセルと2行2列目のセルを結合します。
   1行2列目のtdタグに「rowspan="2"」を追記します。
   2行2列目のセルを削除します。
9. h2要素の内容を「結合サンプル」を記入します。
10. 7行2列の表を作成し、下記により2行1列目のセルから4行1列目の3セルを結合し、5行1列目のセルから7行1列目の3セルを結合します。
    1行目：作家　作品(見出しセルthタグで括ります)
    2行目：赤川次郎　赤いこうもり傘
    3行目：空白　探偵物語
    4行目：空白　三毛猫ホームズの推理
    5行目：星新一　エヌ氏の遊園地
    6行目：空白　午後の恐竜
    7行目：空白　おのぞみの結末
    2行1列目のtdタグに「rowspan="3"」を追記します。
    3行1列目のセルと4行1列目のセルを削除します。
    5行1列目のtdタグに「rowspan="3"」を追記します。
    6行1列目のセルと7行1列目のセルを削除します。
    

５．列をグループ化

colgroup要素を使って列をグループ化し、スタイルシートで横幅や背景色などの指定を行います。但し、表示位置に関する text-align や vertical-align を指定しても効きません。またspan属性の値にグループ化する列数を指定します。
colgroup要素はthead要素よりも前でcaption要素よりも後に記述します。colgroup要素では何列目からという指定がありませんので、先頭の列から順にcolgroup要素を使ってグループ化を行っていく必要があります。

<colgroup span="列数"></colgroup>
<colgroup span="列数"></colgroup>

下記により新しいファイルを作成し、ファイル名「table_colgroup.html」として「text」フォルダーに保存します。

列修飾の明細

列	グループ化 1	グループ化 2
1	セル幅　80px	背景色　#e0ffff
2	セル幅　100px	セル幅　80px
3	セル幅　100px	セル幅　80px
4	セル幅　60px	背景色　#ffebcd

1. タイトルとh1要素の内容を「列をグループ化」とします。
2. CSS部分に枠線のスタイルを指定します。
3. h2要素の内容を「元表」を記入します。
4. 3行4列の表を作ります。
   1行目：日付、男性、女性、合計
   2行目：1/1、80、45、125
   3行目：1/2、72、65、137
5. h2要素の内容を「グループ化 1」を記入します。
6. 上の表をコピペします。
7. colgroup要素を使って下記により、1列目：セル幅　80px、2列目と3列目：セル幅　100px、4列目：セル幅　60pxに設定します。
   tableタグの直下に下記を挿入します。
   <colgroup style="width:80px; "></colgroup>
   <colgroup span="2" style="width:100px; "></colgroup>
   <colgroup style="width:60px;" ></colgroup>
8. 同表の下にh2要素の内容を「グループ化 2」を記入します。
9. 元表をコピペします。
10. colgroup要素を使って下記により、1列目：背景色　#e0ffff、2列目と3列目：セル幅　80px、4列目：背景色　#ffebcdに設定します。
    tableタグの直下に下記を挿入します。
    <colgroup style="background-color:#e0ffff;"></colgroup>
    <colgroup span="2"style="width:80px; "></colgroup>
    <colgroup style="background-color:#ffebcd;"></colgroup>

６．複数の列をまとめて設定

前項colgroup要素でグループ化した列に対して同じ属性やスタイルをまとめて指定するためにcol要素が使用できます。col要素は、colgroup要素の中に配置します。colgroup要素にspan属性を持っている場合はcol要素を配置することができません。col要素は、colgroup要素と同様にspan属性を設定できます。また終了タグは必要ありません。

<colgroup>
  <col span="列数">
  <col span="列数">
</colgroup>

下記をファイル名「table_col.html」として「text」フォルダーに保存します。
3行4列の表を作りcolgroup要素とcol要素を使って下のとおり列を修飾します。
2列目：セル幅100px、背景色#e0ffff
3列目：セル幅100px、背景色#f0e68c
2列目：セル幅100px、背景色#e0ffff

1. タイトルとh1要素の内容を「複数の列をまとめて設定」とします。
2. CSS部分に枠線のスタイルを指定します。
3. h2要素の内容を「元表」を記入します。
4. 3行4列の表を作ります。
   1行目：日付、10代、20代、30代
   2行目：1/1、80、45、32
   3行目：1/2、72、65、28
   
5. h2要素の内容を「まとめて設定」を記入します。
6. 上の表をコピペします。
7. tableタグの直下に下記を挿入します。
   <colgroup></colgroup>
   <colgroup style="width: 100px;">
       <col style="background-color:#e0ffff; ">
       <col style="background-color:#f0e68c; ">
       <col style="background-color:#e0ffff; ">
   </colgroup>

7．セル内のデータ表示位置

セルの中でデータの位置は、スタイルシートで横方向の位置(左揃えや右揃えなど)と縦方向の位置(上寄せや下寄せなど)が設定できます。また設定が可能な要素としてはtd要素、th要素、tr要素、thead要素、tfoot要素、tbody要素、colgroup要素、col要素があります。
td要素の場合（他の要素の場合も同じ）

<td style="text-align:横位置;vertical-align:縦位置">

下記をファイル名「table_cellposition.html」として「text」フォルダーに保存します。
4行3列の表を作り、td要素、td要素とtr要素の組み合わせでセル内のデータ表示位置を指定します。

td要素で指定

1. タイトルとh1要素の内容を「セル内のデータ表示位置」とします。
2. CSS部分に前項までの罫線についての指定に加え、td{width: 100px;height: 70px;}を追記します。
3. h2要素の内容を「元表」を記入します。
4. 4行3列の表を作ります。
   1行目：1列、2列、3列(見出しセルthタグで括ります)
   2行目：左・上、左・中、左・下
   3行目：中・上、中・中、中・下
   4行目：右・上、右・中、右・下
5. h2要素の内容を「td要素で指定」を記入します。
6. 上の表をコピペします。
7. 各td要素に下表のスタイルを指定します。

	1列	2列	3列
2行	vertical-align: top;	指定無し	vertical-align: bottom;
3行	text-align: center; vertical-align: top;	text-align: center;	text-align: center; vertical-align: bottom;
4行	text-align: right; vertical-align: top;	text-align: right;	text-align: right; vertical-align: bottom;

8. h2要素の内容を「tr要素とtd要素の組み合わせで指定」を記入します。
9. 元表をコピペします。
10. 各trタグに下記スタイルを指定します。
    2行目のtr：指定無し
    3行目のtr：text-align: center;
    4行目のtr：text-align: right;
11. 各ｔｄタグに下表のスタイルを指定します。
    1列目のtd:vertical-align:top;
    2列目のtd:指定無し
    3列目のtd:vertical-align:bottom;
    

8．テーブルの見出しと概要

テーブルの見出し

テーブルに見出しを付ける場合はcaption要素を使います。caption要素を記述する場合はtableタグのすぐ次に記述してます。 見出しはデフォルトではテーブルの上に表示されますが、表示位置を変更する場合はスタイルシートのcaption-sideプロパティで指定します。（HTML5ではcaption要素のalign属性廃止されました。 ）

HTML

<table>
<caption>見出し</caption>
...
</table>

CSS

caption-side:top; (キャプションを表の上に表示　省略すると一般的なブラウザでは、表の上部に表示されます)
caption-side:bottom;　(キャプションを表の下に表示）

テーブルの概要

テーブルが何について書かれたものであるのかを説明したテーブルの概要を記述することもできます。テーブルの概要はtable要素のsummary属性で指定します。ここで設定した概要は音声ブラウザなどの環境で使用されるものであるため、概要を設定した場合でもブラウザ上では何も表示はされません。

<table  summary="概要">
...
</table>

作成手順

下記をファイル名「table_caption.html」として「text」フォルダーに保存します。

1. CSS部分に枠線のスタイルを指定します。
2. 大見出し：テーブルの見出し
3. 中見出し：見出しを表の上に表示
4. 下記により4行3列の表を作成します。
   　1行目セル内容：部署名　計画　売上 (見出しセルとしてthタグで括ります)
   　2行目セル内容：本社　1,400　1,300
   　3行目セル内容：大阪支社　750　920
   　4行目セル内容：合計　2,150　2,220(1列目セルは見出しセルとしてthタグで括ります)
5. 表の幅を300pxに設定します。
6. 中見出し：見出しを表の下に表示
7. 上記の表をコピペします。
8. 上の表のtableタグの直下に「<caption style="caption-side:top ;">2008年計画・実績表</caption>」と入力します。
9. 下の表のtableタグの直下に「<caption style="caption-side:bottom;">2008年計画・実績表</caption>」と入力します。

Copyright c 2017 Pasobora Network Hodogaya All Rights Reserved.