表の表示
罫線なし
表示例

ソース解説
■ HTML ファイルの作成
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>名前と説明に関係性のあるリストサンプル</title>
</head>
<body>
<h1>名前と説明に関係性のあるリストサンプル</h1>
要素:dl,dt,dd
<table>
<tbody>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
<tr>
<td>項目4</td>
<td>項目5</td>
<td>項目6</td>
</tr>
</tbody>
</table>
</body>
</html>
ファイル名「index.html」、文字コードは「UTF-8」で保存して下さい。
タグと要素の説明
<table> ~ </table>
「tableタグ」で囲まれた部分は、リストの始まりと終わりを表します。このタグの間に各項目の内容を記述します。
⇒<tbody> ~ </tbody>
「tbodyタグ」で囲まれた部分は、テーブルのブロック。
⇒⇒<tr> ~ </tr>
「trタグ」で囲まれた部分は、テーブルの行を表します。
⇒⇒⇒<td> ~ </td>
「tdタグ」で囲まれた部分は、テーブルのセルを表します。
行の中の1つのセルを表しています。
ここでは、「項目1」「項目2」「項目3」「項目4」「項目5」「項目6」がテーブルの表の中身となります。
■テーブルの構造■
table (テーブル)
│
├caption (表のタイトル)
│
├colgroup (テーブルの列のグループを表す)
├─col ()
│
├thead (表のヘッダー)
├─tr (行)
├──th (テーブルの見出しセル)
│
├tbody
├─tr (行)
├──th (見出しセル)
├──td (データセル)
│
├tfoot (表のフッター)
├─tr (行)
├──th (見出しセル)
└──td (データセル)
テーブル構造
表示例

ソース解説
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルサンプル</title>
</head>
<body>
<h1>テーブルサンプル テーブル構造</h1>
<p>要素:caption,colgroup,col,thead,tr,th,tbody,td,tfoot</p>
<table>
<caption>テーブルキャプション</caption>
<colgroup>
<col span="1"></col>
<col span="2"></col>
<col span="3"></col>
</colgroup>
<thead>
<tr>
<th>【thead_th】</th>
<th>【thead_1】</th>
<th>【thead_2】</th>
<th>【thead_3】</th>
</tr>
</thead>
<tbody>
<tr>
<th>【tbody_th】</th>
<td>【tbody_1】</td>
<td>【tbody_2】</td>
<td>【tbody_3】</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>【tfoot_th】</th>
<td>【tfoot_1】</td>
<td>【tfoot_2】</td>
<td>【tfoot_3】</td>
</tr>
</tfoot>
</table>
</body>
</html>
ファイル名「index.html」、文字コードは「UTF-8」で保存して下さい。
タグと要素の説明
<table> ~ </table>
⇒<caption> ~ </caption>
テーブルには表のタイトルを表示するcaptionがあります。
colgroupは、テーブルの列のグループを表します。
⇒<colgroup> ~ </colgroup>
(テーブルの列のグループを表す)
⇒⇒<col> ~ </col>
(グループ化の列)
colgroup (テーブルの列のグループを表す)
ここでは、1行目、2行目、3行目をグループ化している例ですが、CSSと一緒に活用するなどしますので、この章での解説は行ないません。
⇒<thead> ~ </thead>
(表のヘッダー)
⇒⇒<tr> ~ </tr>
(行)
⇒⇒⇒<th> ~ </th>
(テーブルの見出しセル)
⇒<tbody> ~ </tbody>
⇒⇒<tr> ~ </tr>
(行)
⇒⇒⇒<th> ~ </th>
(見出しセル)
⇒⇒⇒<td> ~ </th>
(データセル)
⇒<tfoot> ~ </tfoot>
(表のフッター)
⇒⇒<tr> ~ </tr>
(行)
⇒⇒⇒<th> ~ </th>
(見出しセル)
⇒⇒⇒<td> ~ </td>
(データセル)
○テーブル(table)にはテーブル名(caption)を表示できます。
○テーブル(table)の列のグループ化(colgroup)する事が出来、CSSなどで列を一括でスタイルを指定できます。、
○テーブルの表示部には、ヘッダー部(thead)とボディー部(tbody)とフッター部(tfoot)があります。
○それぞれの部分で行の定義(tr)があります。その行の中にそれぞれ見出し部(th)とがあり、さらにヘッダー部(thead)を除いたボディー部(tbody)とフッター部(tfoot)には、データ部(td)があります。
罫線を入れる
表示例

ソース解説
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルサンプル</title>
<style> table, th, tr, td { border: 1px solid; } </style>
</head>
<body>
<h1>テーブルサンプル 罫線を入れる</h1>
<p>要素:style</p>
<p>head要素の中にstyle要素を記述して罫線を表示します。</p>
<table>
<caption>テーブルキャプション</caption>
<colgroup>
<col span="1"></col>
<col span="2"></col>
<col span="3"></col>
</colgroup>
<thead>
<tr>
<th>【thead_th】</th>
<th>【thead_1】</th>
<th>【thead_2】</th>
<th>【thead_3】</th>
</tr>
</thead>
<tbody>
<tr>
<th>【tbody_th】</th>
<td>【tbody_1】</td>
<td>【tbody_2】</td>
<td>【tbody_3】</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>【tfoot_th】</th>
<td>【tfoot_1】</td>
<td>【tfoot_2】</td>
<td>【tfoot_3】</td>
</tr>
</tfoot>
</table>
</body>
</html>
ファイル名「index.html」、文字コードは「UTF-8」で保存して下さい。
タグと要素の説明
<style> ~ </style>
「styleタグ」で囲まれた部分で、表示のスタイルを指定する事が出来ます。
囲まれた「table, tr, td { border: 1px solid; }」でテープの罫線を表示しています。