検索サーチエンジンと動画リンク集byねっとねこ

テーブルを自由に作るタグ。rowspanとcolspanのタグを使う

自分の好きな形のテーブルを作るタグの紹介と説明です。基本的タグです。


自由な形のテーブルを作る!タグを使いこなそう!

テーブルを自由に作れたら、ホームページも
自由なレイアウトで作れます。
テーブルタグのオプションの rowspan と colspan を
上手に使い分けるようになろう。

1 のセル 2 のセル
3 のセル
4 のセル

これは、rowspan を使ったテーブルです。タグはこの下です。
エリア内で 右クリック→ コピー

ここで、rowspan="3" となっています。
1 のセルにまたがって、縦に 3個分のセルが並んでいます。
またがっているのは、2 3 4 のセルです。
3個分、縦にまたがっているので、1 のセルの td タグ内に
rowspan="3" と入れます。

1 のセル
2 のセル 3 のセル 4 のセル

これは、colspan を使ったテーブルです。タグはこの下です。
エリア内で 右クリック→ コピー

ここでは、colspan="3" となっています。
1 のセルにまたがって、横に 3個分のセルが並んでいます。
またがっているのは、2 3 4 のセルです。
3個分、横にまたがっているので、1 のセルの td タグ内に
colspan="3" と入れます。

1 のセル
2 のセル 3 のセル 4 のセル
5 のセル 6 のセル
7 のセル

これは、組み合わせて使ったテーブルです。タグはこの下です。
エリア内で 右クリック→ コピー

先ず、1 のセルは、横に 3つまたがっているセルがあります。
またがっているのは、2 3 4 です。
横に 3つだから、1 の td には、colspan="3" です。

続いて、2 のセルは、縦に 2つまたがっているセルがあります。
またがっているのは、5 3 です。
縦に 2つだから、2 の td には、rowspan="2" です。

7 のセルは、1 と同じです。上下は、関係ないので、
7 のセルには、2 5 6 と横に 3つまたがってるセルがあります。
横に 3つだから、7 の td には、colspan="3" と入れて、完成です。
rowspan="2" と colspan="3" を組み合わせることで、
自由な形ができます。

ホームページを作成する時に、この場合だと、
1のセルにページトップのタイトル画像なんかを入れるといいです。
2のセルには、メニューリンクを縦に並べるといいです。
3、4、5、6、には、それぞれ 文章なり、画像なりを入れます。
7のセルは、ページの末尾になります。 何か入れましょう。

1のセル 2のセル
3のセル 4のセル 5のセル
6のセル 8のセル
9のセル
10のセル
11のセル

これが、理解できれば、大丈夫です。タグはこの下です。
エリア内で 右クリック→ コピー

1のセルは、縦に 5つのまたがったセルがあります。
2 3の列 8 9 10 の 5つです。だから、rowspan="5"
2のセルは、横に 3つのまたがったセルがあります。
3 4 5 です。 横に 3つで colspan="3"
6のセルは、縦に 3つです。8 9 10 です。rowspan="3"

8と9と10のセルは、それぞれ 横に、2つまたがってます。
(これ、ちょっと、ややこしいけれど理解してね)
またがっているのは、4 5 のセルです。
だから、それぞれ colspan="2"

最後、11のセルは、横に 4つのまたがったセルがあります。
1 6 4 5 です。(3は 6と一緒に数えます)だから、colspan="4"

ホームページが表示されたときに、形が整っていると美しいです。
テーブルタグを使いこなして、このセルには、画像を入れ、
横に説明書きを添えたり、左右のセルに写真を入れて、
真ん中のセルに コメントを書く。 と、いったことも
テーブルで枠を作って、その中に入れていけば、
きれいに思い通りに表示されます。

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング