表のセルにテキストを中央揃えする最良の方法

初心者のWebデザイナーは、テーブルセルの内部にテキストを配置する方法について質問があります。このガイドでは、数分でこのテクニックをマスターしてください。以前に試みたことがない場合でも簡単です。

入門

セルの内部にテキストをセンタリングするのは、Webページの別の要素にテキストを配置するのと同じように、CSSで行うのが最適です。しかし、始める前に、正確に何を中心にしたいかを決める必要があります。テーブルを使用すると、テーブルのすべてのセルを含むいくつかのオプションがあります。表内のすべての見出しセルは、表の先頭、表の本体または表の各セルにあります。テーブル内の特定のセルまたはセルのセットを中央に配置することもできます。

また、文書の先頭に内部スタイルシートを作成するか、外部スタイルシートとして文書に添付する必要があります。そのスタイルシートをテーブルセルの中央に配置するスタイルシートを配置します。

テーブル内のすべてのセルを中央に配置する方法

スタイルシートに次の行を追加します。

td、th {text-align：center;}

テーブル内の各ヘッダーセルを中央に揃える方法

スタイルシートに次の行を追加します。

th {text-align：center;}

テーブルヘッド、ボディーまたはフットのすべてのセルをセンタリングする

これらのセルを中央に配置するには、次のような常に使用されるわけではないテーブルタグを追加する必要があります。 , そして 。次に、表の頭、体、および足を識別するために、これらのタグで表のセルを囲みます。その後、あなたのスタイルシートに以下を追加します：

thead thad、thead td {text-align：center;}tbody th、tbody td {text-align：center;}tfoot th、tfoot td {text-align：center;}

中央に配置したくない領域のスタイルを削除します。

特定のセルを表の中にセンタリングする方法

これを行うには、中央に配置するセルのクラスを設定する必要があります。

センタリングするテーブルセルに次の属性を追加します。

class = "centered-cell" >

次に、あなたのスタイルシートに以下を追加します：

.centered-cell {text-align：center;}

このクラスは、テーブル内の任意のセルに追加できます。

ラッピング

あなたのテーブルセルのいずれかでこれらのスタイルを使用するのをためらってください。結合されたセルまたは単一のセルにそれらを使用することができ、その中のテキストが中央に配置されます。