CSS テーブルtable主なプロパティと説明

WEB
FROG ふろっぐ
 
  • オプション

    本文印刷

    お気に入りに追加

  • 検索

    Googlewwwjp-ia
     

    Googlewwwjp-ia
     
  • 情報

  • 関連

[WEB][CSS テーブルtable主なプロパティと説明]
スタイルシート(CSS)
セレクタ基準
通常CSSはセレクタ基準(idやclass又はTAG)で記述します。これはどのセレクタにどんなプロパティを記述したかを一目で確認や修正し易い利点があります。

table.tableseiseki {
 border-collapse : separate;
 border-spacing  : 2px;
 font-size       : 100%;
 margin-bottom   : 1em;
 margin-top      : 0.8em;
 width           : 300px;
}
table.tableseiseki td {
 border-bottom   : solid 1px #999999;
 border-right    : solid 1px #999999;
 padding         : 4px 5px;
 text-align      : right;
 white-space     : nowrap;
}
table.tableseiseki tr.dark {
 background      : #cccccc;
}
table.tableseiseki tr.thin {
 background      : #FFFFFF;
}
プロパティ基準
しかしデザイナーによってはプロパティ別に記述した方が後からの修正がし易い方もいらっしゃいます。単独のセレクタを解析するにはこのプロパティ基準の方が判り易い利点があります。
/* background */ コメント 構文
table.tableseiseki tr.dark { セレクタ 対象タグ.対象class 対象タグ.対象class {
background : #cccccc プロパティと値 プロパティ:値
}
  • 「}」一連記述の区切り
  • 「;」同じセレクタで違うプロパティへの区切り 
  • 「:」値を指定
table.tableseiseki tr.thin { プロパティの説明
background : #FFFFFF プロパティ 説明
} background 背景色
画像:background-image:url('file/un_bg.gif'); ※
/* border-bottom */
table.tableseiseki td { border-bottom 線の下の部分
border-bottom : solid 1px #999999 solid 線の太さ
} 色も設定
/* border-collapse */
table.tableseiseki { border-collapse 表の枠/結合型・分離型
border-collapse : separate separate 分離
} collapseなら 結合
/* border-right */
table.tableseiseki td { 対象タグ.対象class 対象タグ
border-right : solid 1px #999999 border-right 線の右の部分
}
/* border-spacing */
table.tableseiseki {
border-spacing : 2px border-spacing セルとセルの間、間隔
}
/* font-size */
table.tableseiseki {
font-size : 100% font-size 文字の大きさ
}
/* margin-bottom */
table.tableseiseki {
margin-bottom : 1em margin-bottom 下部の要素との余白(※)
} 1em font文字の高さをを1とした相対基準単位
/* margin-top */
table.tableseiseki {
margin-top : 0.8em margin-top 上部の要素との余白(※)
}
/* padding */
table.tableseiseki td {
padding : 4px 5px padding 内部の余白(上下-左右)(※)
}
/* text-align */
table.tableseiseki td { align 揃え(右揃え中央揃え左揃え)(※)
text-align : right right 右揃え
}
/* white-space */
table.tableseiseki td {
white-space : nowrap white-space 半角スペース・タブ・改行の自動改行なし
}
/* width */
table.tableseiseki {
width : 300px width
}
marginとpaddingの違い
要素
margin
要素
padding
padding
あいうえお
padding
padding
margin
要素
1つ 上下左右全て padding : 4px
2つ 上下-左右 padding : 4px 6px
3つ 上-左右-下 padding : 4px 6px 4px
4つ 上から時計回り padding : 4px 6px 4px 6px
position top

border-top
 要素
top
 border-left left
あいうえお
right border-right 
bottom
border-bottom

right
bottom
left
text-align : left text-align : center text-align : right
vertical-align:top; vertical-align:middle; vertical-align:bottom;
white-space normal 自動改行
pre そのまま
nowrap 自動改行なし
幅と高さを指定 width
高さ height
backgroundに画像を指定する場合の注意点
background-image:url('file/un_bg.gif');
画像のアドレスはCSSファイルから起点して指定する事





Production Japan Import Application. Since 1998