11月26日(水)1コマ目
今日、やったこと
表(セルを結合)
今日のホワイトボード
表のセルを結合する
セルを作るための<td>タグや<th>タグに、rowspan属性、colspan属性を使って結合。
rowspan属性・・下のセルと結合(縦方向)
colspan属性・・右のセルと結合(横方向)
1.結合前
|
| 図 結合前の表 |
2.colspan属性で右となりのセルと結合
下図のように、"a"のセルと右となりのセルを結合。
|
| 図 ヨコ方向にセルを結合 |
①”a"のセルにcospan属性設定
指定する"2"は
"a"のセル＋右となりのセル1個
の合計の２。
表示すると下図のようになる。
|
| 図 colspanでセルを結合 |
2行目は4列分のセルになるため、右側からはみ出す。
②はみ出すセルを削除
表示すると下図のようになる。
|
| 図 はみ出すセルを削除 |
3.rowspan属性で下となりのセルと結合
下図のように、"c"のセルと下のセル2つを結合。
|
| 図 タテ方向にセルを結合 |
①"c"のセルにrowspan属性設定
指定する"3"は
"c"のセル＋下となりのセル2個
の合計の３。
表示すると、下図のようになる。
|
| 図 rowspanでセルを結合 |
3行目、4行目は上から"c"のセルが伸びてくるので、右にはみ出す。
②はみ出すセルを削除
表示すると、下図のようになる。
|
| 図 はみ出すセルを削除 |
練習問題
正解例をあげておきます。
練習1
練習2
練習3
練習4
練習5
練習6
練習7
練習8
練習9(おまけ)
以下の表を作ってください。
|
| 図 練習問題9(おまけ) |
2行目は1行目から伸びてくるセルだけ。
<tr>タグで2行目を作るが、中身はなし。
リンク
リンクは
- 別ページへ移動
- 同じページ内で移動
ができる。
リンクは<a>タグで作る。
2つのページ間を行き来できるようにリンクを作った。
ページ1
2ページ目へがリンク。クリックすると、ページ2.htmlが表示される。
ページ2
2ページ目へがリンク。クリックすると、ページ2.htmlが表示される。
次回は
リンクの続き。
