HTML、CSS、Bootstrapで実現！テーブル内のテキストを水平・垂直方向に自在に配置する方法

2024-04-02

HTML、CSS、Twitter Bootstrapにおけるテーブル内のテキスト配置クラス

HTML、CSS、Twitter Bootstrapを使ってテーブルを作成する際、セル内のテキストの位置を調整することは重要なデザイン要素の一つです。この調整には、text-align クラスと vertical-align クラスが使用されます。

HTMLでは、<table> タグ、<tr> タグ、<td> タグを使ってテーブルを作成します。セル内のテキストの位置を調整するには、td タグに text-align 属性または vertical-align 属性を追加します。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td align="right">25歳</td>
  </tr>
  <tr>
    <td>佐藤 花子</td>
    <td valign="bottom">30歳</td>
  </tr>
</table>

CSSでは、text-align プロパティと vertical-align プロパティを使って、セル内のテキストの位置をより詳細に制御できます。

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

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  text-align: center;
}

td.age {
  text-align: right;
}

td.bottom {
  vertical-align: bottom;
}

Twitter Bootstrapには、テーブル内のテキスト配置を調整するためのユーティリティクラスが用意されています。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td class="text-right">25歳</td>
  </tr>
  <tr>
    <td>佐藤 花子</td>
    <td class="text-bottom">30歳</td>
  </tr>
</table>

各クラスの詳細

text-align クラス

HTML、CSS、Twitter Bootstrapを使ってテーブルを作成する際、text-align クラスと vertical-align クラスを使い分けることで、セル内のテキストの位置を自由に調整することができます。これらのクラスを理解することで、より見やすく読みやすいテーブルを作成することができます。

<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqx61gVW8agRGmFQIpCyMnCxdM+ABe53n89ZvsJM1le4Qk1i170kDwjHq" crossorigin="anonymous">
</head>
<body>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>役職</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>田中 太郎</td>
        <td class="text-right">25歳</td>
        <td>営業</td>
      </tr>
      <tr>
        <td>佐藤 花子</td>
        <td class="text-center">30歳</td>
        <td>開発</td>
      </tr>
      <tr>
        <td>高橋 健太</td>
        <td><span class="text-bottom">35歳</span></td>
        <td>管理</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

上記のコードは、Bootstrap 4.5.2 を使用しています。
テーブルの各列のヘッダーは、text-align: center クラスを使って中央揃えにしています。
2行目の年齢は、text-right クラスを使って右揃えにしています。

実行結果

上記のコードを実行すると、以下の表が表示されます。

名前	年齢	役職
田中太郎	25歳	営業
佐藤花子	30歳	開発
高橋健太	35歳	管理

補足

上記のコードはあくまでサンプルです。必要に応じて、クラス名やスタイルを変更してください。

テキスト配置の他の方法

CSS margin プロパティ

margin プロパティを使って、セル内のテキストの上下左右に余白を設定することができます。

td {
  margin: 8px;
}

td.age {
  margin-right: 16px;
}

td.bottom {
  margin-bottom: 16px;
}

td {
  padding: 8px;
}

td.age {
  padding-right: 16px;
}

td.bottom {
  padding-bottom: 16px;
}

CSS flexbox を使用して、セル内のテキストを垂直方向または水平方向に中央揃えにすることができます。

td {
  display: flex;
  align-items: center;
  justify-content: center;
}

td.age {
  justify-content: flex-end;
}

td.bottom {
  align-items: flex-end;
}