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

【HTML入門】colspanを使って表セルを横に結合してみよう!

Pocket

テーブルのセルは通常格子状に並んでいます。しかし同じ内容が入っているセルはまとめて結合すると、Excelで作った表のようになって見やすくなります。セルを縦に結合するにはrowspan属性を、横に結合するにはcolspan属性を指定します。ここではcolspan属性を説明します。

セルを横に結合するには

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

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

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

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

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

colspan属性を指定すると、指定したセルから右方向に、指定した数だけのセルが結合されます。
結合されるセルは削除されるので、記述する必要はありません。

セル結合の注意点

横方向のセル結合は任意の数を指定できますが、結合されるセルの数だけ、タグの数が減ることに注意します。
ソースを記述するときには、タグを入れる場所や消えるセルの記述に注意してください。

セル結合の問題点

以前は大きな表をレイアウト指定代わりに使っていましたが、現在はレイアウトの指定は主にスタイルシートで行います。また、方向に関わらず、セルの結合を利用すると、セル内のデータを利用しにくくなります。列のグループ化を利用した方がデータを活用できるでしょう。

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

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

HTML上の表示

実行結果

投稿者:プロスタ編集部

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

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

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

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

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る