表を作成する(その1)

表(テーブル)は無限の可能性

ホームページで使われる表(テーブル)は単に表として使われるだけでなく、ページ全体のレイアウトや配置、段組などにも使用され、使用頻度の高いタグとして有名です。

この表を使いこなせば、たくさんのレイアウトを表示させることができるようになります。

表を作成してみよう

それでは、実際に表を挿入してみましょう。

ホームページビルダーを起動して初期画面を開いた状態から説明を進めます。

完成例

最終的に以下のような表を作ることが目標です。

項目1 項目2
セル左寄せ セル中央(センタリング)
セル右寄せ セル背景設定

表の幅:500ピクセル、セルの幅(左列):200ピクセル、セルの幅(右列):300ピクセル
セル内の余白:3ピクセル、罫線の幅:1ピクセル、使用背景色:#999999/#b3d9ff/#ffffff/#f6f6f6、表の枠:なし

操作手順

1. 枠組みの挿入

まずは、骨格となる表を挿入します。
メニューから[表]→[表の挿入]を選ぶか、
メニュー下のツールバーから以下のアイコンをクリックしてください。

メニューから表の挿入

メニューから表、表の挿入を選ぶ。

ツールバーアイコンから表の挿入

ツールバーアイコンから表の挿入

2. 行・列の指定

すると、以下のような設定画面が出ます。上の例は3行2列の表になるので行数には「3」を、列数には「2」といれます。

表の属性は以下のようなチェック(一番下だけチェック)であることを確認して最後にOKを押してください。

表の挿入 - 行と列の指定、属性

3. 表の確認と属性の変更
表が挿入された設定が完了すると画面には以下のような表が挿入されたと思います。それでは細かな設定をしていきます。

右のような状態のまま、属性の変更画面を表示させます。

ツールバーからアイコンをクリックするか、挿入された表の上で右クリックをして「属性の変更」を押してください。

ツールバーから属性の変更

※右クリックによる属性画面の呼び出し図は省略します。

4. 表の詳細設定

表の属性画面が表示されたら、以下の部分を設定します。

(1) タが「表」であることを確認する。
(2) タが「表」であることを確認する。
(3) 表の幅を「500」にする。
(4) 罫線の幅を「1」、セル内の余白を「3」、枠表示を「0」にする。
(5) 背景色の設定を「#999999」にする。

表の詳細設定 - 表の幅、高さ、罫線、余白、枠

5. 最後にOKを押します。

表の幅や高さはピクセル、または画面長に対する割合「パーセント」でも指定ができます。
なお、上で設定する項目は表の以下の部分を担当します。適宜に変更してください。表の設定項目が担当する部分

7. セルの幅を設定する

セルの設定をする
ツールバーから属性の変更すると上のような表が作成されます。では次に、各セルの幅を設定しましょう。セルの設定画面を呼び出します。

一番左上のセルが選択されていることを確認して、属性の変更ボタンを押してください。

※セルとは行と列によって区切られた一つの領域のことです。

>>続きはこちら 「実際に作ってみよう:表を作成する 2」

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSSを優しく学ぶには

created by Rinker
¥2,178 (2020/10/04 17:18:34時点 Amazon調べ-詳細)

WordPressで簡単にブログを書いてみたい方

最新情報をチェックしよう!