■テーブル ２
☆テーブルを作ろうNO2☆
■ テーブルアレンジ 1 ROWSPAN ■
★見本 １★
<TABLE BORDER> <TR><TD>Cell 1</TD><TD ROWSPAN=2 >Cell 2</TD><TD>Cell 3</TD></TR><TR><TD>Cell 4</TD><TD>Cell 5</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
★見本 ２★
<TABLE BORDER> <TR><TD>Cell 1</TD><TD ROWSPAN=3 >Cell 2</TD><TD>Cell 3</TD></TR><TR><TD>Cell 4</TD><TD>Cell 5</TD></TR><TR><TD>Cell 6</TD><TD>Cell 7</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
●基本の所でも書きましたが
< TABLE BORDER > だけの時は < TABLE BORDER=1 > と同じです。
★補足★
<TABLE> <TR><TD>Cell 1</TD><TD ROWSPAN=2>Cell 2</TD><TD>Cell 3</TD></TR><TR><TD>Cell 4</TD><TD>Cell 5</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
< TABLE > だけの時は < TABLE BORDER=0 > と同じです。
だから、枠は表示されませんよ～。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
★見本 ３★
<TABLE BORDER=3><TR><TD ROWSPAN=2 >Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD></TR><TR><TD>Cell 5</TD><TD>Cell 6</TD><TD>Cell 7</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
★見本 ４★
<TD>Cell 12</TD><TD>Cell 13</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
Cell 13
。。。。。。。。。。。。。。。。。。。。。。。
★結果★
ROWSPAN とは 行 を連結するために使います。
２行を１つのセルにするにはrowspan=2にします。
３行を１つのセルにするにはrowspan=3にします。
４行を１つのセルにするにはrowspan=4にします。
この様に、行は幾らでも増やす事が出来ます。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
●２列を１つのセルにした場合
★ 見本 １ ★
<TABLE BORDER=3><TR><TD>Cell 1</TD><TD COLSPAN=2 >Cell 2</TD></TR><TR><TD>Cell 3</TD><TD>Cell 4</TD><TD>Cell 5</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
★ 見本 ２ ★
<TABLE BORDER=3><TR><TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD></TR><TR><TD COLSPAN=2 >Cell 4</TD><TD>Cell 5</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
● ３列を１つのセルにした場合。
<TABLE BORDER=3> <TR><TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD></TR><TR> <TD COLSPAN=3 >Cell 4</TD></TR></TABLE>
Cell 1
Cell 2
Cell 3
Cell 4
............................................................
★結果★
今度は COLSPAN です。 列 を連結するために使います。
２列を１つのセルにするにはcolspan=2にします。
３列を１つのセルにするにはcolspan=3にします。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
<TABLE BORDER=1><TR><TD ALIGN=center ROWSPAN=2 COLSPAN=2 >AＢＣ</TD><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR><TR><TD ALIGN=center>DEF</TD><TD>GHI</TD><TD ALIGN=center COLSPAN=2>JKF</TD></TR></TABLE>
rowspan と colspan
を同時に使用しています。
２行２列を連結するとこんな感じです。
AＢＣ
1
2
3
4
DEF
GHI
JKF
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
■ 見出しを作ってみよう ■
★ 見本 １ ★
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
|
A
|
B | C |
|
D
|
E | F |
★ 見本 ２ ★
見出し1
見出し2
A
B
C
D
E
F
G
H
< TD > の代わりに < TH > を使うと見出しを作ることが出来ます。
< TH > を設定すると見出しの 文字は
太字に なり
文字は中央に 表示されます。
見本１と見本２を見比べて下さい。
見本１ではタグは大文字で書いています。
見本２ではタグは小文字で書いています。
タグをどちらで書いても同じように表示されます。
私は、その時作るものによって
< TD > タグを使わず、全て < TH > タグでテーブルを作る時があります。
文字が < B > タグを使わなくても太字になっているのと
文字が < CENTER > 設定になっているからです。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
★ 見本 １ ★
| Cell 1 | Cell 2 | Cell 3 |
★ 見本 ２ ★
| Cell 1 | Cell 2 | Cell 3 |
caption とは 表のタイトル です。
align=top でテーブルの上に表示され、
align=bottom で下に表示されます。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
★ cellpadding ★
| A | B | C |
|---|---|---|
|
D
|
E | F |
● 例 題 ●
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
例題＜CELLPADDING=20＞のタグは↓
<TABLE BORDER=5 CELLPADDING=20 CELLSPACING=0> <CAPTION ALIGN=top><font size=2><B>CELLPADDING=20</font></B></CAPTION> <TR><TD>きなこ</TD><TD>グルメ</TD></TR><TR><TD>テーブル</TD><TD>講座</TD></TR> </TABLE>
cellpaddingはセルと中の文字の間隔です。
TABLE BORDER=5にしています。
好きなサイズにしてくださいね。
数値を替える事で間隔は変わります。
注意としては、 ＜CELLPADDING＞ の数値を上げると
＜CAPTION＞ タグで書いたタイトル文字が離れていきます。
タイトル文字を外す時は、 青 の部分のタグを消して下さい。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
■ cellspacing ■
| A | B | C |
|---|---|---|
|
D
|
E | F |
● 例 題 ●
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
例題＜CELLSPACING=20＞のタグは↓
<TABLE BORDER=5 CELLPADDING=0 CELLSPACING=20 > <CAPTION ALIGN=top><font size=2>CELLSPACING=20</font></CAPTION> <TR><TD>きなこ</TD><TD>グルメ</TD></TR> <TR><TD>テーブル</TD><TD>講座</TD></TR></TABLE></TD></table>
cellspacingはセルとセルの間の間隔です。
（セルの太さという方が解かりやすいかな？）
数値を替える事で太さは変わります。
＜CAPTION＞ タグで書いたタイトル文字は
cellpadding よりも更に大きく離れていきます。
タイトル文字を外す時は、 青 の部分のタグを消して下さい。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
■ cellpadding & cellspacing ■
| A | B | C |
|---|---|---|
|
D
|
E | F |
● 例 題 ●
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
| きなこ | グルメ |
|---|---|
| テーブル | 講座 |
例題＜cellpadding=20 & cellspacing=20 ＞のタグは↓
<TABLE BORDER=5 CELLPADDING=20 CELLSPACING=20 > <CAPTION ALIGN=top><font size=2>CELLPADDING=20<br> CELLSPACING=20</font></CAPTION> < TR><TD>きなこ</TD><TD>グルメ</TD></TR> <TR><TD>テーブル</TD><TD>講座</TD></TR></TABLE>
タイトル文字を外す時は、 青 の部分のタグを消して下さい。
● こんなのも、出きるよ～ ●
color=hotpink>★タイトル文字★
○a○
○b○
○c○
○d○
○e○
○f○
color=hotpink>
★タイトル文字★
</font></td></tr><tr><td align=center bgcolor=White nowrap>○a○</td><td align=center bgcolor=White nowrap>○b○</td></tr><tr><td align=center bgcolor=White nowrap>○c○</td><td align=center bgcolor=White nowrap>○d○</td></tr><tr><td align=center bgcolor=White nowrap>○e○</td><td align=center bgcolor=White nowrap>○f○</td></tr></table>
table border=0 にして、枠線を表示していません。
枠を表示する時は、数字を入れてくださいね。
↑のタグの最初に書かれているこの部分を
<table border=0 cellpadding=4 cellspacing=4 bgcolor=pink>
↓のタグに変えて見てください。
ピンクの背景色を、画像に変えることが出来ます。
< table border=0 cellpadding=4 cellspacing=4 background="http://画像URL" >
< font color="#FFFFFF" > に変えました。
color="#FFFFFF">★タイトル文字★
○a○
○b○
○c○
○d○
○e○
○f○
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
テーブル １ ・ ３ ・ ４ ・ ５ ・ ６ ・ ７
ジャンル別一覧
人気のクチコミテーマ
-
-
- デジタル一眼レフカメラ
- ファーストカメラ
- (2025-10-13 00:13:18)
-
-
-
- 楽天アフィリエイト♪
- ［楽天市場］ 雑誌 ・ ムック ｜ Ｃ…
- (2025-11-13 20:45:15)
-
-
-
- 家電よもやま
- ROG XBOX AllyXデスクトップ環境構築…
- (2025-11-13 11:22:25)
-
© Rakuten Group, Inc.
