HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座

|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 TABLE 講座インデックス > テーブル table セルの結合
様々なブックマークサービスがご利用頂けます。

セルの結合

■ colspan 属性
th、td 要素において、複数列(横方向)を結合して表示します。
ソース  ソース
<table border="1">
  <tr><td colspan="4">年号</td></tr>
  <tr>
    <td>1972年</td>
    <td>1973年</td>
    <td>1974年</td>
    <td>1975年</td>
  </tr>
</table>
表示  表 示
 値
colspan属性の値は、数字で指定します。
この数字は、上の例ですと、下側の4列分のセルを結合すると言う意味で、4 と指定しています。
下記の例を上記の例と比べてご覧頂くと、列を結合する colspan属性が理解し易くなると思います。
ソース  ソース
<table border="1">
  <tr>
    <td>年号</td>
    <td>年号</td>
    <td>年号</td>
    <td>年号</td>
  </tr>
  <tr>
    <td>1972年</td>
    <td>1973年</td>
    <td>1974年</td>
    <td>1975年</td>
  </tr>
</table>
表示  表 示
colspan属性を指定した最初の例は、上記の例の一列目の年号と記述されたセルを含めた、二列目以降の年号と記述されたセルを結合しています。

■ rowspan 属性
th、td 要素において、複数行(縦方向)を結合して表示します。
ソース  ソース
<table border="1">
  <tr><td rowspan="4">年号</td><td>1972年</td></tr>
  <tr><td>1973年</td></tr>
  <tr><td>1974年</td></tr>
  <tr><td>1975年</td></tr>
</table>
表示  表 示
 値
rowspan属性の値は、数字で指定します。
この数字は、上の例ですと、右側の4行分のセルを結合すると言う意味で、4 と指定しています。
下記の例を上記の例と比べてご覧頂くと、行を結合する rowspan属性が理解し易くなると思います。
ソース  ソース
<table border="1">
  <tr><td>年号</td><td>1972年</td></tr>
  <tr><td>年号</td><td>1973年</td></tr>
  <tr><td>年号</td><td>1974年</td></tr>
  <tr><td>年号</td><td>1975年</td></tr>
</table>
表示  表 示
rowspan属性を指定した最初の例は、上記の例の一行目の年号と記述されたセルを含めた、二行目以降の年号と記述されたセルを結合しています。

(C) いまさらHTML CSS講座 2002-2008 All right reserved