HTML 入門

スタイルシートでデザインを作ろう

表のデザインを設定する

ここで説明したように，表に罫線や色を HTML 内で指定する方法は非推奨で，CSS で指定するべきです．まず，表全体を <table> ... </table> で囲っただけであれば，次のような表示になります．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

index.html（抜粋）コピー
<table>
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>123</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

まず，表の罫線を CSS で指定してみよう．<table>，<td>，<th> のすべてに対して，罫線を太さ 1px，色が #808080 （グレー）の実線 (solid) に指定します．また，border-collapse: collapse; は隣接するセルのボーダを重ねて表示するための指定です． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

index.html（抜粋）コピー
<table>
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>123</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

style.css（抜粋）コピー
table, td, th {
  border:1px solid #aaa;
  border-collapse: collapse;
}

上の例において，表全体の幅はそのコンテンツの分量によって自動的に調整されました．表全体の幅をあらかじめ指定したい場合には CSS で table 要素に width プロパティを設定します．次の例では常に 300px を設定します． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
table {
  width: 300px;
}

今度は表全体の幅を親要素の100%に設定します．ブラウザの幅を変更したときにレイアウトがどのように変化するか確認してください． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
table {
  width: 100%;
}

次はセル内の文字列の配置を中央揃えや右揃えにしてみます．適当な名前のクラスを作成してそれぞれに text-align プロパティを設定すると良いでしょう． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

index.html（抜粋）コピー
<table>
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>12</td>
      <td class="tdcenter">123</td>
      <td class="tdright">12345678</td>
    </tr>
    <tr>
      <td>123</td>
      <td class="tdcenter">123456</td>
      <td class="tdright">12345678</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

style.css（抜粋）コピー
table, td, th {
  border:1px solid #aaa;
  border-collapse: collapse;
}

table {
  width: 300px;
}

td.tdcenter {
  text-align: center;
}

td.tdright {
  text-align: right;
}

なお，上の結果では罫線と文字列の距離が近すぎるようにも感じられます．この場合は padding を適当に設定すると良いでしょう．たとえば，左右の padding を 4px に設定して文字と罫線の距離を確保します． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

style.css（抜粋）コピー
td {
  padding: 0 4px;  /* 上下 0， 左右 4px*/
}

目次に戻る