HTML
テーブル

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
サーチ…


前書き

HTMLの<table>要素は、Webの作成者がセルの行と列を持つ2次元テーブルに表形式のデータ（テキスト、画像、リンク、他のテーブルなど）を表示することを可能にします。

構文

  • <table></table>
  • <thead></thead>
  • <tbody></tbody>
  • <tfoot></tfoot>
  • <tr></tr>
  • <th></th>
  • <td></td>

備考

さまざまなテーブル要素とそのコンテンツ属性が合わせてテーブルモデルを定義します。 <table>要素は、表モデル/表データのコンテナ要素です。テーブルには、その子孫によって与えられた行、列、およびセルがあります。行と列はグリッドを形成します。表のセルは、重ならずにそのグリッドを完全にカバーする必要があります。以下のリストは、テーブルモデルのさまざまな要素を示しています。

  • <table> - 表モデル/表データのコンテナ要素。 <table>は、表の形式で複数の次元を持つデータを表します。
  • <caption> - 表のキャプションまたはタイトル（図のようにfigcaptionれてfigure ）
  • <col> - 列（内容なし要素）
  • <colgroup> - 列のグループ化
  • <thead> - テーブルヘッダ（1つだけ）
  • <tbody> - 表の本文/内容（複数も可）
  • <tfoot> - テーブルフッター（1つだけ）
  • <tr> - テーブル行
  • <th> - 表ヘッダーセル
  • <td> - テーブルデータセル

意味的には、表は表形式のデータを保持するためのものです。スプレッドシート（​​列と行）に意味をなさせるデータを表示および記述する方法と考えることができます。

レイアウト用にテーブルを使用することはお勧めしません。代わりに、 display: tableを含むレイアウトと書式設定にCSS規則を使用しdisplay: table 。

<table>レイアウトの使用に関して業界で一般的に表示されている顕著な例外の1つはHTMLメールです。Outlookを含む一部の電子メールクライアントは、Microsoftが独占権を失った後、古いレンダリングエンジンにロールバックします。マイクロソフトがIEをOSの一部にしないためには、Outlookのレンダリングエンジンをトライデントの以前のバージョンに単純にロールバックしました。このロールバックは現代のWebテクノロジーをサポートしていないため、HTML電子メールに<table>ベースのレイアウトを使用することは、ブラウザ/プラットフォーム/クライアントの互換性を保証する唯一の方法です。

シンプルテーブル

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

これにより、3つの合計行（ <tr> ）からなる<table>が表示されます.1行のヘッダーセル（ <th> ）と2行のコンテンツセル（ <td> ）です。 <th>要素は表形式のヘッダーであり、 <td>要素は表形式のデータです。あなたは<td>または<th>中にあなたが望むものを置くことができます。

見出し1 /見出し1 見出し2 /見出し2
行1のデータ列1 行1のデータ列2
行2データ列1 行2のデータ列2

列または行にまたがる

表のセルは、 colspanおよびrowspan属性を使用して、複数の列または行にまたがることができます。これらの属性は<th>および<td>要素に適用できます。 

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

結果は
ここに画像の説明を入力

行と列が重複しているテーブルを設計しないでください。無効なHTMLであり、異なるWebブラウザで異なる結果が処理されるためです。

rowspan =セルにまたがる行数を指定する負でない整数。この属性のデフォルト値は1です（ 1 ）。ゼロ（ 0 ）の値は、セルが現在の行からテーブルの最後の行（ <thead> 、 <tbody> 、または<tfoot> ）まで拡張されることを意味します。

colspan =現在のセルにまたがるカラム数を指定する負でない整数。この属性のデフォルト値は1です（ 1 ）。ゼロ（ 0 ）の値は、セルが定義されている列グループ<colgroup>の最後の列までセルが拡張されることを意味します。

thead、tbody、tfoot、captionのあるテーブル

HTMLは、テーブルに<thead> 、 <tbody> 、 <tfoot> 、および<caption>要素も提供します。これらの追加要素は、セマンティック値をテーブルに追加したり、個別のCSSスタイリングのための場所を提供したりするのに便利です。

1つの（紙）ページに収まらないテーブルを印刷するとき、ほとんどのブラウザはすべてのページで<thead>内容を繰り返します。

守らなければならない特定の順序があります。すべての要素が期待通りに機能しないことに注意してください。次の例は、4つの要素をどのように配置するかを示しています。 

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

次の例の結果は2回示されます。最初の表にはスタイルがなく、2番目の表にはbackground-color 、 color 、 border *のCSSプロパティがいくつか適用されています。スタイルは視覚的なガイドとして提供され、手元のトピックの本質的な側面ではありません。

表の例

表の例

素子スタイルが適用されます
<caption> 黒い背景に黄色のテキスト。
<thead> 紫色の背景に太字のテキスト。
<tbody> 青い背景のテキスト。
<tfoot> 緑の背景にテキスト。
<th> オレンジ色のボーダー。
<td> 赤いボーダー。

列グループ

列や列のグループにスタイルを適用することがあります。意味論的な目的のために、列をグループ化することもできます。これを行うには、 <colgroup> <col>要素と<col>要素を使用します。

オプションの<colgroup>タグを使用すると、列をグループ化できます。 <colgroup>要素は、 <table>子要素でなければならず、 <caption>要素の後で、表コンテンツ（例えば、 <tr> 、 <thead> 、 <tbody>など）の前に来なければなりません。 

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

オプションの<col>タグを使用すると、論理グループを適用せずに個々の列または列の範囲を参照できます。 <col>要素はオプションですが、存在する場合は<colgroup>要素の内側になければなりません。 

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

<colgroup> <col>要素と<col>要素には、次のCSSスタイルを適用できます。

  • border

  • background

  • width

  • visibility

  • display （ display: none ）

    • display: none;実際にはディスプレイから列が削除され、表がそのようなセルが存在しないかのように表示されます

詳細は、 HTML5表形式のデータを参照してください。

見出し範囲

thように表の行と列の見出しを示すのに非常によく使用されます。 

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

これは、 scope属性を使用してアクセシビリティを向上させることができます。上記の例は、次のように改訂されます。 

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scopeは、 列挙された属性として知られています 。つまり、特定の値のセットから値を持つことができます。このセットに含まれるもの：

  • col
  • row
  • colgroup
  • rowgroup

参考文献：



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow