HTML でテーブルを上に揃える

HTML テーブルは、データで構成されるテーブル行で構成されます。このチュートリアルでは、テーブルデータを右側の上部に揃える方法を紹介します。

HTML で vertical-align および text-align CSS プロパティを使用してテーブルデータを整列する

HTML のテーブルは、行と列で構成されています。<table> タグを使用して、HTML でテーブルを作成します。<tr> タグはテーブルの行を作成するために使用され、<td> タグはテーブルのデータを入力するために使用されます。

テーブルデータが配置されているボックスは、セルとも呼ばれます。セルはテーブルの構成要素です。この記事では、テーブルデータを右側のセルの上部に配置する方法について説明します。

vertical-align および text-align CSS プロパティを使用して、テーブルデータをセルの右上に揃えます。まず、vertical-align プロパティを紹介しましょう。

プロパティは、指定された要素の垂直方向の配置を定義します。要素は、インラインまたはインラインブロック要素、さらにはテーブルセルのいずれかになります。

宿泊施設にはさまざまなオプションがあります。いくつかは、baseline、length、sub、super、top などです。プロパティのデフォルト値は baseline です。

vertical-align プロパティは、2つの異なるコンテキストで使用できます。前述のように、これを使用してインライン要素を垂直に配置できます。

もう 1つの方法は、プロパティを使用してテーブル内のセルの内容を揃えることです。この例では、後者のコンテキストについて説明します。

text-align プロパティは、指定された要素のテキストの水平方向の配置を設定します。一部のプロパティオプションには、left、right、center、justify などがあります。オプションから明らかなように、text-align プロパティを使用してテキストの位置を設定できます。

これらの 2つのプロパティを使用して、テーブルデータを右側の上部に揃えることができます。vertical-align プロパティの top オプションは、要素を最も高い要素の一番上に揃えます。

テーブルセルの場合、コンテンツはセルの境界のすぐ下に配置されます。同様に、right プロパティはテキストをセルの右側に揃えます。

たとえば、2 行 2 列のテーブルを作成します。セルには Create, Read, Update, Delete と記入します。

CSS で、table 要素の子として td 要素を選択します。セルの高さと幅を 200px に設定します。

2px solid #000 の境界線をセルに適用します。次に、vertical-align プロパティを top に設定し、text-align プロパティを right に設定します。

その結果、セルの内容はセルの境界の真下と右側に配置されます。これにより、vertical-align および text-align CSS プロパティを使用して、テーブルデータを右側の上部に揃えることができます。

サンプルコード：

<table>
 <tr>
 <td>
 Create
 </td>
 <td>
 Read
 </td>
 </tr>
 <tr>
 <td>
 Update
 </td>
 <td>
 Delete
 </td>
 </tr>
</table>

table td {
 height: 200px;
 width: 200px;
 border: 2px solid #000;
 vertical-align:top;
 text-align:right;
}