Home ＜ 第12号 ＞ 第14号

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

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第10号
第11号  第12号  目次
プレーンテキスト版バックナンバー

今週＜第13号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　   毎週金曜日配信　What's New 2002/8/9
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題■ テーブルの作成　その１

■ テーブルとは何か？
テーブルとはセルという単位で縦と横に並んで集まった表のことです。

テーブルの見本
セル１セル２セル３セル４
セル５セル６セル７セル８
セル９セル10セル11セル12

このようにセルの集まりです。このテーブルを使うことによって、一覧表を作成したり、レイアウト構成を作ったりできるのです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆簡単なテーブルの作成

<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>テーブルの作成</title>
</head>

<body>
<table>
<caption>HTMLタグの概要</caption>
<tr><th>要素名</th>
    <th>語源</th>
    <th>機能</th></tr>

<tr><td>P</td>
    <td>Paragraph</td>
    <td>段落を表す</td></tr>

<tr><td>H1〜H6</td>
    <td>Headline</td>
    <td>見出しを表す</td></tr>

<tr><td>BR</td>
    <td>line BReak</td>
    <td>強制改行</td></tr>

<tr><td>A</td>
    <td>Anchor</td>
    <td>アンカーを表す</td></tr>
</table>

</body>
</html>

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
上記HTMLの実行結果は下記の通りとなります。
HTMLタグの概要
要素名語源 機能
PParagraph段落を表す
H1〜H6Headline見出しを表す
BRline BReak強制改行
AAnchorアンカーを表す
なんだか窮屈で、表としてあまり見栄えが良いとはいえません。通常、テーブルでのデフォルト（初期設定）では、枠線がありません。そこで枠線を設定してみましょう。枠線の設定はborder属性を使います。上記のテーブルに１ピクセルの枠線を設定します。

記述法は、

<table border="1"> です。

HTMLタグの概要
要素名 語源機能
PParagraph段落を表す
H1〜H6Headline見出しを表す
BRline BReak強制改行
AAnchorアンカーを表す

なお、枠線表示には、border属性のほかに、frame、rules属性があり、どちらもtable要素内に記述します。

above上の枠線のみ表示
below下の枠線のみ
hside上下の枠線のみ
lhs左の枠線のみ
rhs右の枠線のみ
vside左右の枠線のみ
box上下左右を表示
border上下左右を表示
void 外枠の枠線表示なし
groups thead、tbody、tfoot、colgroup
各要素の境界線のみ表示
rows横列の境界線のみ表示
cols縦列の境界線のみ表示
allすべての境界線を表示
none枠線表示なし

Sample  詳しい表示サンプルを用意してあります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆余白の設定・・cellpadding、cellspacing属性について
上記テーブルでは、隣り合ったセルがくっつきすぎて読みにくい面があります。
そうしたセル間のスペースを設ける属性として、cellpadding、cellspacing属性
があります。

cellpadding　 セル内の余白を設定する属性で、ピクセル単位で指定します。

cellspacing　 セルとセルの間に余白を設ける属性で、やはりピクセル単位で指
              定します。私はほとんど "0"にして使っています。特に枠線を表
　　　　　　　示させたときに、"0" 以外ですとちょっと体裁悪いです。

通常、何も設定しない場合は、ブラウザのデフォルトでスペースがあります。
　どれくらいのスペースを持っているかは、ブラウザにより異なります。そこで
この属性を使って、自分の望む余白、スペースを設定することをお奨めします。

（サンプル）
　<table cellpadding="5" cellspacing="0" border="1">

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
セル内に余白をつけるのとセル間に余白をつけるのではどのように違うでしょうか？下記のテーブルの余白の違いを見てください。
cellpadding="5"
cellspacing="0"
要素名 語源 機能
PParagraph段落を表す
H1〜H6Headline見出しを表す
BRline BReak強制改行
AAnchorアンカーを表す
cellpadding="0"
cellspacing="5"
要素名 語源機能
PParagraph段落を表す
H1〜H6Headline見出しを表す
BRline BReak強制改行
AAnchorアンカーを表す
両者の違いを覚えて、自分なりのテーブルを作るときに余白の設定を考えてください。当サイトではほとんど左側の cellpadding に余白設定を行い、cellspacing="0" としています。 
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆縦列のグループ化・・colgroup、col要素について
縦列をグループ化してしまう要素として、colgroup、col要素を使います。

　通常セルの横幅は、ブラウザが勝手に判断して設定してしまいます。すると予
期せずに長すぎたり短すぎたりと、みっともない表示になってしまうことが多々
あります。こんなときにはグループ化し、その中で横幅を設定します。
colgroup、col 属性はテーブルのセルの幅を任意に設定します。これによって制作者が望むセル幅が表示できます。下記のHTML文を参照してください。 
<table border="1" cellpadding="5" cellspacing="0">
<caption>HTMLタグの概要</caption>
<colgroup>
<col width="100" align="center">
<col width="150">
<col width="200">
</colgroup>
<tr><th>要素名</th>
    <th>語源</th>
    <th>機能</th></tr>

<tr><td>P</td>
    <td>Paragraph</td>
    <td>段落を表す</td></tr>

<tr><td>H1〜H6</td>
    <td>Headline</td>
    <td>見出しを表す</td></tr>

<tr><td>BR</td>
    <td>line BReak</td>
    <td>強制改行</td></tr>

<tr><td>A</td>
    <td>Anchor</td>
    <td>アンカーを表す</td></tr>
</table>

</body>
</html>
実行結果はこうなります。
HTMLタグの概要
要素名語源 機能
PParagraph段落を表す
H1〜H6Headline見出しを表す
BRline BReak強制改行
AAnchorアンカーを表す

これまでのテーブルよりずっと見やすい表になりました。

■ テーブルの特性
テーブルは、一般的にすべてのデータを読み込みが終わらないとブラウザに表示されないといわれています。（最近のブラウザでは読み込み中でも表示する場合があります。）あまり大きなテーブルを作ると表示までに時間がかかり、訪問者をイラつかせたりしますので注意しましょう。

また、視覚障害者の使っている「音声ブラウザ」では、テーブルを読み上げるのは、横列から始まりますが、正しい情報を伝えるのは大変難しいようです。テーブルに頼ったページではそのことを考慮して、読み上げ順を意識した構造を作るようにしましょう。

PageTop / Home / 目次
Copyright(C) 2002-2003 banban@scollabo.com