Html-tables
HTML-テーブル
HTMLテーブルを使用すると、Web作成者はテキスト、画像、リンク、その他のテーブルなどのデータを整理できます。 セルの行と列に。
HTMLテーブルは、 <tr> タグを使用してテーブル行を作成し、 <td> タグを使用してデータセルを作成する <table> タグを使用して作成されます。 <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_と呼ばれる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属性
2つ以上の列を単一の列にマージする場合は、 colspan 属性を使用します。 2つ以上の行をマージする場合は、同様の方法で rowspan を使用します。
例
<!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* 属性を使用して境界線の色を設定することもできます。
'_注-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>これは、次の結果を生成します-
入れ子になったテーブル
1つのテーブルを別のテーブル内で使用できます。 テーブルだけでなく、テーブルデータタグ<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>これは、次の結果を生成します-
