Wikibooks

HTML/テーブル

< HTML
HTML > HTML/テーブル

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

作成方法 編集

テーブルを作成するには、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人
"https://ja.wikibooks.org/w/index.php?title=HTML/テーブル&oldid=238377" より作成