§07-02…表の作成の基本＜table＞＜tr＞＜td＞ – オンライン無料パソコン教室

以下のような表を作成する予定です。

書籍	価格	発売日
ゴルフ入門	630	3/24
経済ガイド	840	3/23
少年野球	735	3/26

(01) 表をあらわすHTMLタグは「table」タグです。tableタグで表の開始から終わりまでを指定します。Webページのbody部を以下のように更新しましょう。ただし、これだけでは意味をなしていませんが、気にしません。なお、各改行はしてもしなくても同じです。

<body>
 <h1>表の練習</h1>
 <table>
 </table>
 </body>

(02) 次に表の1行目を作成します。HTMLの表は、行単位で作成するのです。行を作成するタグは「tr」です。1行目を作成するために、以下のようにWebページを更新しましょう。

<body>
 <h1>表の練習</h1>
 <table>
 <tr>
 </tr>
 </table>
 </body>

(03) 次に、この行内に存在するセル(とセル内の文字)を「td」タグを使って指示します。最初のセルには「書籍」というテキストを入力します。以下のようにWebページを更新しましょう。

<body>
 <h1>表の練習</h1>
 <table>
 <tr>
 <td>書籍</td>
 </tr>
 </table>
 </body>

(04) 1行目にはこの後さらに、「価格」「発売日」の2セルあります。以下のようにWebページを更新しましょう。

<body>
 <h1>表の練習</h1>
 <table>
 <tr>
 <td>書籍</td><td>価格</td><td>発売日</td>
 </tr>
 </table>
 </body>

(05) 残り3行分も入力してください。

<body>
 <h1>表の練習</h1>
 <table>
 <tr>
 <td>書籍</td><td>価格</td><td>発売日</td>
 </tr>
 <tr>
 <td>ゴルフ入門</td><td>630</td><td>3/24</td>
 </tr>
 <tr>
 <td>経済ガイド</td><td>840</td><td>3/23</td>
 </tr>
 <tr>
 <td>少年野球</td><td>735</td><td>3/26</td>
 </tr>
 </table>
 </body>

(06) これで簡単な表の作成はほとんど終わりなのですが、必ずなさなければいけない作業として、「summary」属性を「table」タグに設定する作業があります。「summary」属性には、その表は一体何の表なのか、ということを端的に示すキーワードを指定します。「summary」属性の付与は、音声ブラウザーなどの為に必要です。また検索エンジン向けのキーワードにもなります。今回は「発売予定の書籍価格表」にします。以下のようにWebページの「table」タグ内を更新しましょう。

<table summary="発売予定の書籍価格表">
 <tr>
 <td>書籍</td><td>価格</td><td>発売日</td>
 </tr>
 <tr>
 <td>ゴルフ入門</td><td>630</td><td>3/24</td>
 </tr>
 <tr>
 <td>経済ガイド</td><td>840</td><td>3/23</td>
 </tr>
 <tr>
 <td>少年野球</td><td>735</td><td>3/26</td>
 </tr>
 </table>

(07) ブラウジングしましょう。罫線は設定されていませんが、気にしません。後でCSSを使い表の書式を調整します。