HTMLでTableタグのセルを中央に寄せる方法

HTML CSS

HTMLでTableタグのセルを中央に寄せる方法

HTMLのtableタグでセルを中央に寄せる方法は、CSSのtext-alignとvertical-alignプロパティを使用します。
水平方向の中央揃えにはtext-align: center;を、垂直方向の中央揃えにはvertical-align: middle;を使用します。
また、tableの全体または特定のセルに対してこのスタイルを適用できます。

以下に具体的な例を示します。

HTMLファイル (table.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Table Centering Example</title>
</head>
<body>
  <table class="test-table">
    <tr>
      <th class="test-header">Header 1</th>
      <th class="test-header">Header 2</th>
      <th class="test-header">Header 3</th>
    </tr>
    <tr>
      <td class="test-cell">Cell 1</td>
      <td class="test-cell">Cell 2</td>
      <td class="test-cell">Cell 3</td>
    </tr>
    <tr>
      <td class="test-cell">Cell 4</td>
      <td class="test-cell">Cell 5</td>
      <td class="test-cell">Cell 6</td>
    </tr>
  </table>
</body>
</html>

CSSファイル (styles.css)

body {
  font-family: Arial, sans-serif;
}

.test-table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}

.test-header {
  background-color: #f2f2f2;
  text-align: center;
  padding: 10px;
}

.test-cell {
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  height: 50px;
}

説明

  • test-table: table全体のスタイルを定義しています。

width: 80%;でtableの幅をページ幅の80%に設定し、margin: 0 auto;で中央寄せしています。

  • test-header: tableのヘッダーセルに対して、text-align: center;を使用して文字を水平に中央揃えにし、padding: 10px;でセル内の余白を設定しています。
  • test-cell: データセルに対して、text-align: center;で水平中央揃え、vertical-align: middle;で垂直中央揃えを行い、padding: 10px;で余白を設定しています。

height: 50px;でセルの高さを設定することで、縦方向の中央揃えがより明確に見えるようにしています。

このように、text-alignとvertical-alignを適切に使用することで、HTML tableのセル内のコンテンツを中央に配置できます。
これにより、セルの内容が均等に配置され、視覚的にも整ったtableを作成できます。