A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/tbody below:

<tbody>: ãƒ†ãƒ¼ãƒ–ãƒ«æœ¬ä½“è¦ç´ - HTML | MDN

<tbody>: テーブル本体要素

Baseline Widely available *

<tbody> は HTML の要素で、表の一連の行（<tr> 要素）を内包し、その部分が表（<table>）の本体部分を構成することを表します。

試してみましょう 
<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: #fff;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

<tbody> 要素は、親戚である <thead> や <tfoot> と共に、画面やプリンターでの描画で利用できる有用な意味的情報を提供します。

コンテンツカテゴリー なし 許可されている内容 0 個以上の <tr> 要素 タグの省略 <tbody> 要素の開始タグは、<tbody> 要素の中の最初のものが <tr> 要素であり、その要素の直前に終了タグが省略された <tbody> 要素、<thead> 要素、<tfoot> 要素がない場合、省略できます。（空要素の場合は省略できません。） <tbody> 要素の終了タグは、<tbody> 要素の直後に <tbody> 要素または <tfoot> 要素が続く場合、または親要素にまだコンテンツがない場合に省略できます。 許可されている親要素 <table> 要素。 <tbody> 要素は <caption>, <colgroup>, <thead> の各要素の後に配置することができます。 暗黙の ARIA ロール rowgroup 許可されている ARIA ロール すべて DOM インターフェイス HTMLTableSectionElement 属性

この要素にはグローバル属性があります。

非推奨の属性
align 非推奨;

この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値が指定可能です。

この属性を設定しない場合は、値が left であるとみなされます。

この属性は非推奨であるため、代わりに CSS の text-align プロパティを使用してください。

メモ: text-align プロパティには、 align="char" と同等の機能がどのブラウザーでも実装されていません。 text-align のブラウザーの互換性の節 で <string> の値を確認してください。

bgcolor 非推奨;

表の背景色です。 6 桁の 16 進 RGB コードの先頭に '#' をつけたものです。定義済みの色キーワードのうちの一つを利用することもできます。

この属性は非推奨であり、代わりに CSS の background-color プロパティを使用してください。

char 非推奨;

この属性は、列内のセルで揃える文字を設定します。よくある値としては、数値や金額を揃えようとするときのピリオド (.) があります。align 属性を char に設定していない場合は、この属性は無視されます。

charoff 非推奨;

この属性は、 char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。

valign 非推奨;

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

この属性は非推奨であり、代わりに CSS の vertical-align プロパティを使用してください。

使用上のメモ 例

以下の例では、 <tbody> 要素の使用例を示します。このタグが使われているその他の例は、 <table> の例を参照してください。

基本的な例

これは比較的単純な例で、学生のグループについて情報を一覧する表を <thead> および <tbody> で作成し、本体内に行番号を表示します。

HTML

表の HTML は下記のとおりです。なお、学生に関する情報を含む本体のセルはすべて、単一の <tbody> 要素の中に入っています。

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

表を整形する CSS を次に示します。

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

まず、表の全体的なスタイル属性を設定し、表の外枠の太さ、スタイル、色を設定し、border-collapse を使用して、セル間に間隔と独自の境界線を置くのではなく、境界線が隣接セル間で共有されるようにします。font は、表の初期フォントを設定するために使用されます。

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

それから、すべてのデータセルだけでなく、<td> および <th> のセルの間で共有されるスタイルを含む、テーブル内の大部分のセルに設定されるスタイルです。セルに対して、1 ピクセルの太さで薄い灰色の輪郭、パディングの調整、すべてのセルを text-align を使用して左揃えにします。

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

最後に、<thead> ブロックに含まれるヘッダーのセルには追加の整形を行います。より暗い background-color にし、大きなフォントサイズにして、下の境界線に他のセルの境界線よりも太く暗い線を引きます。

結果

結果の表は次のようになります。

複数の本体

複数の <tbody> 要素を使用することで、表内の複数のセクションを作成することができます。それぞれに独自のヘッダー行がある場合もありますが、<thead> は表 1 つあたり 1 つしか置けません！。そのため、それぞれの <tbody> にヘッダーを作成するには、<th> 要素で埋められた <tr> を使用する必要があります。どのようにするかを見てみましょう。

前回の例から、リストに数人の学生を追加し、各行に学生の専攻を書く代わりに、学生を選考でグループ化し、ヘッダー行で選考を表すように更新しましょう。

結果

最初に、結果の表を見て、作ろうとしているものを知っておきましょう。

HTML

修正した HTML はこのようになります。

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

なお、各専攻は個別の <tbody> ブロックに配置され、最初の行に単一の <th> 要素に colspan 属性を付けて表の幅全体に広がるようにしています。このヘッダーが <tbody> 内の専攻の名前を示します。

そして、それぞれの専攻の <tbody> で残りの行は 2 つのセルから成り、最初の行は学生番号で、2 つ目の行は名前です。

CSS 
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;
}

CSS のほとんどは変更ありません。しかし、（<thead> に含まれるものではなく） <tbody> に直接含まれるヘッダーセルに対して、若干のスタイルを追加しましょう。これはそれぞれの専攻を示すヘッダーに使われます。

tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}
仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4