2.テーブルの組み方

このページはテーブルの組み方について説明しています。

  HPを作成していくと字の並びがきれいに並ばなかったり、画像などを文章の中に組み込んでみたくなったり、そんなことはよくあると思います。
 そんな時に便利(というか使うべき)なものは「表組み」です。
 「表組み」を使えば「表」が作れます。(当たり前)  この表の枠線の幅を0にすることで枠のない表が出来、画面のデザインを整えるのに使えるようになります。

 例として2*2の表をくむ表記方法を以下に示します。

タグ 説明
<table>
  <tr>
    <td>
      A1
    </td>
    <td>
      B1
    </td>
  </tr>
  <tr>
    <td>
      A2
    </td>
    <td>
      B2
    </td>
  </tr>
</table>
A1 B1
A2 B2

こんなのが出来ます。
  上から下へ、左から右へと記述します。
 <table></table>で挟んで書いていきます。

 まずは横方向です。
 <tr></tr>で挟んだ部分が「行」になります。
 まー、ノートの罫線を引いたような状態ですね。
これを複数作っていくことで複数行を持つ表を作ることが出来ます。

 次に縦割です。
 <td></td>で挟んだ部分が「列」になります。
先ほど作った「行」の中に「列」を作ることで「ます」が出来るわけです。
 ただ、この「列」はすべての「行」に作用するのですべての「行」に
同数の「行」を作る必要があります。要するにきれいな「格子模様」を
作らなければならない、ということです。
 ちなみに<td>の替わりに<th>を使用すると「標題セル」として扱われ
内容文字は太字になります。

・セルの結合
  「きれいな格子模様を作りなさい」って言っても、そう簡単にはいきませんね。
  横方向や縦方向に複数のセルを結合したい、なんてことも往々にしてあることだと思います。
  そんな場合は「サクッ」っと結合しちゃいましょう!
  <td>colspan=2としておくと横方向に、rowspan=2としておくと縦方向に
 2つ分のセルになり結合したような形にしてくれます。
  では、縦方向にセルを2つ分の大きさにした場合、その下の行はどうなるのでしょう?
  答えは「はみ出してきている分は無視してそれ以外のところを書けばいい」です。
  要するに横4つのtableを作っている場合、どこでもいいのですが1カ所縦方向にcolspan=2
 した場合、その下の行のセルは3つ記述すればいいのです。

・セル内での文字の表示位置
  セルの中で中央寄せをしたいこととか良くありますよね?
  そんな時はどうしたらいいのでしょうか?<TD>align="center"と記述すればいいのです。
  左寄せなら"left"、右寄せなら"right"です。簡単ですね?
  ちなみに、縦方向の位置を指定するには以下のようにします。

  valign= "top" 上寄せ
"middle" 中央揃え
"bottom" 下寄せ

  では、以下のようなサンプルを用意しました。どんな形が出来るのでしょうね?

<table border=1 align="center">
 <tr>
  <td colspan="3" align="center" valign="center">
   こんな表が出来るかな?
  </td>
 </tr>
 <tr>
  <td colspan="2" align="center" valign="center">
   横2つ1
  </td>
  <td rowspan="2" align="center" valign="center">
   縦2つ1
  </td>
 </tr>
 <tr>
  <td rowspan="2" align="center" valign="center">
   縦2つ2
  </td>
  <td align="center" valign="center">
   +
  </td>
 <tr>
  <td colspan="2" align="center" valign="center">
   横2つ2
  </td>
 </tr>
</table>

  トップページへ
  混迷のHTMLの世界へ
1.HTMLの基礎
2.テーブルの組み方
3.フォームの利用
4.JavaScript