Html-tables

提供：Dev Guides
移動先:案内、検索

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>

これは、次の結果を生成します-

「https://www.finddevguides.com/index.php?title=Html-tables&oldid=18799」から取得
Powered by MediaWiki