HTMLパート25の学習:HTMLテーブルでの幅と高さの属性の使用
HTMLの学習資料を以前に読んだことがある人は、もちろん、幅と高さの属性に精通しています。
これら2つの属性の適用は、HTMLテーブルに限定されるだけでなく、画像などのHTMLのコンテンツのサイズを設定するためにも使用されます。
まだ作り方がわからない方へHTMLテーブルとHTMLテーブルで一般的に使用される属性については、この記事に進む前に、以前の記事を見て理解を深めることができます。
一般的に、幅と高さの属性の適用<table>タグはHTML4.01でのみサポートされ、HTML5ではサポートされません。それでも、学習として<table>タグで両方の属性を使用する方法も知っておく必要があります。ここで、これら2つの属性の使用方法の詳細については、以下の説明をご覧ください。
幅属性
テーブルの幅属性は、テーブルの幅を決定します。 width属性を使用してテーブルの幅を設定しない場合、テーブルの幅はデータの表示に必要な幅と一致します。 width属性の構文は次のとおりです。
<table width="pixel atau %">
width属性には、次の2つの値を適用できます。
価値 | 機能 |
ピクセル(px) | ピクセル単位で幅を設定します。例:400pxまたは400のみ |
パーセント(%) | 幅を周囲の要素のパーセントで設定します。例:30% |
次に、コードを記述し、HTMLでwidth属性を使用する例を示します。
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Width di HTML</title>
</head>
<body>
<table width="400" border="2">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>
上記のコードをブラウザで実行すると、次のように表示されます。
高さ属性
テーブルの高さ属性は、テーブルの高さを決定します。 width属性と同様に、height属性を使用してテーブルの高さを設定しない場合、テーブルの高さはデータの表示に必要な高さと一致します。高さ属性の構文は次のとおりです。
<table height="pixel atau %">
height属性には、次の2つの値を適用できます。
価値 | 機能 |
ピクセル(px) | ピクセル単位で幅を設定します。例:150pxまたは150のみ |
パーセント(%) | 周囲の要素のパーセントで幅を設定します。例:10% |
次に、コードを記述してHTMLでheight属性を使用する例を示します。
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Height di HTML</title>
</head>
<body>
<table border="2" height="150">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>
上記のコードをブラウザで実行すると、次のように表示されます。
これらの2つの属性はHTML5ではサポートされていないため、テーブルの幅と高さの設定でCSSを使用することをお勧めします。 CSSの幅と高さの構文は次のとおりです。
<table style="width:400px; height:150px;">
これが、HTMLのテーブルで幅と高さの属性を使用するためのすべての資料です。うまくいけば、上記の資料をよく理解できます。