1月7日(水)2コマ目

今日、やったこと

表(テーブル)

今日のホワイトボード

表の行と列

表を構成する行と列は

• 行は横方向
• 列は縦方向

です。 

図　表の行と列

表を作る

以下をタグを使う。

タグ	説明
<table>タグ	表の始まり、終わりを表す。 <table>タグで表が始まり、</table>タグで表が終わる。 border属性は表の罫線の幅
<tr>タグ	行の始まり、終わりを表す。 <tr>タグで行が始まり、</tr>タグで行が終わる。
<td>タグ	セルの始まり、終わりを表す。 <td>タグでセルが始まり、</td>タグでセルが終わる。

図　表を作る

下図の表を作った。

図　表のサンプル1

表1.html

表のサンプル2

下図の表を作った。

図　表のサンプル2

この表の1行目はタイトル行。

タイトル行のセルには、<td>タグではなく、<th>タグを使う。

セル	説明
<td>タグ	左寄せ、文字幅は普通
<th>タグ	中央寄せ、文字幅は太い

図　タイトル行とデータの行

表2.html

右隣のセルと結合する（ヨコ方向）

右隣のセルと結合するには、colspan属性を使う。

colspan属性には結合するセル数（自分自身も含む）を指定する。

図　右隣のセルと結合する

表3.html

表示すると以下のとおり。

図　右隣のセルと結合する　表示例

下隣のセルと結合する（タテ方向）

下隣のセルと結合するには、rowspan属性を使う。

rowspan属性には結合するセル数（自分自身も含む）を指定する。

図　下隣のセルと結合する

表4.html

表示すると以下のとおり。

図　下隣のセルと結合する　表示例

セルの結合練習

以下を作成。

図　セルの結合練習

表5.html

表示すると以下のとおり。

図　セルの結合練習　表示例

次回は

表の練習問題。

枠線、余白。