テーブルのセンター揃え

テーブルのセンター揃えについてまとめてみました。

テーブル全体を中央配置する方法

サンプルコード

<table align="center">(テーブルの内容)</table>

注意する事はテーブルの横に回り込みできない事です。

テーブル中のセルの内容を中寄せする方法

■HTMLによる方法
一行(横一列)

<tr align="center" valign="middle">(一行の内容)</tr>

見出しセル

<th align="center" valign="middle">(見出しセルの内容)</th>

セル一つ

<td align="center" valign="middle">(セル一つの内容)</td>

alignにはleft(左揃え)、center(中央揃え)、right(右揃え)を指定できます。
valignにはtop(上寄せ)、middle(中央揃え)、bottom(下寄せ)、baseline(1行目のベースライン揃え)を指定できます。

■CSSによる方法
一行(横一列)セル

tr {
    text-align: center;
    vertical-align: middle;
}

見出しセル

th {
    text-align: center;
    vertical-align: middle;
}

セル一つ

td {
    text-align: center;
    vertical-align: middle;
}

広告

関連コンテンツ