HTML CSS <table>タグを使ってみる #初心者

テーブル（表）を使う機会があったので。
簡単に自分用のメモ。
このサイトで簡単に出来ることができる：https://tabletag.net/ja/

シンプルなテーブル

table.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テーブル</title>
    <link rel="stylesheet" href="css/table.css">
  </head>
<body>
  <div class="table-container">
    <table>
      <tr>
        <th>銀行名</th><td>あいうえお銀行</td>
      </tr>
      <tr>
        <th>支店名</th><td>かきくけこ支店</td>
      </tr>
      <tr>
        <th>店番</th><td>０９８７６５</td>
      </tr>
      <tr>
        <th>口座名義</th><td>株式会社サシスセソ</td>
      </tr>
      <tr>
        <th>口座種別</th><td>普通預金</td>
      </tr>
      <tr>
        <th>口座番号</th><td>９９９９９９</td>
      </tr>
    </table>
    <div class="table-attention">
      <p>
        ※ここに注意点とか記述する０１
        <br>
        ※ここに注意点とか記述する０２
      </p>
    </div>
  </div>
</body>
</html>

table.css

body {
    margin: 10px;
}

.table-container {
    margin: auto;
}
table {
    border-collapse: collapse;
}
table th {
    padding: 10px;
}
td {
    padding: 10px;
}
th,td {
    border: 1px solid #000000;  
}
.table-attention {
    display: inline-block;
    margin: 10px auto;
}
.table-attention p {
    margin: 0;
}

こんな感じでできる。ぶっちゃけこれぐらいならリストとかでもいいかも…

ちょっと装飾したテーブル

table2.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テーブル2</title>
    <link rel="stylesheet" href="css/table2.css">
  </head>
<body>
  <div class="table-container">
    <table>
      <tr>
        <th>コース名</th>
        <th>内容</th>
        <th>備考</th>
      </tr>
      <tr>
        <td>山の幸コース</td>
        <td>地元産の野菜・ジビエ料理など</td>
        <td rowspan="2">使う食材は季節によって変わります</td>
      </tr>
      <tr>
        <td>海の幸コース</td>
        <td>日本海で取れた新鮮な魚など</td>
        <!-- <td>使う食材は季節によって変わります</td> -->
      </tr>
      <tr>
        <td>中華コース</td>
        <td>麻婆豆腐・北京ダックなど</td>
        <td>餃子はおかわり自由！</td>
      </tr>
      <tr>
        <td>ヨーロッパコース</td>
        <td>フランス・イタリアなどから2つ選べます</td>
        <td>最低２つお選びください</td>
      </tr>
    </table>
    <div class="table-attention">
      <p>
        ※ここに注意点とか記述する０１
        <br>
        ※ここに注意点とか記述する０２
      </p>
    </div>
  </div>
</body>
</html>

table2.css

body {
    margin: 10px;
}

.table-container {
    margin: auto;
}
table {
    width: 100%;
    border: 2px solid #7cd1e0;
    border-collapse: collapse;
}
table th {
    padding: 10px;
    background: #2dc0da;
    color: #ffffff;
}
td {
    padding: 10px;
}
th,td {
    border: 1px solid #7cd1e0;
    text-align: center;
}
.table-attention {
    display: inline-block;
    margin: 10px auto;
}
.table-attention p {
    margin: 0;
}

色をつけて、セルの結合をしてみました。

hoverすると色が変わるテーブル

table3.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テーブル3</title>
    <link rel="stylesheet" href="css/table3.css">
  </head>
<body>
  <div class="table-container">
    <table class="highlight">
      <thead>
        <tr>
          <th>NAME</th>
          <th>AGE</th>
          <th>TEAM</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alan</td>
          <td>34</td>
          <td>Red</td>
        </tr>
        <tr>
          <td>Bruno</td>
          <td>13</td>
          <td>Blue</td>
        </tr>
        <tr>
          <td>Margaret</td>
          <td>46</td>
          <td>Green</td>
        </tr>
        <tr>
          <td>Patricia</td>
          <td>27</td>
          <td>Yellow</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

table3.css

body {
    margin: 10px;
}

.table-container {
    margin: auto;
    width: 70%;
}
table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
}
thead {
    color: rgba(95, 4, 31, 0.6);
}
tr {
    border-bottom: 1px solid rgb(0, 0, 0, 0.12);
    transition:background .25s ease ;
}
tr:hover {
    background: rgba(223, 223, 223, 0.3);

}
th, td {
    padding: 15px 10px;
    border-radius: 2px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}

Highlight Tableを見つけて、「面白い！」と思い1時間ぐらいで作った。
transitionプロパティを:hoverに適用してもできないのがミソかな。

tableでよく使う属性

説明用に全角で<>を入力しています

属性	例	説明
rowspan	＜td rowspan="2"＞縦に結合＜/td＞	セルを縦に結合する
colspan	＜td colspan="3"＞横に結合＜/td＞	セルを横に結合する

tableでよく使うプロパティ

プロパティ	例	説明
width	width: 400px;	セルや表の幅を指定　%やem、autoも可
border	border: 2px solid #7cd1e0;	線幅線の種類線の色を指定
border-collapse	border-collapse: collapse;	ボーダーが結合されて表示
	border-collapse: separate;	ボーダーが分離されて表示
text-align	text-align: center;	文字を中央に揃える