[ CSS ] TABLE の表示を変更するサンプル

CSS で TABLE の表示を変更するサンプルを作ってみました。

この記事の目次非表示

CSS のコード
HTML のコード
表示確認

CSS のコード

table {
  border-collapse: collapse;
  border: 1px solid #CCCCCC;
  }
th {
  border: 1px solid #CCCCCC;
  background-color: #DDDDDD;
  font-weight: normal;
  line-height: 125%;
  padding:0.5em;
  }
td {
  border: 1px solid #CCCCCC;
  background-color: #EEEEEE;
  line-height: 125%;
  padding:0.5em;
  }

上記コードの中にある、

border-collapse: collapse;

と言う指定は、隣接するボーダー間の余白・マージンを無視する設定。ようするに隣接するボーダーを引っ付ける為の物。

HTML のコード

<table>
  <tr>
    <th>Apple</th>
    <th>Macintosh</th>
    <th>Windows</th>
  </tr>
  <tr>
    <td>Win FF 1.0 : OK</td>
    <td>Win IE 6.0 : OK</td>
    <td>Win NS 7.2 : OK</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>