お問い合わせ
お問い合わせ
ホーム > HTML > table > HTMLでtableタグを用いて作成した表の位置を中央寄せにする方法

HTMLでtableタグを用いて作成した表の位置を中央寄せにする方法

HTML

このページではtableタグを用いて作成した表を中央寄せする方法について説明していきます。

フレックスボックスを用いる方法

フレックスボックスを用いて表を中央寄せするためには、まずはtableタグを囲む要素を作成し、それに対して、CSSのdisplayプロパティの値をflexにして、justify-contentの値をcenterにします。

使用例

HTML
<div class="table-wrapper">
  <table class="table-wrapper__table table">
    <caption class="table__caption">
      キャプション
    </caption>
    <thead class="table__thead thead">
      <tr class="thead__tr">
        <th scope="col" class="thead__th">テーブルヘッダー</th>
        <th scope="col" class="thead__th">テーブルヘッダー</th>
      </tr>
    </thead>
    <tbody class="table__tbody tbody">
      <tr class="tbody__tr">
        <th scope="row" class="tbody__th">テーブルヘッダー</th>
        <td scope="col" class="tbody__td">テーブルデータ</td>
      </tr>
      <tr class="tbody__tr">
        <th scope="row" class="tbody__th">テーブルヘッダー</th>
        <td scope="col" class="tbody__td">テーブルデータ</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /.table-wrapper -->

ここでは、tableタグを囲む要素に対して、「table-wrapper」クラスを付加しています。

CSS
.table-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.table {
  width: 500px;
  max-width: 600px;
  border-collapse: collapse;
}

.table__caption {
  font-weight: 700;
  margin-bottom: 5px;
}

.tbody {
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
}

.tbody__th {
  border-right: 2px solid #000;
  border-bottom: 1px solid #000;
  padding: 15px 10px;
  text-align: center;
}

.tbody__td {
  border-right: 2px solid #000;
  border-bottom: 1px solid #000;
  padding: 15px 10px;
  text-align: center;
}

.thead {
  border-left: 2px solid #000;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.thead__th {
  border: 2px solid #000;
  padding: 15px 10px;
  text-align: center;
}

marginプロパティを用いる方法

tableタグにmarginプロパティを用いることでも、表を中央寄せすることができます。

使用例

HTMLについては、上記の例と同じです。

HTML
<div class="table-wrapper">
  <table class="table-wrapper__table table">
    <caption class="table__caption">
      キャプション
    </caption>
    <thead class="table__thead thead">
      <tr class="thead__tr">
        <th scope="col" class="thead__th">テーブルヘッダー</th>
        <th scope="col" class="thead__th">テーブルヘッダー</th>
      </tr>
    </thead>
    <tbody class="table__tbody tbody">
      <tr class="tbody__tr">
        <th scope="row" class="tbody__th">テーブルヘッダー</th>
        <td scope="col" class="tbody__td">テーブルデータ</td>
      </tr>
      <tr class="tbody__tr">
        <th scope="row" class="tbody__th">テーブルヘッダー</th>
        <td scope="col" class="tbody__td">テーブルデータ</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /.table-wrapper -->

CSSでは、table要素のmarginプロパティの左右の値をautoにします。

CSS
.table-wrapper {
  padding: 20px;
}

.table-wrapper__table {
  margin: 0 auto;
}

.table {
  width: 500px;
  max-width: 600px;
  border-collapse: collapse;
}

.table__caption {
  font-weight: 700;
  margin-bottom: 5px;
}

.tbody {
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
}

.tbody__th {
  border-right: 2px solid #000;
  border-bottom: 1px solid #000;
  padding: 15px 10px;
  text-align: center;
}

.tbody__td {
  border-right: 2px solid #000;
  border-bottom: 1px solid #000;
  padding: 15px 10px;
  text-align: center;
}

.thead {
  border-left: 2px solid #000;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.thead__th {
  border: 2px solid #000;
  padding: 15px 10px;
  text-align: center;
}

実行結果

See the Pen Untitled by Yagi-System (@ihspycal-the-lessful) on CodePen.

まとめ

このように、table要素を内包する要素に対して、フレックスボックスを用いたり、table要素のmarginプロパティの左右の値をautoにすることで中央寄せすることができます。

おすすめの記事

HTMLでtableタグを用いた表の幅を設定する方法

HTMLでtableタグを用いた表にあるセルを結合する方法

HTMLのtableタグでborderプロパティを設定する方法