1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

【HTML入門】rowspanでセルを縦に結合してみよう!

Pocket

表を作っていると、同じ要素が入るセルがいくつか出てきます。そういうときにはセルを縦や横に結合して、見やすくします。セルを縦に結合するにはrowspan属性を、横に結合するにはcolspan属性を指定します。ここではrowspan属性を説明します。

セルを縦に結合するには

表は、縦や横に隣り合うセルを結合して、1つのセルにすることができます。セルを連結するとも言います。

縦方向に隣り合うセルの内容が同じであれば、結合の一番上になるセルのtd要素またはth要素にrowspan属性を指定します。
たとえば、<th rowspan=”2″>…</th>という形です。

結合するセルの数を指定する

rowspan属性では結合したいセルの数を数値で指定します。上の例では”2″になっています。任意の数のセルを結合することができます。数字を指定しなければ、セルは結合されません。

ただし、数値に”0″を指定すると、この下のセルをすべて縦に結合します。
セルがグループ化されていれば、行グループの終りのセルまで、この下のセルをすべて縦に結合します。
この指定方法は、ブラウザにより対応していない場合もあります。

結合されたセルはどうなる?

結合されるセルについては要素そのものを記述しません。結合されるセルは消えると見なされるためです。
そのため、結合されて消えるセルが含まれる行では、td要素やth要素が他の行よりも少なくなります。

セル結合の注意点

表は要素を行単位で記述するので、縦方向に結合すると、ソースが複雑になります。
結合するセルの位置をしっかり確認し、ソースを記述するときには、タグを入れる場所や消えるセルの記述に注意してください。

横方向にもセルを結合するには

セルは横方法にも結合することができます。
そして、セルは縦方向の結合と横方法の結合を同時に指定することもできます。
この場合はよりソースが複雑になるので、ソースを記述するときにはセルの位置をよく確認しましょう。

HTML上の表示

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る