Perl Web開発者のHTML・CSS入門

テーブルの作成方法をマスターする

テーブルを作成するにはtableタグ、trタグ、tdタグを使用します。

<table>
  <tr>
    <td>1行1列</td>1行2列<td><td>1行3列</td>
  </tr>
  <tr>
    <td>2行1列</td>2行2列<td><td>2行3列</td>
  </tr>
</table>

tableタグの下に列を表現するtrタグを配置します。trタグの下に行を表現するtdタグを配置します。

テーブルの項目に枠をつける

テーブルの項目に枠をつけてみましょう。テーブルの項目に枠をつけるには、tdタグのスタイルシート(CSS)でborderを指定します。

<style>
  .waku td {
    border:1px solid #ddd;
  }
</style>

<div class="waku">
  <table>
    <tr>
      <td>1行1列</td><td>1行2列</td><td>1行3列</td>
    </tr>
    <tr>
      <td>2行1列</td><td>2行2列</td><td>2行3列</td>
    </tr>
  </table>
</div>

あれ、ボーダーが、離れていますね。ちょっと、テーブルっぽくないですね。

テーブルの枠が離れているのを結合する

テーブルの枠が離れているのを結合してみましょう。tableタグのスタイルシート(CSS)に「border-collapse:collapse;」を指定します。

<style>
  .waku_collapse table {
    border-collapse:collapse;
  }
  .waku_collapse td {
    border:1px solid #ddd;
  }
</style>

<div class="waku_collapse">
  <table>
    <tr>
      <td>1行1列</td><td>1行2列</td><td>1行3列</td>
    </tr>
    <tr>
      <td>2行1列</td><td>2行2列</td><td>2行3列</td>
    </tr>
  </table>
</div>

よく見るテーブルの枠ができあがりました。

テーブルの項目に適切なパディングを設定する

テーブルの項目に適切なパディングを設定してみましょう。少し窮屈ですね。

<style>
  .waku_collapse_padding table {
    border-collapse:collapse;
  }
  .waku_collapse_padding td {
    border:1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
</style>

<div class="waku_collapse_padding">
  <table>
    <tr>
      <td>1行1列</td><td>1行2列</td><td>1行3列</td>
    </tr>
    <tr>
      <td>2行1列</td><td>2行2列</td><td>2行3列</td>
    </tr>
  </table>
</div>

テーブルの幅を100%にする

テーブルの幅を100%にしてみましょう。テーブルはブロック要素と思いきや、ブロック要素ではなく、テーブル要素という特別な要素です。デフォルトの幅は、項目がちょうど収まる幅に自動調整されるようになっています。

テーブルの幅を100%にするにはtableタグのスタイルシート(CSS)に「width:100%;」を指定します。

<style>
  .waku_collapse_padding_100 table {
    border-collapse:collapse;
    width:100%;
  }
  .waku_collapse_padding_100 td {
    border:1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
</style>

<div class="waku_collapse_padding_100">
  <table>
    <tr>
      <td>1行1列</td><td>1行2列</td><td>1行3列</td>
    </tr>
    <tr>
      <td>2行1列</td><td>2行2列</td><td>2行3列</td>
    </tr>
  </table>
</div>

見出しを付ける

テーブルに見出しを付けてみましょう。見出し用のthタグがありますので、これを使うとよいでしょう。

1行目を見出しにする場合

1行目を見出しにしてみましょう。見出し行は、背景色を変えて、太字にしています。thタグは、デフォルトで、テキストが中央よせになります。

<style>
  .waku_collapse_padding_100_head_1row table {
    border-collapse:collapse;
    width:100%;
  }
  .waku_collapse_padding_100_head_1row td, .waku_collapse_padding_100_head_1row th {
    border:1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
  .waku_collapse_padding_100_head_1row th {
    font-weight:bold;
    background:#eee;
  }
</style>

<div class="waku_collapse_padding_100_head_1row">
  <table>
    <tr>
      <th>1行1列</th><th>1行2列</th><th>1行3列</th>
    </tr>
    <tr>
      <td>2行1列</td><td>2行2列</td><td>2行3列</td>
    </tr>
  </table>
</div>

1列目を見出しにする場合

1列目を見出しにしてみましょう。見出し行は、背景色を変えて、太字にしています。thタグは、デフォルトで、テキストが中央よせになります。

<style>
  .waku_collapse_padding_100_head_1col table {
    border-collapse:collapse;
    width:100%;
  }
  .waku_collapse_padding_100_head_1col td, .waku_collapse_padding_100_head_1col th {
    border:1px solid #ddd;
    padding: 12px 20px 10px 20px;
  }
  .waku_collapse_padding_100_head_1col th {
    font-weight:bold;
    background:#eee;
  }
</style>

<div class="waku_collapse_padding_100_head_1col">
  <table>
    <tr>
      <th>1行1列</th><td>1行2列</td><td>1行3列</td>
    </tr>
    <tr>
      <th>2行1列</th><td>2行2列</td><td>2行3列</td>
    </tr>
  </table>
</div>

項目の幅を指定する

見出し項目は小さな幅で、その他は残りの幅を使いたいという場合がありますね。

たとえば、会社情報を表示する場合を考え見ましょう。

スマートフォンサイトにおけるテーブルを使用する場合の注意

スマートフォンサイトにおけるテーブルを使用する場合の注意です。現在のWebサイトは、スマートフォンからアクセスされることを前提とします。

スマートフォンは、横幅は非常に小さいです。テーブルをスマートフォンに表示したときに、項目をどの位置に移動させるか、項目の幅をどのように設定するかということを、考えてデザインする必要があります。

ユーザーが使いやすいインターフェースについて、個別に考える必要があるので、別の記事で、詳しく解説します。