10−2.表の作成(応用編)

(補足&使い方)
表の作り方が良く解ってきた人のために、それぞれのタグをバラバラにしてみました。
まず、
タグの練習部屋 を出してから、コピーボタンでコピー貼り付けでタグを完成させてから、上手くできているか確認しながら使ってね。
タグとタグの間のスペースは、アレンジのタグの前が空いている状態、例えば(_border)と言う形でコピーされるので、あえてスペースで区切る必要はありません。
説明文のカッコ内の数字はどこのアレンジで使用できるかを示しています。例えば「(1)」なら、tableタグにのみ付けられます。
(注1)文字の太さは、100〜900の間で、100刻みに(100・200・300・・・900)指定して下さいね。また、100が一番細く、900が一番太くなります。
(注2)24〜26のタグを表のベース<table>のタグで使用した場合は表自体の位置を示す事になり、</table>以降の文字が回り込みます。例えば表を左に指定すれば文字が右に表示され、右に表を指定すれば文字が左に表示されます。中央のみ文字の回り込みはありません。そのままの表示です。
また、文字の回り込みを解除したい場合は、解除したい文字の前に<br clear="all">と書くと、タグを書いた以降の文字の回り込みを解除出来ます。
(注3)(3)で使用する場合は、セルの幅(内側の線の太さ)の数値によって、上手く表示されないことがあります。また、色については、思うような色には、ならないと思います。(黒っぽくなる)
style="〜" と言うタグを複数使う場合は、半角の ; と言う記号を使って以下の様にまとめる事が出来ます。
(例)style="color:#色" style="font-size:大きさ" style="font-weight:太さ" をまとめる
【まとめる前】
<table style="color:#" style="font-size:大きさ" style="font-weight:太さ"><tr><td>文字</td></tr></table>
【まとめた後】
<table style="color:#;font-size:大きさ;font-weight:太さ"><tr><td>文字</td></tr></table>


実線    :solid
二重線   :double
丸い点線  :dotted
四角い点線 :dashed
内沈み線  :inset
内浮き出し線:outset
山線    :ridge
谷線    :groove


枠の形をここから選んでね。
書体を選んでね。(これ以外もあります)

Terminal
Small Fonts
Arial Unicode MS
MS 明朝
MS UI Gothic
HG丸ゴシックM-PRO
HGゴシックM
HGゴシックE
HG創英角ポップ体
HG創英角ゴシックUB
ふみゴシック
HG行書体
HG祥南行書体
HG正楷書体
恋文ペン字


コピーボタンを押してコピー貼り付けで文字の部分を変えて使ってね!
(1)table(表の作成)
1:表のベース<table></table>
(2)tr(行の作成)
2:行のベース<tr></tr>
(3)th OR td{セル(列)の作成}
3:セルのベース<td>文字</td>
4:セルのベース(見出し用)<th>文字</th>
(2)+(3)セル(面倒くさい方用)
行+セル<tr><td>文字</td></tr>
行+セル(見出し用)<tr><th>文字</th></tr>
(4)アレンジのタグ
5:表に枠をつける「(1)」 border="太さ"
6:改行禁止「(3)」 nowrap
7:横のセルの連結「(3)」 colspan="連結したいセル数"
8:縦のセルの連結「(3)」 rowspan="連結したいセル数"
9:背景色の変更「(1)(2)(3)」 bgcolor="#"
10:サイズの変更「(1)(2)(3)」 width="横幅" height="縦幅"
11:背景画像の変更「(1)(2)(3)」 background="画像のURL"
12:枠の色「(1)(2)(3)」 bordercolor="#"
13:明るい部分の枠の色「(1)(2)(3)」 bordercolorlight="#"
14:影の部分の枠の色「(1)(2)(3)」 bordercolordark="#"
15:文字色「(1)(2)(3)」 style="color:#"
16:文字大きさ「(1)(2)(3)」 style="font-size:大きさ"
17:文字太さ「(1)(2)(3)」(注1) style="font-weight:太さ"
18:文字の書体「(1)(2)(3)」 style="font-family:書体名"
19:枠の形「(1)(3)」 style="border-style:枠の形"
20:枠の太さ「(1)(3)」 style="border-width:枠幅"
21:文字を上に配置「(2)(3)」 valign="top"
22:文字を中央に配置「(2)(3)」 valign="middle"
23:文字を下に配置「(2)(3)」 valign="bottom"
24:文字(表)を左に配置「(1)(2)(3)」(注2) align="left"
25:文字(表)を中央に配置「(1)(2)(3)」(注2) align="center"
26:文字(表)を右に配置「(1)(2)(3)」(注2) align="right"
27:セル同士の間隔(太さ)指定「(1)」 cellspacing="間隔数"
28:セル内の余白を指定「(1)」 cellpadding="余白数"
29:上枠幅のみ指定「(1)(3)」 style="border-top-width:太さ"
30:下枠幅のみ指定「(1)(3)」 style="border-bottom-width:太さ"
31:左枠幅のみ指定「(1)(3)」 style="border-left-width:太さ"
32:右枠幅のみ指定「(1)(3)」 style="border-right-width:太さ"
33:上枠色のみ指定「(1)(3)」(注3) style="border-top-color:#"
34:下枠色のみ指定「(1)(3)」(注3) style="border-bottom-color:#"
35:左枠色のみ指定「(1)(3)」(注3) style="border-left-color:#"
36:右枠色のみ指定「(1)(3)」(注3) style="border-right-color:#"
37:上枠の形のみ指定「(1)(3)」(注3) style="border-top-style:枠の形"
38:下枠の形のみ指定「(1)(3)」(注3) style="border-bottom-style:枠の形"
39:左枠の形のみ指定「(1)(3)」(注3) style="border-left-style:枠の形"
40:右枠の形のみ指定「(1)(3)」(注3) style="border-right-style:枠の形"



HTMLタグに戻る