 |
Web技術実習 |
| 戻る〔１３．Webページのチェック〕 次へ〔１５．ほかのWebページから学ぶ〕 目次 |
|
Web技術実習 |
| 戻る〔１３．Webページのチェック〕 次へ〔１５．ほかのWebページから学ぶ〕 目次 |
表組み(table)の作成方法を学習し、自由に表が作成できるようにする。
14-1 表の作成
文字データや画像などは、一覧表の形式にすると見やすくなるケースが多い。表は列と行で設定する。
TRはTable Row、TDはTable Dataの略。
１列、１行 ２列、１行 １列、２行 ２列、２行
<TBODY>
<TR>
<TD>１列、１行</TD>
<TD>２列、１行</TD>
</TR>
<TR>
<TD>１列、２行</TD>
<TD>２列、２行</TD>
</TR>
</TBODY>
</TABLE>
<TABLE>タグのborder="1"属性は、表の枠線の太さ（ピクセル）を設定する。
実習１１ 3列、3行の表を作成する。
ファイル名は「hyou-ren1.htm」とする。ページのタイトルは「表の練習1」とする。
・表の作成
操作１ メニューバーから次のように選択する。表の挿入のダイアログが表示されるので、行数に3、列数に3の値を入力して［OK］をクリックする。
［表(A)］ → ［表の挿入(B)...］
操作２ 次の図を参考にして、各セルに文字を入力する。
文字を入力したいセルにカーソルを移動して、文字を入力する。表の大きさは、入力した文字にあわせて自動的に調整される。
操作３ ファイル名を入力して保存する。Webブラウザで、ファイルhyou-ren1.htmを閲覧して確認する。
・列と行の追加
操作４ 次図のように、1列、1行挿入する。
① カーソルを［セル2］（または［セル5］，［セル8］）に移動する。
② メニューバーから次のように選択する。
［セル2］の右側に1列追加される。
［表(A)］ → ［列の追加(C)］ → ［右へ1列追加(R)］
③ カーソルを［セル4］（または［セル5］，［セル6］）に移動する。
④ メニューバーから次のように選択する。［セル4］の下側に1行追加される。
［表(A)］ → ［行の追加(R)］ → ［下へ1行追加(B)］
・列と行の削除
操作５ 今、追加した列と行を削除する。（元の3列、3行の表に戻す）
① カーソルを［セル2］（または［セル5］，［セル8］）の右側のセルに移動する。
② メニューバーから次のように選択する。［セル2］の右側の1列が削除される。
［表(A)］ → ［列の削除(M)］
③ カーソルを［セル4］（または［セル5］，［セル6］）の下側のセルに移動する。
④ メニューバーから次のように選択する。［セル4］の下側の1行が削除される。
［表(A)］ → ［行の削除(W)］
・セルの結合
操作６ 次の図のように、セルを結合する。
① カーソルを［セル1］に移動して、メニューバーから次のように選択する。
［セル1］と［セル2］の境界線がなくなり1つのセルに結合される。
［表(A)］ → ［セルを横に結合(J)］ → ［右のセルと結合(R)］
② カーソルを［セル8］に移動して、同じように右側のセルと結合する。
［セル8］と［セル9］の境界線がなくなり1つのセルに結合される。
③ カーソルを［セル4］に移動して、メニューバーから次のように選択する。
［セル4］と［セル7］の境界線がなくなり1つのセルに結合される。
［表(A)］ → ［セルを縦に結合(I)］ → ［下のセルと結合(B)］
④ カーソルを［セル3］に移動して、同じように下側のセルと結合する。
［セル3］と［セル6］の境界線がなくなり1つのセルに結合される。
操作７ 上書き保存し、Webブラウザの更新ボタンをクリックして確認する。
・セルの分割
操作８ 今、結合したセルを分割する。
① カーソルを［セル1セル2］に移動して、メニューバーから次のように選択する。
［セル1セル2］のセルが分割される。
［表(A)］ → ［セルを横に分割(V)］
② カーソルを［セル8セル9］に移動して、同じようにセルを分割する。
［セル8セル9］のセルが分割される。
③ カーソルを［セル4セル7］に移動して、メニューバーから次のように選択する。
［セル4セル7］のセルが分割される。
［表(A)］ → ［セルを縦に分割(D)］
④ カーソルを［セル3セル6］に移動して、同じようにセルを分割する。
［セル3セル6］のセルが分割される。
操作９ 上書き保存し、Webブラウザの更新ボタンをクリックして確認する。
セル1セル2 セル3セル6 セル4セル7 セル5 セル8セル9
実習１２ 作成した表に対して、いろいろな設定を調べる。
ファイル「hyou-ren2.htm」とする。ページのタイトルは「表の練習2」とする。
操作１ 3列、3行の表を作成する。前の課題と同じように文字を入力する。
セル1 セル2 セル3 セル4 セル5 セル6 セル7 セル8 セル9
操作２ 作成した表を右クリックして表示されるメニューから［属性の変更(A)...］を選択すると、属性のダイアログが表示される。
・［表］タブ … 表全体に対する設定。
・［表の行］タブ … カーソルがあるセルの行全体に対する設定。
・［セル］タブ … カーソルがあるセルに対する設定。
・［表の列］タブ … カーソルがあるセルの列全体に対する設定。
操作３ 属性のダイアログの［表］タブをクリックして、次の設定をする。
表の幅 320 ピクセル セル内の余白 10 ピクセル 表の高さ 200 ピクセル 枠表示 5 ピクセル 罫線の幅 3 ピクセル
操作４ ファイル名を入力して保存する。Webブラウザで、ファイルhyou-ren2.htmを閲覧して確認する。
操作５ ［セル5］を右クリックして表示されるメニューから［属性の変更(A)...］を選択する。属性のダイアログの［セル］タブをクリックして、セルの幅を150ピクセル、セルの高さを80ピクセルに設定をする。
操作６ 上書き保存し、Webブラウザの更新ボタンをクリックして確認する。
実習１３ 次のような表のサンプルページを作成する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「hyou1.htm」とする。ページのタイトルは「表のサンプル1」とする。
操作１ 表のサンプル1のWebページを作成する。
操作２ 水平線を位置するには、メニューバーから次のように選択する。
［挿入(I)］ → ［水平線(Z)］
操作３ ファイル名を入力して保存する。Webブラウザで、ファイルhyou1.htmを閲覧して確認する。
操作４ サイト「Web」のWebページとして、リンクを設定する
これまでのサンプルページと同じように、トップページと相互のリンクを設定する。
リンクポイントの文字は次の通りとする。
- index.htm （トップページ）
- ① 「画像と文字のサンプル」の次の行に「表のサンプル1」と文字を入力する。
② 文字「表のサンプル1」をドラッグして選択して「hyou1.htm」にリンクを設定し、上書き保存する。- hyou1.htm
- ① 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
② 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。
操作５ 上書き保存し、Webブラウザの更新ボタンをクリックしてリンクを確認する。
| 戻る〔１３．Webページのチェック〕 次へ〔１５．ほかのWebページから学ぶ〕 目次 | |
|
| Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda | |
