【デザイン集】コーディングで迷った時の参考に！どんなサイトにも合う表・テーブルデザイン11選

RELEASE / 2024.8.4 UPDATE / 2024.08.04

css

HTML

アイデア

おしゃれ

サンプル

フラット

表・テーブル

Webサイトで表・テーブルが登場する機会は多いです。
デザイナーにとってはいつも同じ表・テーブルデザインになってしまう、またコーダーにとってもデザインが指定されていない場合どんな表・テーブルにすればいいのか迷ってしまうこともあります。
そんな時のために今回の記事ではHTMLとCSSで作るシンプルでフラットな表・テーブルデザインを11種類ご紹介します。
コピペですぐに使うことが出来るので気に入ったものがあれば是非ご活用ください！

この記事でご紹介するコードは以下のHTMLで作成しています。

<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>
</table>

この記事の目次を表示

1 ボーダー（罫線）がベースとなる表・テーブルデザイン
2 背景色がベースとなる表・テーブルデザイン
3 角丸がベースとなる表・テーブルデザイン
- 3.1 角丸ボーダー（罫線）の表・テーブルデザイン
- 3.2 角丸背景色の表・テーブルデザイン
4 おしゃれな表・テーブルデザイン
- 4.1 見出しにアイコンを付けた表・テーブルデザイン
- 4.2 吹き出し風の見出しの表・テーブルデザイン
5 まとめ

ボーダー（罫線）がベースとなる表・テーブルデザイン

ボーダー（罫線）がベースとなる表・テーブルデザインをご紹介します。

上下ボーダー（罫線）でシンプルな表・テーブルデザイン

