【初心者🔰】表(table)の作り方と装飾(CSS)を超丁寧に図解

# この投稿を見て分かること
+ tableのHTMLの構造
+ 表に余白を付ける
+ 表に線を付ける
+ 表の幅を変える
+ いろいろな表のデザインの仕方

## 背景
tableを使って表を作る過程で激詰みしたので、まとめてみようと思います。

## tableとは
:::note warn
**table**
webサイトで表を作成する際に使う要素。
:::


### tableの構造
![表作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/35176145-0112-4912-ae4b-6a8f43d28e93.png)
上のような表を作成するとします。
その際、タグを指定していきますが、どのタグを当てはめたらいいのか。。。？

**〈結論〉**
![表作成 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/7c0ff89a-2a7e-4e8d-a755-b846cb200422.png)
このようにタグは指定するようになります。

:::note info
**それぞれのタグについて**
table : 表の大枠。``<table></table>``で囲まれた箇所が表になる。
thead : 表のヘッダー部分をグループ化するために使う。
tbody : 表のボディー部分をグループ化するために使う。
tr : 行全体のこと。trを増やすことで行が増えます。
th : ``<th></th>``で囲まれた部分がヘッダーで使用する見出しセルになる。
td : ``<td></td>``で囲まれた部分が表の中身のセルになる。
:::

## 実際にコードを書いてみる
```
<table>
    <thead>
        <tr>
            <th>番号</th>
            <th>種類</th>
            <th>在庫</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>S</td>
            <td>120</td>
        </tr>
        <tr>
            <td>2</td>
            <td>M</td>
            <td>76</td>
        </tr>
        <tr>
            <td>3</td>
            <td>L</td>
            <td>154</td>
        </tr>
    </tbody>
</table>
```
![スクリーンショット 2025-05-08 11.59.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/74858fae-ef96-446c-b07c-466960552721.png)
作成したコードは上記のように表示されて、余白もなければ線もありません。

### 余白を作る（padding）
セルに対して、余白が欲しいですね。
セル＝th、tdなので、こちらにpaddingを指定します。
```
th,td {
    padding: 10px;
}
```
このように指定すると文字の周りに余白が付きますね。

![スクリーンショット 2025-05-08 12.06.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/7ad6c8b2-dac0-45b9-aefd-c31cd7254c4a.png)
### 線を付ける
線を付けるためには**border**を指定する必要があります。
table、tr、th/tdそれぞれにborderを指定したらどうなるかやってみましょう。

#### tableにborderを指定してみる
```
table {
    border: 1px solid #3c3c3c;
}
```
![スクリーンショット 2025-05-08 12.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/128d481e-5b1d-432d-892e-c52c54e92baf.png)
tableは表の外枠なので、外側を囲むように線がつきました。

#### trにborderを指定してみる
```
tr {
    border: 1px solid #3c3c3c;
}
```
![スクリーンショット 2025-05-08 12.06.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/7ad6c8b2-dac0-45b9-aefd-c31cd7254c4a.png)
...何も変わりません。

:::note info
**表示するためには**
```<table>```にborder-collapse:collapseを指定しよう
:::

```
table {
    border-collapse: collapse;
}
tr {
    border: 1px solid #3c3c3c;
}
```
![スクリーンショット 2025-05-08 12.25.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/0f246c62-9359-44e0-ac5f-408260490b5a.png)
綺麗に表示されました⭕️


:::note warn
```border-collapse: collapse;```とは
隣接するセルの境界線（ボーダー）を重ねて表示するためのCSSプロパティ
※ちなみに```border-collapse: sepalate;```を指定すると各セルの線が分離して表示
:::

#### th/tdにborderを指定してみる
```
th,td {
    border: 1px solid #3c3c3c;
}
```
![スクリーンショット 2025-05-08 12.32.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/cda33e80-14da-4075-affb-a90ed79b1e95.png)    ![スクリーンショット 2025-05-08 12.33.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/9ffaecb7-e1c8-40ba-af0a-9150784445e4.png)
（左）th,tdにborder指定、（右）```border-collapse: collapse;```も指定した

→セル1つ1つに線がついたことがわかります

### その他の装飾をしていく
#### 文字色
```
th,td {
    border: 1px solid #737373;
    color:#737373;
}
```
![スクリーンショット 2025-05-08 12.39.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/d7968eb0-7750-48d8-9d6e-8a5c68a9bcd9.png)
文字色が灰色になりました。
#### 文字を中央揃えにする
```
table {
    border-collapse: collapse;
    text-align: center;
}
```
![スクリーンショット 2025-05-08 12.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/c3f9b1bb-7094-4996-a6d8-21998686f959.png)

最後に左右の余白を調整して完成しました🤩

![スクリーンショット 2025-05-08 12.42.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/62f775cd-0827-4a33-936d-553abc9083c3.png)

