HTML5：TABLE要素

この順序で：任意で CAPTION 要素、0 個以上の COLGROUP 要素、任意で THEAD 要素、0 個以上の TBODY 要素または 1 個以上の TR 要素のいずれか、任意で TFOOT 要素、任意で 1 つ以上のスクリプトサポート要素と混合される。

text/htmlにおけるタグ省略

内容属性

解説

TABLE 要素は、テーブルモデルに参加する。テーブルは、行、列、およびその子孫によって与えられるセルを持つ。行と列はグリッドを形成する。テーブルのセルは完全に重複することなく、グリッドをカバーしなければならない。

例

これは、数独パズルをマークアップするために使用されているテーブルの例である。そのようなテーブルで必要のない、ヘッダーの欠如を観察する。

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>TABLE要素：テスト</TITLE>
<STYLE>
 #sudoku { border-collapse: collapse; border: solid thick; }
 #sudoku colgroup, table#sudoku tbody { border: solid medium; }
 #sudoku td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</STYLE>
</HEAD>
<BODY>
<H1>Today's Sudoku</H1>
<TABLE id="sudoku">
 <COLGROUP><COL><COL><COL>
 <COLGROUP><COL><COL><COL>
 <COLGROUP><COL><COL><COL>
 <TBODY>
  <TR> <TD> 1 <TD>   <TD> 3 <TD> 6 <TD>   <TD> 4 <TD> 7 <TD>   <TD> 9
  <TR> <TD>   <TD> 2 <TD>   <TD>   <TD> 9 <TD>   <TD>   <TD> 1 <TD>
  <TR> <TD> 7 <TD>   <TD>   <TD>   <TD>   <TD>   <TD>   <TD>   <TD> 6
 <TBODY>
  <TR> <TD> 2 <TD>   <TD> 4 <TD>   <TD> 3 <TD>   <TD> 9 <TD>   <TD> 8
  <TR> <TD>   <TD>   <TD>   <TD>   <TD>   <TD>   <TD>   <TD>   <TD>
  <TR> <TD> 5 <TD>   <TD>   <TD> 9 <TD>   <TD> 7 <TD>   <TD>   <TD> 1
 <TBODY>
  <TR> <TD> 6 <TD>   <TD>   <TD>   <TD> 5 <TD>   <TD>   <TD>   <TD> 2
  <TR> <TD>   <TD>   <TD>   <TD>   <TD> 7 <TD>   <TD>   <TD>   <TD>
  <TR> <TD> 9 <TD>   <TD>   <TD> 8 <TD>   <TD> 2 <TD>   <TD>   <TD> 5
</TABLE>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>HTML5：TABLE要素：テスト</TITLE>
<STYLE>
.Test{	/*TABLE*/
  border:1px solid red;
  border-spacing:5px;
  background-color:#fff;
}
.Test COL.C1{
  background-color:#fee;
}
.Test TH,
.Test TD{
  border:1px solid black;
}
.Test THEAD{
  background-color:#ddd;
}
.Test TBODY TH{
  background-color:#eee;
}
.Test TBODY TD{
}
.Test TFOOT{
  background-color:#ddf;
}
</STYLE>
</HEAD>
<BODY>
<TABLE class=Test>
 <CAPTION>キャプション</CAPTION>
 <CAPTION style="caption-side:bottom">下キャプション</CAPTION>
 <COL><COL class=C1>
 <THEAD><TR><TH>TH要素<TH>TH要素<TD>TD要素</THEAD>
 <TBODY>
 <TR><TH>TH<TD>TD<TD>TD
 <TR><TH>TH<TD>TD<TD>TD
 </TBODY>
 <TFOOT><TR><TH>TH要素<TH>TH要素<TD>TD要素</TFOOT>
</TABLE>
<BODY>
</HTML>

HTML5

タグ（要素）

TABLE

この要素を使用できる文脈

内容モデル

text/htmlにおけるタグ省略

内容属性

解説

例

例

スクリプト：

スクリプト：