tableタグ｜HTML とCSS で表をつくる

表の考え方
最初の横一列を見出しにする方法
最初の縦一列を見出しにする方法
最初の横一列と縦一列を見出しにする方法

表の考え方

以下の４つのタグを使用します。

table	表を囲む一番外側の「枠」
tr	行全体を囲む「枠」
th	見出しの「セル」
td	詳細の「セル」

tableが一番大きな枠組みで、trが各ブロックを囲む枠、thは見出しセル、tdが内容を記述するセルになります！最初は分かりにくいなぁって思ってましたが、何度も使用していると自然と慣れます＾＾

以下、３種類のhtmlとcssをメモしています。
基本的にcssは3番目以外同様のもので変えていません。縦と横の両方に見出しをつける場合のみ、一番左上のセルの色背景と馴染ませたかったので、１つだけコードを追加しています。

最初の横一列を見出しにする方法

      <table>
        <tr>
          <th>ねこ見出し</th> <th>いぬ見出し</th> <th>さる見出し</th> <th>ぞう見出し</th>
        </tr>
        <tr>
          <td>ねこ１</td> <td>いぬ１</td> <td>さる１</td> <td>ぞう１</td>
        </tr>
        <tr>
          <td>ねこ２</td> <td>いぬ２</td> <td>さる２</td> <td>ぞう２</td>
        </tr>
     </table>

table {
    margin: 0 auto;
}
th,td{
    padding: 1em;
    color: #2B2B2B;
    text-align: center;
}
th{
    background: #FBA3BD;
    font-weight: bold;
}
td{
    background: #F4EAD5;
}

表示すると以下のような見た目になります。

最初の縦一列を見出しにする方法

      <table>
        <tr>
          <th>ねこ見出し</th> <td>ねこ１</td> <td>ねこ２</td> <td>ねこ３</td>
        </tr>
        <tr>
          <th>いぬ見出し</th> <td>いぬ１</td> <td>いぬ２</td> <td>いぬ３</td>
        </tr>
        <tr>
          <th>さる見出し</th> <td>さる１</td> <td>さる２</td> <td>さる３</td>
        </tr>
     </table>

table {
    margin: 0 auto;
}
th,td{
    padding: 1em;
    color: #2B2B2B;
    text-align: center;
}
th{
    background: #FBA3BD;
    font-weight: bold;
}
td{
    background: #F4EAD5;
}

表示すると以下のような見た目になります。

最初の横一列と縦一列を見出しにする方法

<table>
   <tr>
     <td class="none"></td> <th>横の見出し</th> <th>横の見出し</th> <th>横の見出し</th>
   </tr>
   <tr>
     <th>縦の見出し</th> <td>ねこ１</td> <td>ねこ２</td> <td>ねこ３</td>
   </tr>
   <tr>
 　　 <th>縦の見出し</th> <td>いぬ１</td> <td>いぬ２</td> <td>いぬ３</td>
   </tr>
</table>

table {
    margin: 0 auto;
}
th,td{
    padding: 1em;
    color: #2B2B2B;
    text-align: center;
}
th{
    background: #FBA3BD;
    font-weight: bold;
}
td{
    background: #F4EAD5;
}
.none{
    background: #fff;
}

表示すると以下のような見た目になります。