diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/html/element/tbody/index.html | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/html/element/tbody/index.html')
| -rw-r--r-- | files/ja/web/html/element/tbody/index.html | 328 |
1 files changed, 328 insertions, 0 deletions
diff --git a/files/ja/web/html/element/tbody/index.html b/files/ja/web/html/element/tbody/index.html new file mode 100644 index 0000000000..5befbc12c6 --- /dev/null +++ b/files/ja/web/html/element/tbody/index.html @@ -0,0 +1,328 @@ +--- +title: '<tbody>: テーブル本体要素' +slug: Web/HTML/Element/tbody +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Table Body + - Table Contents + - Tables + - Web + - tbody +translation_of: Web/HTML/Element/tbody +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の表本体要素</strong> (<strong><code><tbody></code></strong>) は、表の一連の行 ({{HTMLElement("tr")}} 要素) を内包し、その部分が表 ({{HTMLELement("table")}}) の本体部分を構成することを表します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><tbody></code> 要素は、親戚である {{HTMLElement("thead")}} や {{HTMLElement("tfoot")}} と共に有用な意味的情報を提供し、画面への表示や印刷ばかりでなく、{{Glossary("accessibility", "アクセシビリティ")}}目的にも利用できます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0 個以上の {{HTMLElement("tr")}} 要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td><code><tbody></code> 要素は、 {{HTMLElement("table")}} 要素をグラフィカルに表示するにあたって必須ではない子要素です。ただし、 {{HTMLElement("table")}} 要素の子要素として {{HTMLElement("tr")}} 要素が存在する場合は配置してはいけません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("table")}} 要素。 <code><tbody></code> 要素は {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} の各要素の後に配置することができます。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{ htmlattrdef("align") }} {{deprecated_inline}}</dt> + <dd>この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値が指定可能です。 + <ul> + <li><code>left</code>: 中身をセルの左側に揃えます。</li> + <li><code>center</code>: 中身をセル内で中央揃えにします。</li> + <li><code>right</code>: 中身をセルの右側に揃えます。</li> + <li><code>justify</code>: 中身がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + <li><code>char</code>: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "tbody")}} 属性および {{htmlattrxref("charoff", "tbody")}} 属性で定義します。</li> + </ul> + + <p>この属性を設定しない場合は、値が <code>left</code> であるとみなされます。</p> + + <p>この属性は非推奨であるため、代わりに CSS の {{cssxref("text-align")}} プロパティを使用してください。</p> + + <div class="note"><strong>注: </strong><code>text-align</code> プロパティには、 <code>align="char"</code> と同等の機能がどのブラウザーでも実装されていません。 <a href="/ja/docs/Web/CSS/text-align#Browser_compatibility"><code>text-align</code> のブラウザーの互換性の節</a> で <code><string></code> の値を確認してください。</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>表の背景色です。 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進 RGB コード</a>の先頭に '<code>#</code>' をつけたものです。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>のうちの一つを利用することもできます。</p> + + <p>この属性は非推奨であり、代わりに CSS の {{cssxref("background-color")}} プロパティを使用してください。</p> + </dd> + <dt>{{ htmlattrdef("char") }} {{deprecated_inline}}</dt> + <dd> + <p>この属性は、列内のセルで揃える文字を設定します。よくある値としては、数値や金額を揃えようとするときのピリオド (.) があります。{{htmlattrxref("align", "tbody")}} 属性を <code>char</code> に設定していない場合は、この属性は無視されます。</p> + </dd> + <dt>{{ htmlattrdef("charoff") }} {{deprecated_inline}}</dt> + <dd>この属性は、 <code>char</code> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。</dd> + <dt>{{ htmlattrdef("valign") }} {{deprecated_inline}}</dt> + <dd>この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code>: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code>: テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code>: テキストをセル内の中央に置きます。</li> + <li><code>top</code>: テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <p>この属性は非推奨であり、代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。</p> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li>表に (意味的なヘッダー行を識別するために) {{HTMLElement("thead")}} ブロックがある場合、 <code><tbody></code> ブロックはその後に置く<em>必要があります</em>。</li> + <li><code><tbody></code> を使用する場合、表の行 ({{HTMLElement("tr")}} 要素) を {{HTMLElement("table")}} の直接の子として置くことはできませんが、 <code><tbody></code> の中には置くことができます。 <code><tbody></code> を使用する場合は、ヘッダーでもフッターでもない行をすべてその中に入れる必要があります。</li> + <li>文書を印刷するとき、複数のページにまたがる表では、 <code><thead></code> および {{htmlelement("tfoot")}} 要素が各ページで共通の（またはよく似た）情報を指定するのに対し、 <code><tbody></code> 要素の中身は一般に、ページごとに異なります。</li> + <li>表が (ウィンドウのような) 画面に表示される場合で、表全体を表示するのに十分な大きさがないとき、{{Glossary("user agent", "ユーザーエージェント")}}は <code><thead></code>, <code><tbody></code>, <code><tfoot></code>, {{HTMLElement("caption")}} ブロックを親である表から独立してユーザーがスクロールさせることができるようにするかもしれません。</li> + <li>連続していれば、1つの表の中に複数の <code><tbody></code> を使用することが<em>できます</em>。これにより必要に応じて、巨大な表の行を複数のセクションに分割し、個別に整形することができます。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、 <code><tbody></code> 要素の使用例を示します。このタグが使われているその他の例は、 {{ HTMLElement("table", "", "#Examples") }} の例を参照してください。</p> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>これは比較的単純な例で、学生のグループについて情報を一覧する表を {{HTMLElement("thead")}} および {{HTMLElement("tbody")}} で作成し、本体内に行番号を表示します。</p> + +<h4 id="HTML">HTML</h4> + +<p>表の HTML は下記のとおりです。なお、学生に関する情報を含む本体のセルはすべて、単一の <code><tbody></code> 要素の中に入っています。</p> + +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + <th>Major</th> + </tr> + </thead> + <tbody> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + <td>コンピューター科学</td> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + <td>ロシア文学</td> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + <td>天体物理学</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<p>表を整形する CSS を次に示します。</p> + +<pre class="brush: css notranslate">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +}</pre> + +<p>まず、表の全体的なスタイル属性を設定し、表の外枠の太さ、スタイル、色を設定し、 {{cssxref("border-collapse")}} を使用して、セル間に間隔と独自の境界線を置くのではなく、境界線が隣接セル間で共有されるようにします。 {{cssxref("font")}} は、表の初期フォントを設定するために使用されます。</p> + +<pre class="brush: css notranslate">th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +}</pre> + +<p>それから、すべてのデータセルだけでなく、 {{HTMLElement("td")}} および {{HTMLElement("th")}} のセルの間で共有されるスタイルを含む、テーブル内の大部分のセルに設定されるスタイルです。セルに対して、1ピクセルの太さで薄い灰色の輪郭、パディングの調整、すべてのセルを {{cssxref("text-align")}} を使用して左揃えにします。</p> + +<pre class="brush: css notranslate">thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> + +<p>最後に、 {{HTMLElement("thead")}} ブロックに含まれるヘッダーのセルには追加の整形を行います。より暗い {{cssxref("background-color")}} にし、大きなフォントサイズにして、下の境界線に他のセルの境界線よりも太く暗い線を引きます。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果の表は次のようになります。</p> + +<p>{{EmbedLiveSample("Basic_example", 650, 150)}}</p> + +<h3 id="Multiple_bodies" name="Multiple_bodies">複数の本体</h3> + +<p>複数の <code><tbody></code> 要素を使用することで、表内の複数のセクションを作成することができます。それぞれに独自のヘッダー行がある場合もありますが、 <em>{{HTMLElement("thead")}} は表1つあたり1つしか置けません！</em>そのため、それぞれの <code><tbody></code> にヘッダーを作成するには、 {{HTMLElement("th")}} 要素で埋められた {{HTMLElement("tr")}} を使用する必要があります。どのようにするかを見てみましょう。</p> + +<p>前回の例から、リストに数人の学生を追加し、各行に学生の専攻を書く代わりに、学生を選考でグループ化し、ヘッダー行で選考を表すように更新しましょう。</p> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>最初に、結果の表を見て、作ろうとしているものを知っておきましょう。</p> + +<p>{{EmbedLiveSample("Multiple_bodies", 650, 250)}}</p> + +<h4 id="HTML_2">HTML</h4> + +<p>修正した HTML はこのようになります。</p> + +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2">コンピューター科学</th> + </tr> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + </tr> + <tr> + <td>4077830</td> + <td>Pierce, Benjamin</td> + </tr> + <tr> + <td>5151701</td> + <td>Kirk, James</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">ロシア文学</th> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">天体物理学</th> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + </tr> + <tr> + <td>8892377</td> + <td>Toyota, Hiroko</td> + </tr> + </tbody> +</table></pre> + +<p>なお、各専攻は個別の <code><tbody></code> ブロックに配置され、最初の行に単一の {{HTMLElement("th")}} 要素に {{htmlattrxref("colspan", "th")}} 属性を付けて表の幅全体に広がるようにしています。このヘッダーが <code><tbody></code> 内の専攻の名前を示します。</p> + +<p>そして、それぞれの専攻の <code><tbody></code> で残りの行は2つのセルから成り、最初の行は学生番号で、2つ目の行は名前です。</p> + +<h4 id="CSS_2">CSS</h4> + +<div class="hidden"> +<pre class="brush: css notranslate">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +} + +th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +} + +thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> +</div> + +<p>CSS のほとんどは変更ありません。しかし、（{{HTMLElement("thead")}} に含まれるものではなく） <code><tbody></code> に直接含まれるヘッダーセルに対して、若干のスタイルを追加しましょう。これはそれぞれの専攻を示すヘッダーに使われます。</p> + +<pre class="brush: css notranslate">tbody > tr > th { + background-color: #dde; + border-bottom: 1.5px solid #bbb; + font-weight: normal; +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody 要素')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody 要素')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.tbody")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><tbody></code> 要素のスタイル設定に役立つであろう CSS プロパティと<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>: + + <ul> + <li>{{ cssxref(":nth-child") }} 擬似クラス: 列内のセルの配置を設定するため</li> + <li>{{ cssxref("text-align") }} プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるための</li> + </ul> + </li> +</ul> |