HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでテーブルセルがまたがる列数を指定する方法（colspan属性の使い方）

HTMLのテーブルで、ひとつのセルを複数の列にまたがらせたい場合はcolspan属性を使用します。colspan属性に数値を指定することで、そのセルが横方向に何列分の幅を占めるかを定義できます。

例えば colspan="2" と指定すれば、そのセルは2列分の幅になります。表の最終行に「合計」を表示したい場合などによく使われる便利な属性です。

colspan属性のサンプルコード

以下のコードを実行すると、colspan属性による列の結合を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h2>Total Marks</h2>
      <table>
         <th>Subject</th>
         <th>Marks</th>
         <tr>
            <td>Maths</td>
            <td>300</td>
         </tr>
         <tr>
            <td>Java</td>
            <td>450</td>
         </tr>
         <tr>
            <td colspan="2">Total Marks: 750</td>
         </tr>
      </table>
   </body>
</html>

コードの解説と表示結果

このサンプルでは、次のような構造になっています。

  • 表のヘッダーには「Subject（科目）」と「Marks（点数）」という2つの列があります。
  • 1行目と2行目にはそれぞれ科目名と点数が入力されています。
  • 最終行のセルには colspan="2" が設定されているため、「Total Marks: 750」というテキストが2列分にまたがって表示されます。

このようにcolspan属性を活用することで、見出しや合計欄などを自然にレイアウトでき、より読みやすい表を作成できます。なお、縦方向にセルをまたがらせたい場合は、rowspan属性を同様の書式で使用します。

  1. HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説

    HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。 例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。 例1：基本となるテーブルを作成する まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html>    <head>     &nbs

  2. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n