HTMLパート26の学習：HTMLテーブルでのAlignおよびValign属性の使用

HTMLテーブルの幅と高さの属性の機能について説明した以前の資料。

この議論では、私は議論します<table>タグのalign属性とvalign属性の使用方法について。また、これら2つの属性の使用はHTML4.01でのみサポートされ、HTML5ではサポートされないことも知っておく必要があります。 2つの属性の詳細については、以下の説明をご覧ください。

属性の整列

テーブルのalign属性を使用して設定しますテーブルのデータを水平に水平にする形式。 align属性は、テーブルの位置を決定する<table>タグ、またはテーブル内のテーブル（データ）の内容の位置を水平に決定する<tr>、<th>、または<td>タグで使用できます。

<table>タグで、align属性に適用できる値は次のとおりです。

左テーブルの位置を左にします（デフォルト）。
そうだねテーブルの位置を右側にします。
センター真ん中にテーブルの位置を作るために。

次に、コードの記述と<table>タグでのalign属性の使用例を示します。

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Align di HTML</title>
</head>
<body>
<table border="2" align="right">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td>3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>

上記のコードをブラウザで実行すると、次のように表示されます。

次に、データテーブルの配置を調整するために使用されるalign属性（<tr>、<th>または<td>）には、次の4つの値があります。

価値	機能
左	セルのコンテンツを左揃えにする（デフォルト）
そうだね	セルの内容を右に平らにします
センター	セルのコンテンツを中央揃えにします
正当化する	セルの内容を左右に平らにする

以下は、コードを記述し、表データを平準化するためにalign属性を使用する例です。

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Align di HTML</title>
</head>
<body>
<table border="2">
<tr>
<th>Nama Lengkap</th>
<th width="200">Nama</th>
<th>Hobi yang Paling Disukai</th>
</tr>
<tr>
<td align="center">Zakaria</td>
<td align="right">Zaka</td>
<td align="left">Futsal</td>
</tr>
</table>
</body>
</html>

上記のHTMLコードがブラウザで実行されると、次のように表示されます。

Valign属性

テーブルのvalign属性は、テーブルの配置を垂直に配置します。 valign属性は、<tr>、<th>、または<td>タグで記述され、テーブル内のテーブル（データ）の内容の位置を垂直方向に決定します。つまり、valign属性に適用できる値は4つあります。

価値	機能
上へ	セルのコンテンツをセルの上に均等に配置します
底	セルの内容をセルと同じ高さにする
真ん中	セルの中央にセルのコンテンツを作成します
ベースライン	セルに入力された最初のテキストの位置にセルの内容を作成します

次に、HTMLでのコードの記述とvalign属性の使用例を示します。

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Valign di HTML</title>
</head>
<body>
<table border="2" height="150">
<tr>
<th>No</th>
<th width="100">NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center" valign="baseline">1</td>
<td valign="top">071401001</td>
<td valign="top">Ridayanti</td>
</tr>
<tr>
<td align="center" valign="baseline">2</td>
<td valign="bottom">071401002</td>
<td valign="bottom">Ahmad Zulham</td>
</tr>
<tr>
<td align="center" valign="baseline">3</td>
<td valign="center">071401003</td>
<td valign="center">Zulaikha</td>
</tr>
</table>
</body>
</html>

上記のコードをブラウザで実行すると、次のように表示されます。