HTML 入門トップページ

---

目次

1. ホームページ作成はじめの一歩
2. HTMLの基礎
3. 基礎的なタグをマスターしよう
4. HTML 文書を検証してみよう
5. スタイルシート
   1. CSS ファイルを準備する
   2. CSS ファイルを読み込む
   3. 表示を確認しておこう
   4. CSS にデザインを記述する
   5. 複数のセレクタに適用する
   6. classを使う
   7. 表のデザイン
   8. 図のデザイン
   9. HTML内にスタイルを記述する
6. フォームを使ってみよう
7. 参考サイト

---

スタイルシート

表のデザイン

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

index.html（抜粋）コピー
<table>  <!-- border を設定しない -->
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>123</td><td>123456</td><td>12345678</td></tr>
  </tbody>
</table>

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

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

表全体の幅を調整するためには CSS で table 要素に width プロパティを設定します．

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

最後に，セルに背景色を付けたり，右寄せ，左寄せ，文字色の変更などをクラスを指定することで変更してみよう．HTML でセル <td> に tdcenter，tdleft，tdright のクラスを任意に設定し，CSS ファイルでスタイルを記述するとよいでしょう．

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

style.css（抜粋）コピー
th {
  background-color:skyblue;
}

td.tdcenter {
  text-align: center;
  background-color: lime;
}

td.tdright {
  text-align: right;
  color: red;
}

td.tdleft {
  text-align: left;
}

---