HTMLのテーブルのセルを中央寄せにする方法

HTML CSS

HTMLのテーブルのセルを中央寄せにする方法

HTMLのテーブルのセルを中央寄せにする方法について説明します。
セルの中央寄せは、テーブル内のデータを視覚的に整列させるために非常に有用です。
HTMLとCSSを別々のファイルに分けて、具体的な方法とコードの例を紹介します。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルのセル中央寄せ</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th class="test-cell">ヘッダー1</th>
        <th class="test-cell">ヘッダー2</th>
        <th class="test-cell">ヘッダー3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell">データ1</td>
        <td class="test-cell">データ2</td>
        <td class="test-cell">データ3</td>
      </tr>
      <tr>
        <td class="test-cell">データ4</td>
        <td class="test-cell">データ5</td>
        <td class="test-cell">データ6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル (styles.css)

.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-cell {
  text-align: center; /* テキストを中央に寄せる */
  padding: 8px; /* セル内の余白を設定 */
  border: 1px solid #ddd; /* セルの枠線を設定 */
}

.test-table th, .test-table td {
  vertical-align: middle; /* セルの縦位置を中央に寄せる */
}

解説

1. HTMLファイル:

  • tableタグを使ってテーブルを作成し、class="test-table"を指定してCSSスタイルを適用します。
  • thead内でヘッダー行を作成し、thタグにclass="test-cell"を指定しています。
  • tbody内でデータ行を作成し、tdタグにもclass="test-cell"を指定しています。

これにより、ヘッダーとデータのセルに同じスタイルを適用します。

2. CSSファイル:

  • .test-tableクラスでテーブル全体のスタイルを設定しています。

border-collapse: collapse;を指定することで、セル間の境界線が重ならないようにします。

  • .test-cellクラスでセルのスタイルを設定しています。

text-align: center;により、テキストが水平に中央に寄せられます。
また、paddingでセル内の余白を設定し、borderでセルの枠線を指定しています。

  • .test-table th, .test-table tdでは、vertical-align: middle;を使ってセル内のテキストが縦にも中央に配置されるようにしています。

これにより、テーブルのすべてのセル内のテキストが中央に寄せられ、見た目が整います。
必要に応じて、セル内のスタイルやテーブル全体のレイアウトを調整することも可能です。