表の表示

罫線なし

表示例

ソース解説

■ 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」「項目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 (テーブルの列のグループを表す)
ここでは、１行目、２行目、３行目をグループ化している例ですが、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; }」でテープの罫線を表示しています。