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のテーブルで幅と高さの属性を使用するためのすべての資料です。うまくいけば、上記の資料をよく理解できます。

</ p>
</ p>

</記事>
コメント 0
</ main>
</ div>