2014年03月24日

テーブルのCSS設定、コード自動生成ツール

スポンサード リンク

 テーブル要素 CSS生成ツール
<table><th><td>要素のCSSを自動作成します。

スタイルシートでテーブルをデザイン。文字色,背景色,や枠線のプロパティ値を
変更して、色々なスタイルのテーブルを即座に生成します。それに対応する
CSSコードも出力するのでコピーして使ってください。
       表
<TABLE>
背景色  罫線: 重なり
罫線: 幅 px   色  線種  間隔 px
 見出しセル
    <TH>   
文字色 背景色 余白:上下 px  左右 px
罫線: 幅  線種
  データセル
     <TD>
文字色 背景色 余白:上下 px  左右 px
罫線: 幅 px   色  線種

Preview Table
行1-列1 行1-列2 行1-列3 行1-列4
行2-列1 行2-列2 行2-列3 行2-列4
行3-列1 行3-列2 行3-列3 行3-列4
行4-列1 行4-列2 行4-列3 行4-列4



★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

テーブル CSS
Preview Table
<TH>見出しセル 見出しセル-列2 見出しセル-列3
<TD>データセル 行2-列2 行2-列3
行3-列1 行3-列2 行3-列3

設定したプロパティがテーブルのタグ <table>,<th>,<td> で、どの様に見えるか
視認し易いように派手派手にしています。

<table>
background-color: #FFFF00;  // テーブルの背景色:黄色
border-collapse: separate;  // 枠線の重なり: 分離;
border-spacing: 15px 5px; // 枠線の間隔:"左右" "上下";
border: 15px  #C0C0C0  ridge; // 枠線:幅、色は銀色、ridgeで額縁のように ;
<th>
color: #FFFFFF; // 文字色:白色
background-color: #800080;  // 背景色:紫色
padding: 5px  7px;  // 余白:上下 左右;
border: 5px  #00FFFF  solid;  // 枠線:幅、色は水色、solidで実線;
<td>
color: #800000; // 文字色: 茶色
background-color: #FFFFFF;  // 背景色:白色
padding: 5px  7px;  // 余白:上下 左右;
border: 10px  #008000  solid;  // 枠線:幅、色は緑色、solidで実線;
border-collapse プロパティ
隣会うセルとのボーダー(枠線)の表示モデルを設定します。
border-collapse:collapse;隣接するセルの枠線を重ねて表示する。
border-collapse:separate;隣接するセルの枠線を分離して表示する。(初期値)
border-spacing プロパティ
隣接するセルのボーダー(枠線)の間隔(値は px; など)を指定します。
border-spacing:値1; "上下左右" を纏めて指定。
border-spacing:値1 値2; "左右" "上下"を分けて指定。
 このプロパティはborder-collapseの値がseparate;であれば有効です。
posted by javaScript at 23:07 | 大阪 | Webツール | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。