ドットインストール HTML入門7

表の作成

まず表を作ることを<table>タグで示し内部に見出しを表す<thead>と<tbody>を用意する。

<table>
    <thead>
        <tr><th>name</th><th>2010</th><th>2011</th></tr>
    </thead>
    <tbody>
        <tr><td>@taguchi</td><td>200</td><td>210</td></tr>
        <tr><td>@fkoji</td><td>300</td><td>420</td></tr>
        <tr><td>@dotinstall</td><td>500</td><td>380</td></tr>
    <tbody>
</table>

 <tr>

table row、表の行を表す。

この内部にセルを表す<th>もしくは<td>タグを用いて表を成形する。

 

<th><td>

それぞれ table header、table data、表のセルを表す。

conspan属性の値の数だけ複数の列が結合したセルを作ることができる。

同様にrowspan属性の値の数だけ複数行にまたがるセルを作ることができる。

<th>は見出しセルであり通常太字で示される。

 

このままでは整列して各要素が並んでいるだけだが、<table>タグにborder属性を値1で記述すると罫線有りの表らしい形となる。

今回の例では<thead>に見出しは1行しか存在していないが複数行あってもかまわない。

また<tbody>内に<th>を用いて見出しのセルを作ることもできる。