## いろんなスタイルの表を作成してみよう
### ①見出しと番号のみ背景をつけてみる
![表作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/dd5217ce-512a-4f1a-8cda-c70a801a5314.png)

見出しはthでグループ分けされていますが、番号の列はth,td,tdと指定できていないですね。
```class```を指定することで、CSSを当てられるようにしましょう。
```
<table>
        <thead>
            <tr>
                <th class="number">番号</th>
                <th class="type">種類</th>
                <th class="stock">在庫</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="number">1</td>
                <td class="type">S</td>
                <td class="stock">120</td>
            </tr>
            <tr>
                <td class="number">2</td>
                <td class="type">M</td>
                <td class="stock">76</td>
            </tr>
            <tr>
                <td class="number">3</td>
                <td class="type">L</td>
                <td class="stock">154</td>
            </tr>
        </tbody>
    </table>
```
```
th,
.number {
    background-color: #dfdede;
}
```
![スクリーンショット 2025-05-08 13.03.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/cea7a710-2a20-4156-88e6-d60de2aa965b.png)
### ②外枠の線はなく、内側の線で区切る
![表作成 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/af8a3fdf-f64c-4ad0-a4a2-096c1ea2eec1.png)
線をtdに指定してしまうと、全部のセルに線がついてしまいましたよね。
つまり、**外枠を設定するtableにborder:noneをつけても外枠はついたまま**ということです。
これでは外枠を消すことはできません。
では、どうするか。
こんな考え方で線を付けていきます。（下記画像参照）
![表作成 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/040c1775-f7ea-47c5-ae34-baed6c2a5f51.png)

STEP1：まず行（横の線）から考えましょう。
1,「行に線がつく＝trに線を指定する」なので、trに下線を指定することで横線を作成できます。
2,一番最下部のtrの下線は不要なので指定しません。(青い丸で囲まれた箇所)


これをする上で今足りていないのは、**最下部のtrを指定するために区別できるクラスを付けること**です。

```
<table>
        <thead>
            <tr class="top">
                <th class="number">番号</th>
                <th class="type">種類</th>
                <th class="stock">在庫</th>
            </tr>
        </thead>
        <tbody>
            <tr class="second">
                <td class="number">1</td>
                <td class="type">S</td>
                <td class="stock">120</td>
            </tr>
            <tr class="third">
                <td class="number">2</td>
                <td class="type">M</td>
                <td class="stock">76</td>
            </tr>
            <tr class="fourth">
                <td class="number">3</td>
                <td class="type">L</td>
                <td class="stock">154</td>
            </tr>
        </tbody>
    </table>
```
クラスの指定ができたら、上から３行のみ下線を引くようCSSで指定します。
```
.top,
.second,
.third {
    border-bottom: 1px solid #737373;
}
```
これにより下記の状態になります。
![スクリーンショット 2025-05-11 19.10.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/afc419c3-e324-4339-86ac-0c2edac1f087.png)

STEP2：列（縦線）を引いていきます。
![表作成 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/2d0d4fc3-81d9-46f2-b4af-821ecfec5d91.png)
縦のセルに対して、右側にのみ線を引けば理想の状態になりますね。一番右側のセルに関しては線は不要なので引きません。
ここで使えるのが、th、tdに指定したクラスです。
実際に記載したCSSはこちら。
```
.number,
.type {
    border-right: 1px solid #737373;
}
```
これによって目的の線が引けました!
![スクリーンショット 2025-05-11 19.16.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/961f3a4b-5e94-4a62-9153-3e09e9012f3c.png)



### ③列ごとに枠のサイズを変える
![表作成 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/0c4b54c9-bd8d-41da-9ec3-19c57acd97e5.png)

列ごとに枠のサイズを変えるためには、列指定をする必要があります。
1つ前の縦線をつける時と同じようにclassに幅を指定していきます。

```
table {
    border-collapse: collapse;
    color: #737373;
    font-size: 15px;
    width: 400px;
}

.number {
    width: 20%;
}

.size {
    width: 35%;
}

.stock {
    width: 50%;
}

```

tableに全体の幅を指定し、th.tdに幅の割合を指定しました。
![スクリーンショット 2025-05-12 9.06.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/63617af4-3724-4cec-9687-aececce7ce17.png)


## 最後に
:::note info
**まとめ**
+ 表を作成するにはtableタグを使用する
+ 行：```<tr>```　1つのセル：```<td>``` 　→```<td>```を増やすと列が増える
+ タイトルとなる行のセルは```<th>```とし、```<tr>```と```<th>```を```<thead>```で囲む
+ 表のボディ（内容となる箇所）は```<tbody>```で囲む
+ 線を１本の線にするには```border-collapse: collapse;```をtableに指定する
　
:::

表を作成していくと要素がたくさんあってこんがらがってしまうので、最初にどのタグがどの内容を指すのか、グルーピングの方法をこの投稿で理解するとスムーズに作成ができます！