WEBとテーブルと私

141 view

お久しぶりです制作部のコヤマです。
クーネルワークに入社して4ヶ月が立ちました。

いろんなことが分かったようで分かっていない私ですが、
備忘録的にこれからブログをしたためていこうかと思います……!

今回は、表組みをするときに使われるtableタグについてのお話です。

tableタグとは

<table>はHTMLで表を作ることができるタグです!

<table>の表は、行である<tr>(Table Row),セルである<th>(Table Header),<td>(Table Data)で主に構成されています。

書き方

それでは早速、簡単な表を作ってみましょう。

<table>
  <tr>
    <th>猫の名前</th>
    <th>猫の色</th>
  </tr>
  <tr>
    <td>シロ</td>
    <td>白</td>
  </tr>
  <tr>
    <td>クロ</td>
    <td>黒</td>
  </tr>
</table>

上記のように記述すると……

といった表を作ることができます。
<tr>は表の行、<th>はセルの見出し、<td>はセルの内容を表しています。
(見出しが必要ないときは<th>は入れなくてもOKです。)

4行4列の表

それではもう少し表の行と列を増やしてみましょう。

<table>
  <tr>
    <th>猫の名前</th>
    <th>猫の色</th>
    <th>体重</th>
    <th>昼寝時間</th>
  </tr>
  <tr>
    <td>シロ</td>
    <td>白</td>
    <td>やや重</td>
    <td>長</td>
  </tr>
  <tr>
    <td>クロ</td>
    <td>黒</td>
    <td>重</td>
    <td>長</td>
  </tr>
</table>

このように適宜、<tr>、<th>、<td>を加えてあげることで
表のセルを増やすことができますよ。

ちょっと入り組んだ表

それでは、こちらの表はどのように作ればよいのでしょう。

ちょっと複雑な表ですね……。
ここで役に立つのが rowspan と colspan です!

rowspan と colspan でセルは結合させてあげることができます。

rowspan と colospan の値はそれぞれセルを結合する数を表しています。
rowspanのrowは”行”、colspanのcolはcolumnの略で”列”。
つまり、rowspanは”横方向”、colspanは”縦方向”のセルの結合をしてくれるのです。
例えば、rowspan=”4″なら、セルを4つ結合した分の行幅を得られます。

<table>
  <tr>
    <th rowspan="3">猫の名前</th>
    <th colspan="4">猫の特徴</th>
  </tr>
  <tr>
    <th rowspan="2">猫の色</th>
    <th rowspan="2">体重</th>
    <th colspan="2">睡眠時間</th>
  </tr>
  <tr>
    <th>昼</th>
    <th>夜</th>
  </tr>
  <tr>
    <td>シロ</td>
    <td>白</td>
    <td>やや重</td>
    <td>長</td>
    <td>長</td>
  </tr>
  <tr>
    <td>クロ</td>
    <td>黒</td>
    <td>重</td>
    <td>長</td>
    <td>長</td>
  </tr>
</table>

うまく指定してセルを結合させると、ちょっと入り組んだ表も作れますよ!

ちなみに、縦横を同時に指定することもできちゃいます。

是非試してみてくださいね!

最後に

今回はHTMLのtableタグについてのお話でした。
これで私もtableマスター!?と思いきや、
実はタグの他に、displayプロパティにも「table」というものがあるのです……。

それについては、また次回以降のお話ということで。

\ SNSでシェア /

WRITER

コヤマリュウヘイ

制作 コヤマリュウヘイ

新潟生まれ新潟育ち新潟勤め。

現在、制作部にて修行中……!
趣味はお絵かきです。

TAGS