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;
}
```

![20191105_Qiita02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/beca9016-b073-b113-2c78-cd256cde0998.png)

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


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

```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;
}
```
![20191107_Qiita01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/38b5012a-f64e-407e-78f6-ea99cda921f6.png)

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


##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;
}
```
![20191107_QiitaGif01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/6dfded50-a951-eed4-f78a-aed5baafe2ff.gif)

[Highlight Table](https://materializecss.com/table.html)を見つけて、「面白い！」と思い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**; | 文字を**中央**に揃える |