Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla
Your Search Results

    <table>

    概要

    HTML の table 要素(<table>)は、 2 つまたはそれ以上の次元のデータを表します。

    注意: CSS が作られる前、 HTML の  <table> 要素はしばしば、ページレイアウトの方法として用いられました。この使い方は HTML 4 から推奨されておらず、 <table> 要素はレイアウト目的に使用されるべきではありません

    使用可能な場所

    コンテンツカテゴリ フローコンテンツ
    許可された内容
    以下の順となる。
    • 任意の 1 個の <caption> 要素
    • 0 個以上の <colgroup> 要素
    • 任意の 1 個の <thead> 要素
    • 次の 2 つの選択肢から 1 つ
      • 1 個の <tfoot> 要素で、以下のものが後続する
        • 0 個以上の <tbody> 要素
        • または、 1 個以上の<tr> 要素
      • 2 つ目の選択肢は、以下のものに任意の 1 個の <tfoot> 要素が後続する
        • 0 個以上の <tbody> 要素
        • または、 0 個以上の<tr> 要素
    タグの省略 不可。開始タグと終了タグの両方が必要です。
    許可された親要素 フローコンテンツを受け入れる全ての要素。
    標準文書 HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

    属性

    他の全ての HTML 要素と同様に、この要素はグローバル属性を持ちます。

    align
    この列挙属性は、表がそれを包含する文書の中でどのように整列されなければならないかを示します。以下の値を取り得ます。
    • 表が文書の左に表示されることを意味する left
    • 表が文書の中央に表示されることを意味する center
    • 表が文書の右に表示されることを意味する right

    注意:

    • 既に非推奨とされているため、この属性を使用しないで下さい<table> 要素は CSS を使ってスタイルされるべきです。 align 属性と同様の効果を与えるためには、 text-alignvertical-align CSS プロパティを使用するべきです。【訳注: 横方向に左揃えまたは右揃えとする場合、表の位置については後方互換モード時の text-align プロパティも該当しますが、この align 属性と違って後続のテキスト等の流し込みは発生しません。テキストの流し込みまで考慮する場合、同様の結果をもたらすのは float プロパティです。表を横方向に中央揃えとする場合は、標準準拠モードでは margin-left プロパティ及び margin-right プロパティをいずれも auto にし、後方互換モードでは text-align プロパティ を center にすることで同様の結果が得られます。】
    • Firefox 4 より前には、 Firefox は、後方互換モードに限り、 middleabsmiddle、また center と同義の abscenter もサポートしていました。
    bgcolor
    この属性は、表及びそのコンテンツの背景色を定義します。値は「#」を前置した、 sRGB で定義される 6 桁の 16 進コードの 1 つです。 16 個のあらかじめ定義された色文字列から、 1 つを使用することができます。
      black = "#000000"   green = "#008000"
      silver = "#C0C0C0"   lime = "#00FF00"
      gray = "#808080"   olive = "#808000"
      white = "#FFFFFF"   yellow = "#FFFF00"
      maroon = "#800000"   navy = "#000080"
      red = "#FF0000"   blue = "#0000FF"
      purple = "#800080"   teal = "#008080"
      fuchsia = "#FF00FF"   aqua = "#00FFFF"
    使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 bgcolor 属性と同様の効果を与えるためには、 background-color CSS プロパティを使用するべきです。
    border
    この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは frame 属性が void に設定されることを意味します。
    使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 border 属性と同様の効果を与えるためには、 borderborder-colorborder-widthborder-style CSS プロパティを使用するして下さい。
    cellpadding
    この属性は、セルのコンテンツと、枠線(表示・非表示を問わない)の間の余白を定義します。もしピクセル長であれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。もしパーセント長であれば、コンテンツは中央に置かれ、全体の垂直方向(上下)の余白がこのパーセントに相当するでしょう。全体の水平方向(左右)の余白も同じです。

    使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 cellpadding 属性と同様の効果を与えるためには、 <table> 要素自身の border-collapse プロパティの値を collapse とした上で、 <td> 要素に padding プロパティを使用して下さい。
    cellspacing
    この属性は、パーセント値またはピクセル値で、水平方向と垂直方向の両方の 2 つのセルの間及び、表の上端と最初の行のセル、表の左端と最初の列、表の右端と最後の列、表の下端と最後の行の間の、余白の大きさを定義します。
    使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 cellspacing 属性と同様の効果を与えるためには、 <table> 要素自身の border-collapse プロパティの値を collapse とした上で、 <td> 要素に margin プロパティを使用して下さい。
    frame
    この列挙属性は、表を囲む枠線のどの方向が表示されなければならないかを定義します。以下の値を持つことができます。
      above   below
      hsides   vsides
      lhs   rhs
      border   box
      void
    使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。<table> 要素は CSS を使ってスタイルされるべきです。 frame 属性と同様の効果を与えるためには、 border-styleborder-width CSS プロパティを使用して下さい。
    rules
    この列挙属性は、表内のどこに罫線が引かれるべきかを定義します。以下の値を持つことができます。
    • none。罫線は表示されないことを示す、初期値です。
    • groups。 <thead> 要素や <tbody> 要素、<tfoot> 要素によって定義される行グループと、 <col> 要素や <colgroup> 要素によって定義される列グループの間にのみ、罫線が表示されます。
    • rows。行の間の罫線が表示されます。
    • columns。列の間の罫線が表示されます。
    • all。行と列の間の罫線が表示されます。
    注意:
    • 罫線のスタイリングはブラウザに依存し、変更することができません。
    • 既に非推奨とされているため、この属性を使用しないで下さい。罫線は CSS を使って定義・スタイルされるべきです。  border CSS プロパティを、適切な <thead> 要素や <tbody> 要素、 <tfoot> 要素、 <col> 要素あるいは <colgroup> 要素に使用して下さい。
    summary
    この属性は、ユーザーエージェントが表を表示することができない場合に、表を説明するための代替テキストを定義します。一般的には、目の見えない人が点字スクリーンを使ってウェブブラウズするように、視覚障がい者が表から情報を得ることができるように、表の説明を含みます。もしこの属性に追加された情報が、非視覚障がい者にとっても役に立つものである場合は、代わりとして <caption> 要素の使用を検討して下さい。 summary 属性は必須ではなく、 <caption> 要素がその役割を果たす場合は、省略することができます。

    使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。代わりに、表を説明するための以下の方法の 1 つを使って下さい。

    • 表を囲んでいる本文(表について説明することを、セマンティックに伝達する方法ではありません)。
    • 表の <caption> 要素。
    • 表の <caption> 要素内の、 <details> 要素。
    • <table> 要素を <figure> に含め、隣接した本文で説明を加える。
    • <table> 要素を <figure> に含め、隣接した <figcaption> 要素の中に本文で説明を加える。
    • 例えば <th> 要素や <thead> 要素を使うことなどで、それ以上の説明が必要無いように表を調整する。
    width
    この属性は表の幅を定義します。表が使用するべき、ピクセル長または、そのコンテナの幅の割合を表すパーセント値とすることができます。
    使用上の注意: 既に非推奨とされているため、この属性を使用しないで下さい。表は CSS を使ってスタイルされるべきです。 代わりに、 width CSS プロパティを使用して下さい。

    DOM インターフェース

    この要素は、 HTMLTableElement インターフェイスを実装しています。

    <!-- シンプルな表 -->
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>
    
    <!-- ヘッダのあるシンプルな表 -->
    <table>
      <tr>
        <th>名</th>
        <th>性</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>
    
    <!-- thead、tfoot、tbody のある表 -->
    <table>
      <thead>
        <tr>
          <th>ヘッダ 1</th>
          <th>ヘッダ 2</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>フッタ 1</td>
          <td>フッタ 2</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>内容 1</td>
          <td>内容 2</td>
        </tr>
      </tbody>
    </table>
    
    <!-- colgroup のある表 -->
    <table>
      <colgroup span="4" class="columns"></colgroup>
      <tr>
        <th>国</th>
        <th>首都</th>
        <th>人口</th>
        <th>言語</th>
      </tr>
      <tr>
        <td>アメリカ合衆国</td>
        <td>ワシントンD.C.</td>
        <td>3億9百万人</td>
        <td>英語</td>
      </tr>
      <tr>
        <td>スウェーデン</td>
        <td>ストックホルム</td>
        <td>9百万人</td>
        <td>スウェーデン語</td>
      </tr>
    </table>
    
    <!-- colgroup と col のある表 -->
    <table>
      <colgroup>
        <col class="column1">
        <col class="columns2plus3" span="2">
      </colgroup>
      <tr>
        <th>Lime</th>
        <th>Lemon</th>
        <th>Orange</th>
      </tr>
      <tr>
        <td>Green</td>
        <td>Yellow</td>
        <td>Orange</td>
      </tr>
    </table>
    
    <!-- caption のあるシンプルな表 -->
    <table>
      <caption>素晴らしいキャプション</caption>
      <tr>
        <td>素晴らしいデータ</td>
      </tr>
    </table>
    

    結果

    John Doe
    Jane Doe
    John Doe
    Jane Doe
    ヘッダ 1 ヘッダ 2
    フッタ 1 フッタ 2
    内容 1 内容 2
    首都 人口 言語
    アメリカ合衆国 ワシントンD.C. 3億9百万人 英語
    スウェーデン ストックホルム 9百万人 スウェーデン語
    Lime Lemon Orange
    Green Yellow Orange
    素晴らしいキャプション
    素晴らしいデータ

    ブラウザの互換性

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

    参照

    ドキュメントのタグと貢献者

    Contributors to this page: yyss, ethertank, sii
    最終更新者: yyss,