HTML/テーブル

HTML > HTML/テーブル

テーブル（表）とは、本文中のデータを表として見やすく表示するための機能。

非推奨

tableタグはHTML5以降では非推奨になっているが、日本の大手サイトでも使われているのが現状である。例えば 東京大学の沿革 や 京都大学の沿革のwebサイトなどもソースを見れば table タグがある（※ 2023年9月23日に確認）。これらの大学にはもちろん、情報科学・情報工学系の学科もある。

ネット上でtableタグを使わないように能書き・説教を垂れる人よりもどう考えても東大・京大のほうが頭がいいわけで・・・。

作成方法

テーブルを作成するには、table, thead, tbody, tfoot, td, tr, th, tdの8つの要素を用いる。

テーブルの基本的な構造

1. table要素で、テーブルを作成することを明示する。
2. thead要素でテーブルのヘッダ部を示す。ひとつのテーブル内にひとつしか記述できないが、ヘッダがない場合は省略可能。
3. tbody要素でテーブルの本体部分を示す。しばし省略されるが、正式なHTMLには必要。
4. tfoot要素でテーブルのフッタ部を示し、これに囲まれた内容は必ずテーブルのフッタ部に表示される。ひとつのテーブル内にひとつしか記述できない。フッタがない場合は省略可能。tbody要素よりも前に配置するが、未対応ブラウザでは無視され本体部よりも前に表示されてしまう。
5. tr要素で、テーブルの行（横一列）を作成する。
6. th要素で、見出し用のセル（ます目）を作成する。
7. td要素で、データ表示用のセルを作成し、内容を記述する。

記述例

<table>

    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>男子</th>
            <th>女子</th>
        </tr>
    </thead>
    
    <tfoot>
        <th>合計</th>
        <td>14人</td>
        <td>15人</td>
    </tfoot>
    
    <tbody>
        <tr>
            <th>綱引き</th>
            <td>10人</td>
            <td>12人</td>
        </tr>
        <tr>
            <th>徒競走</th>
            <td>4人</td>
            <td>3人</td>
        </tr>
    </tbody>
    
</table>

表示例

	男子	女子
綱引き	10人	12人
徒競走	4人	3人
合計	14人	15人

この様な具合になる。

属性

ここで紹介した各要素にも他の要素と同じように属性が存在する。属性の記述方法についてはHTML入門を参照。また、CSSを使った表の位置や大きさ、色などの装飾的な事項に関しては、CSS/テーブルを参照にするとよい。

table要素

テーブルの外枠や空白

border

表の外枠の太さを設定。この属性を抜かした場合外枠が表示されない。

bgcolor

テーブル全体の背景色を指定する。同時に背景が設定されていた場合、背景画像が表示できないときにこの設定が反映される。

background

テーブル全体の背景画像として表示するファイルを指定する。

bordercolor

枠線の色を指定する属性だが、ブラウザによってレイアウトが微妙に異なるほか、Operaなど未対応環境もあるので使用は好ましくない。CSSを利用しよう。

width,height

テーブルの大きさを指定する。一般的なブラウザでサポートされているが、標準的なHTMLの仕様上ではtable属性にheight属性は指定できない。高さを指定する場合はth属性やtd属性に指定を行うと良い。

table属性に具体値でwidthを指定し、その上で全てのth,td属性に具体値でwidth指定を行うと、ブラウザによってどちらかが優先されてしまい環境によって表示に差異の生じるケースがある。

align

テキストの回り込みを指定。leftで左に、rightで右にテキストを回りこませることが出来る。また、centerを指定することでテーブルをセンタリングできる。

frame

外枠の表示方式を設定。属性値として指定可能な値はvoid（枠なし・デフォルト値）、above（上のみ）、below（下のみ）、lhs（左のみ）、rhs（右のみ）、hsides（上下のみ）、vsides（左右のみ）、border（上下左右）の9通り。

rules

セルを区切る枠線の表示形式を指定。属性値として指定可能な値はnone（なし・デフォルト値）、rows（縦列の境界のみ）、cols（横列の境界のみ）、groups（thead, tbody, tfoot, col, colgroupの各要素の境界のみ）、all（全ての境界）の5通り。

cellcpacing

セル同士の間隔を指定。セルと外枠の間隔も同様の間隔になる。

cellspacing

セルとコンテンツの間隔を指定する。

tr要素

bgcolor

横一列の背景色をまとめて設定できる。同時に背景画像が設定されていた場合はtable要素同様画像優先。

background

背景画像を横一列まとめて指定する。

th要素とtd要素

bgcolor

セルの背景色を指定。tr要素に指定すれば横一列、th要素やtd要素に指定すれば個別のセルに背景色を設定できる。同時に背景が設定されていた場合は、背景画像が表示できないときにこの設定が反映される。

background

背景画像の指定。bgcolor要素と同様にtr要素で横一列、th要素・td要素で個別セルに背景を設定できる。

colspan,rowspan

colspanで横方向に、rowspanで縦方向に指定した数値だけセルを連結する。セルを連結した場合、ソース上では同じ方向に来る次のセルを指定する必要がない。

align

align属性をth要素やtd要素に指定した場合セル内でのテキストの行揃えを設定する。leftで左、centerで中央、rightで右、justifyで均等割り付け。

valign

テーブルのセル内で縦方向のテキスト位置を指定する。topで上、middleで中央、bottomで下。

記述例と表示例

<table border="3">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>男子</th>
            <th>女子</th>
        </tr>
    </thead>
    <tfoot>
        <th>合計</th>
        <td>14人</td>
        <td>15人</td>
    </tfoot>
    <tbody>
        <tr>
            <th>綱引き</th>
            <td colspan="2" align="center">22人</td>
        </tr>
        <tr>
            <th>徒競走</th>
            <td>4人</td>
            <td>3人</td>
        </tr>
        <tr>
            <th rowspan="2">障害物リレー The サバイバル</th>
            <td>2人（第一回）</td>
            <td>2人（第一回）</td>
        </tr>
        <tr>
            <td>3人（第二回）</td>
            <td>3人（第二回）</td>
        </tr>
        <tr>
            <th>ダンス 曲目：ウィキペたんのテーマ</th>
            <td colspan="2" align="center">38人</td>
        </tr>
    </tbody>
</table>

	男子	女子
綱引き	22人
徒競走	4人	3人
障害物リレー The サバイバル	2人（第一回）	2人（第一回）
	3人（第二回）	3人（第二回）
ダンス（曲目：ウィキペたんのテーマ）	38人
合計	14人	15人