TIPSWEB制作の備忘録

ホーム > WEB制作の備忘録 > コピペできるtable作成例

コピペできるtable作成例

公開：2026.03.22　

今回はtableの作成例を掲載します。
基本のHTMLとCSSはこちらです。

HTML
<table class="table-defo">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}

基本の状態を表示すると、このような状態になっています。
これをベースにカスタマイズしていきます。

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3

枠線を使ったtable

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3
HTML
<table class="table-defo table-border-all">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}
/* カスタマイズ用 */
.table-border-all th, .table-border-all td {
  border: 1px #000 solid;
}

上下の線だけ使ったtable

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3
HTML
<table class="table-defo table-border-top-bottom">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}
/* カスタマイズ用 */
.table-border-top-bottom th, .table-border-top-bottom td {
  border-top: 1px #000000 solid;
  border-bottom: 1px #000000 solid;
}

thとtdで上下の線の色を変更した

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3
HTML
<table class="table-defo table-border-top-bottom-color">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}
/* カスタマイズ用 */
.table-border-top-bottom-color th {
  border-top: 1px #000000 solid;
  border-bottom: 1px #000000 solid;
}
.table-border-top-bottom-color td {
  border-top: 1px #777 solid;
  border-bottom: 1px #777 solid;
}

背景色を使ったtable

セル同士の隙間が空くようにしています。
今回はborderではなく、「border-spacing」を使ってセルを区切りました。

共通のクラスである「.table-defo」に「border-collapse: collapse」を入れてしまったので、「border-collapse: initial」で打ち消すという面倒なことに…。
今回の場合は「.table-defo」につけている「border-collapse: collapse」は消して大丈夫です。

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3
HTML
<table class="table-defo table-background-color">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す…このページのtableに共通でつけていますが、今回の場合はこの行は消しても大丈夫です*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}
/* カスタマイズ用 */
.table-background-color {
  border-collapse: initial; /*セル同士の隙間を初期化*/
  border-spacing: 0.2rem; /*セル同士の隙間を調整*/
}
.table-background-color th, .table-background-color td {
  background-color: #fff;
}

thだけ背景色を変更

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3
HTML
<table class="table-defo table-background-color-th">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す…このページのtableに共通でつけていますが、今回の場合はこの行は消しても大丈夫です*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}
/* カスタマイズ用 */
.table-background-color-th {
  border-collapse: initial; /*セル同士の隙間を初期化*/
  border-spacing: 0 0.2rem; /*セル同士の隙間を調整*/
}
.table-background-color-th th {
  background-color: #000000;
  color: #fff;
}
.table-background-color-th td {
  background-color: #fff;
}

borderと背景色を使ったtable

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3
HTML
<table class="table-defo table-border-background-color-th">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}
/* カスタマイズ用 */
.table-border-background-color-th th, .table-border-background-color-th td {
  border: 1px #777 solid;
}
.table-border-background-color-th th {
  background-color: #000000;
  color: #fff;
}
.table-border-background-color-th td {
  background-color: #fff;
}

スマホでレイアウトを変更

横幅が575px以下の端末で見た場合、レイアウトを変更しています。
thとtdをblock要素にすることで、上にth、下にtdが配置されるようにしました。

しかし、少し注意が必要なことがありまして、もしborderでthとtdを区切っている場合、block要素にするとborderが二重に見えてしまいます。
その場合は、重なってしまうborderを「border-right:none」などで打ち消してみてください。

こちらがth こちらがtd
こちらがth2 こちらがtd2
こちらがth3 こちらがtd3
HTML
<table class="table-defo table-background-color-th table-background-color-sp">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
    </tr>
  </tbody>
</table>
CSS
.table-defo {
  width: 100%;
  text-align: left;
  border-collapse: collapse; /*セル同士の隙間を消す*/
}
.table-defo th, .table-defo td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  vertical-align: top;
}
.table-defo th {
  width: 12rem;
}
.table-defo td {
  width: calc(100% - 12rem);
}
/* カスタマイズ用 */
.table-background-color-th {
  border-collapse: initial; /*セル同士の隙間を初期化*/
  border-spacing: 0 0.2rem; /*セル同士の隙間を調整*/
}
.table-background-color-th th {
  background-color: #000000;
  color: #fff;
}
.table-background-color-th td {
  background-color: #fff;
}
/*575px以下のディスプレイで表示した場合、thを上に、tdを下に変更*/
@media screen and (max-width: 575px) {
  .table-background-color-sp {
    border-spacing: 0 0.5rem; /*セル同士の隙間を調整*/
  }
  .table-background-color-sp th, .table-background-color-sp td {
    display: block;
    width: 100%;
  }
}

まとめ

以上、tableの作成例でした！
後からカスタマイズしやすいように、シンプルに作っています。
まずはコピペで作成→制作中のページに合わせて色など変更…といったように使えればなと思います。

今回の参考サイト

HTML&CSSでなんちゃってパララックス パララックスをHTMLとCSSで作ってみる