HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード
HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)

HTMLタグボードトップ >> ゼロから始めるホームページ作成講座 >> 実際に作ってみよう >> 表を作成する
お問い合わせはこちら サイトマップはこちら

実際に作ってみようメニュー
1.初期設定をする
2.ファイルの新規作成
3.背景を設定する
4.文字に変化を与える
5.表を作成する
6.画像を挿入する
7.リンクを指定する
8.ファイルを保存する

表を作成する

[ ソフトで編集 ] [ 直接タグで編集 ]

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

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


表を作成してみよう

それでは、実際に表を挿入してみましょう。
ホームページビルダーを起動して初期画面を開いた状態から説明を進めます。


完成例

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


項目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」にする。

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

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

☆ココがポイント!

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

表の設定項目が担当する部分

7. セルの幅を設定する
セルの設定をする
ツールバーから属性の変更すると上のような表が作成されます。では次に、各セルの幅を設定しましょう。セルの設定画面を呼び出します。一番左上のセルが選択されていることを確認して、属性の変更ボタンを押してください。
※セルとは行と列によって区切られた一つの領域のことです。

>>続きはこちら 「実際に作ってみよう:表を作成する 2」
<< 前のページ 1 2 3 4 5 6 7 8 9 次のページ >>


画面のトップへ戻る

ゼロから始めるホームページ作成講座のトップへ

必要なものを揃えよう
伝えたい情報を考えよう
仕組みを理解しよう
実際に作ってみよう
作ったファイルを公開しよう
製作にあたり注意すべきこと
練習問題にチャレンジ!

訪問者優位のWEBデザインTipsのトップへ

インターネットで小遣い稼ぎのトップへ

今すぐ使える!便利ツールのトップへ