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属性

表のセルの空白を調整するために使用するcellpaddingcellspacingという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で非推奨になったbgcolorbackgroundbordercolor属性。これらの属性は使用しないでください。

<!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>

これにより、次の結果が生成されます-