最初にご紹介するのは上下ボーダー（罫線）だけで表現したシンプルはデザインです。
シンプルなものはどんなデザインのWebサイトでも取り入れることが出来るのでお勧めです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
table td {
    width: 75%;
    padding: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

下ボーダー（罫線）だけのシンプルな表・テーブルデザイン

次にご紹介するのは下ボーダー（罫線）だけで表現したシンプルはデザインです。
これもシンプルなデザインなのでどんなWebサイトでも取り入れることが出来るのでお勧めです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
table td {
    width: 75%;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

見出しだけでボーダー（罫線）の色を変えたシンプルな表・テーブルデザイン

次にご紹介するのは表の見出しのボーダー（罫線）だけ色を変えたデザインです。
これもシンプルなデザインなのでどんなWebサイトでも取り入れることが出来るのでお勧めです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    border-top: 1px solid #e8c72e;
    border-bottom: 1px solid #e8c72e;
}
table td {
    width: 75%;
    padding: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

見出しだけで下ボーダー（罫線）の色を変えたシンプルな表・テーブルデザイン

次にご紹介するのは表の見出しの下ボーダー（罫線）だけ色を変えたデザインです。
これもシンプルなデザインなのでどんなWebサイトでも取り入れることが出来るのでお勧めです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e8c72e;
}
table td {
    width: 75%;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

実施プサンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

背景色がベースとなる表・テーブルデザイン

続いて、背景色がベースとなる表・テーブルデザインをご紹介します。

交互に背景色を付けるシンプルな表・テーブルデザイン

最初にご紹介するのはtrを基準に交互に背景色を付けたシンプルはデザインです。
シンプルなものはどんなデザインのWebサイトでも取り入れることが出来るのでお勧めです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table tr:nth-child(odd) {
    background: #e9e9e9;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
}
table td {
    width: 75%;
    padding: 10px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

見出しに背景色を付けるシンプルな表・テーブルデザイン

次にご紹介するのは見出しだけに背景色を付けたシンプルはデザインです。
これもシンプルなデザインなのでどんなWebサイトでも取り入れることが出来るのでお勧めです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    background: #e8c72e;
    border-bottom: 2px solid #fff;
}
table td {
    width: 75%;
    padding: 10px;
    border-bottom: 2px solid #fff;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

セル同士を離すために白いボーダー（罫線）を指定しています。
これがあることで表が見やすくなります。

背景色を付けつつ、セル同士を離してフラットな表・テーブルデザイン

次にご紹介するのは背景色を付けつつ、セル同士を離すフラットな表・テーブルデザインです。
これもシンプルなデザインなのでどんなWebサイトでも取り入れることが出来るのでお勧めです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    background: #e8c72e;
    border-right: 5px solid #fff;
    border-bottom: 5px solid #fff;
}
table td {
    width: 75%;
    padding: 10px;
    background: #e9e9e9;
    border-bottom: 5px solid #fff;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸がベースとなる表・テーブルデザイン

続いてご紹介するのは角丸がベースとなる表・テーブルデザインをご紹介します。
角丸を取り入れることでポップな印象になります。

角丸ボーダー（罫線）の表・テーブルデザイン

最初にご紹介するのボーダー（罫線）を角丸にした表・テーブルデザインです。
角丸の強さでポップさが変わるので使うWebサイトによって角丸の数値を変更して使用します。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    border: 1px solid #fff;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    position: relative;
}
table td {
    width: 75%;
    padding: 10px;
    border: 1px solid #fff;
    border-bottom: 5px solid #fff;
    position: relative;
}
table th::before,
table td::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #e8c72e;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸背景色の表・テーブルデザイン

続いてご紹介するのは背景色を角丸にした表・テーブルデザインです。
背景色の場合も角丸の強さでポップさが変わるので使うWebサイトによって角丸の数値を変更して使用します。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    border: 1px solid #fff;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    position: relative;
}
table td {
    width: 75%;
    padding: 10px;
    border: 1px solid #fff;
    border-bottom: 5px solid #fff;
    position: relative;
}
table th::before,
table td::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100px;
}
table th::before {
    background: #e8c72e;
}
table td::before {
    background: #e9e9e9;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

おしゃれな表・テーブルデザイン

ここからは少しおしゃれな表・テーブルデザインをご紹介します。

見出しにアイコンを付けた表・テーブルデザイン

見出しにアイコンを付けることで何の表なのか表現することが出来るので分かりやすく、またポップな印象を与えることが出来ます。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px 10px 10px 40px;
    text-align: left;
    border: 1px solid #fff;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    position: relative;
}
table td {
    width: 75%;
    padding: 10px;
    border: 1px solid #fff;
    border-bottom: 5px solid #fff;
    position: relative;
}
table th::before,
table td::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100px;
}
table td::before {
    background: #e9e9e9;
}
table th::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}
table tr:nth-of-type(1) th::before {
    background: #3d8582;
}
table tr:nth-of-type(1) th::after {
    background-image: url(https://irodori-design-web.com/blog_image/3322/icon1.png);
}
table tr:nth-of-type(2) th::before {
    background: #B93A74;
}
table tr:nth-of-type(2) th::after {
    background-image: url(https://irodori-design-web.com/blog_image/3322/icon2.png);
}
table tr:nth-of-type(3) th::before {
    background: #e8c72e;
}
table tr:nth-of-type(3) th::after {
    background-image: url(https://irodori-design-web.com/blog_image/3322/icon3.png);
}
table tr:nth-of-type(4) th::before {
    background: #dc5a45;
}
table tr:nth-of-type(4) th::after {
    background-image: url(https://irodori-design-web.com/blog_image/3322/icon4.png);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

吹き出し風の見出しの表・テーブルデザイン

次にご紹介するのは見出しを吹き出し風にした表・テーブルデザインです。

CSSはこちら。

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    width: 25%;
    padding: 10px;
    text-align: left;
    background: #e8c72e;
    border-bottom: 2px solid #fff;
    position: relative;
}
table th::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #e8c72e;
    border-right: 0;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
}
table td {
    width: 75%;
    padding: 10px 10px 10px 20px;
    border-bottom: 2px solid #fff;
    background: #e9e9e9;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.