HTML-テーブル
HTMLテーブルを使用すると、Web作成者は、テキスト、画像、リンク、その他のテーブルなどのデータをセルの行と列に配置できます。
HTMLテーブルは、 <table> タグが <tr> タグはテーブルの行を作成するために使用され、 <td>タグはデータセルを作成するために使用されます。<td>の下の要素は通常であり、デフォルトで左揃えになっています
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
ここでは、 borderは<table>タグの属性であり、すべてのセルに境界線を付けるために使用されます。境界線が必要ない場合は、border = "0"を使用できます。
表の見出し
表の見出しは、次を使用して定義できます。 <th>鬼ごっこ。このタグは、実際のデータセルを表すために使用される<td>タグの代わりに配置されます。通常、以下に示すように、一番上の行をテーブル見出しとして配置します。それ以外の場合は、任意の行で<th>要素を使用できます。<th>タグで定義されている見出しは、デフォルトで中央に配置され、太字になっています。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
CellpaddingおよびCellspacing属性
表のセルの空白を調整するために使用するcellpaddingとcellspacingという2つの属性があります。cellspacing属性はテーブルセル間のスペースを定義し、cellpaddingはセルの境界とセル内のコンテンツ間の距離を表します。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
ColspanおよびRowspan属性
使用します colspan2つ以上の列を1つの列にマージする場合は属性。同様の方法で使用しますrowspan 2つ以上の行をマージする場合。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
テーブルの背景
次の2つの方法のいずれかを使用してテーブルの背景を設定できます-
bgcolor 属性-テーブル全体または1つのセルのみの背景色を設定できます。
background 属性-テーブル全体または1つのセルのみに背景画像を設定できます。
を使用して境界線の色を設定することもできます bordercolor 属性。
Note− HTML5で非推奨になったbgcolor、background、bordercolor属性。これらの属性は使用しないでください。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
これが使用例です background属性。ここでは、/ imagesディレクトリにある画像を使用します。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>これにより、次の結果が得られます。ここでは、背景画像はテーブルのヘッダーには適用されませんでした。
テーブルの高さと幅
テーブルの幅と高さは、を使用して設定できます width そして height属性。テーブルの幅または高さは、ピクセルまたは使用可能な画面領域のパーセンテージで指定できます。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
テーブルキャプション
ザ・ captionタグはテーブルのタイトルまたは説明として機能し、テーブルの上部に表示されます。このタグは、新しいバージョンのHTML / XHTMLでは非推奨です。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-
テーブルヘッダー、本文、およびフッター
テーブルは、ヘッダー、本体、および脚の3つの部分に分けることができます。頭と足は、単語処理されたドキュメントのヘッダーとフッターにかなり似ており、すべてのページで同じままですが、本文はテーブルの主要なコンテンツホルダーです。
テーブルの頭、体、足を分離するための3つの要素は次のとおりです。
<thead> −個別のテーブルヘッダーを作成します。
<tbody> −テーブルの本体を示します。
<tfoot> −個別のテーブルフッターを作成します。
テーブルには、さまざまなページまたはデータのグループを示すために、いくつかの<tbody>要素が含まれる場合があります。ただし、<thead>タグと<tfoot>タグは<tbody>の前に表示する必要があることに注意してください。
例
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>これにより、次の結果が生成されます-
ネストされたテーブル
あるテーブルを別のテーブル内で使用できます。テーブルだけでなく、テーブルデータタグ<td>内のほぼすべてのタグを使用できます。
例
以下は、テーブルセル内で別のテーブルと他のタグを使用する例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>これにより、次の結果が生成されます-