テーブルの基本_2

属性の基本

項 目 意 味
border="n" 外枠の太さと罫線の有無
cellspacing="n" 罫線の太さ(罫線がない場合は、セルとセルとの間隔)
cellpadding="n" 罫線とセル内のデータとの間隔
align="right" / "center" / "left" 左右の位置
valign="top" / "middle" / "bottom" 上下の位置
width="n" / "n%"
bgcolor="#xxxxxx" 背景色
nowrap セル内での文字自動改行を禁止



styleタグの説明
border=" " 線の太さ
★ 線の種類は
実線⇒solid

点線⇒dotted

破線⇒dashed

二重線⇒double
 (二重線のみ、太さ3以上で!
)


にゃんからのワンポイント(≧ω≦*)b

1. cellspacing="数字" cellpadding="数字"というタグをにゃんは結構愛用しています。
  なぜかというと、コレを使わないと表を作ったときに端から文字が始まってしますので
見づらい気がするのです。
見本
cellspacing="5"なし
見本
cellspacing="5" を使ってます。
あんまり変わらない?(*゚Q゚*)ドキィ

2. 表の幅 width=" " 表の高さheight=" "というタグを使わなくてもテーブルは作れます。
  が、すべてキレイにそろえた表を作りたい時に使うとページがすっきりとおさまると思います。




このテーブルのstyleは
style="border: 1px solid #3366FF"cellspacing="5"
style="border: 太さ px 線の種類 # ;"cellspacing=" 間隔 "
ソース(タグ)
<div align="center"><table border="0" width="400" style="border: 1px solid #3366FF; " cellspacing="5"><tr><td></td></tr></table></div>



このテーブルのstyleは
style="border: 2px dotted #00CC66; " bgcolor="#CCFFCC" cellspacing="5"
style="border: 太さ px 線の種類 # ;"bgcolor="# 背景の色 "cellspacing=" 間隔 "
ソース(タグ)
<div align="center"><table border="0" style="border: 2px dotted #00CC66; " bgcolor="#CCFFCC" cellspacing="5"><tr><td></td></tr></table></div>



このテーブルのスタイルを使わずに、
表とセルにそれぞれ色をつけてみました!
なので、線種は選べません。
<td bgcolor="#色"> というのが、セルに色をつけるタグです。
ソース(タグ)
<div align="center"><table border="0"  bgcolor="#669999" cellspacing="5" cellpadding="5"><tr><td bgcolor="#E6F4FF"></td></tr></table></div>


top




© Rakuten Group, Inc.
X
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: