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

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

スタイルシートでテーブルをデザイン。文字色,背景色,や枠線のプロパティ値を
変更して、色々なスタイルのテーブルを即座に生成します。それに対応する
CSSコードも出力するのでコピーして使ってください。

表 <TABLE>	背景色：  罫線： 重なり 分離-separate 結合-collapse
	罫線： 幅 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

HTMLコード
<table id="myTBL"> <caption>Preview Table</caption> <thead> <tr> <th>行1-列1</th> <th>行1-列2</th> <th>行1-列3</th> <th>行1-列4</th> </tr> </thead> <tbody> <tr> <td>行2-列1</td> <td>行2-列2</td> <td>行2-列3</td> <td>行2-列4</td> </tr> <tr> <td>行3-列1</td> <td>行3-列2</td> <td>行3-列3</td> <td>行3-列4</td> </tr> <tr> <td>行4-列1</td> <td>行4-列2</td> <td>行4-列3</td> <td>行4-列4</td> </tr> </tbody> </table>
HTMLコード取得

CSSコード
#myTBL{ background-color:#FFFFFF; border-collapse:separate; border-spacing:2px; border:2px #0000FF solid; } #myTBL th{ color:#FFFFFF; background-color:#800080; padding:5px 7px; border:1px #000000 solid; } #myTBL td{ color:#800000; background-color:#E0FFFF; padding:5px 7px; border:1px #008000 solid; }
CSSコード取得

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気の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;であれば有効です。

• ★月々100円（税抜）からオンラインショップを運営！
  独自SSL・高機能カート・クレジット決済が簡単導入
• コロリポプラン　詳細はこちら
• WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
• 文字の色,背景色の色の組み合わせのチェック
• Web Safeカラー 216色
• テーブル クリックしたセルの行位置,列位置,内容の取得
• HTML テーブル( 表 ) の作成。
• CSS でヘッダ固定、データ行を スクロールさせるテーブル
• colgroup 要素 表の列をグループ化
• Table cellIndexプロパティ、セルのインデックス値の取得
• テーブル border-collapseプロパティ CSS
• テーブルの罫線
• table-layoutプロパティ CSS テーブル
• HTML DOM Table rows,cellsコレクション
• テーブル table のセルを結合します。
• 表 table のセル内で行を自動改行させない
• テーブルの表題を固定してデータ部分だけをスクロールさせる。
• テーブルの行の背景色を一行おきに変えます。 javascript
• テーブルの行の文字色,背景色を変えてハイライトします。
• javascript テーブル 列の背景色 変更 cellIndexプロパティ
• テーブルの行とセルをCSSだけでハイライト
• tableの行,列を 追加,削除 javascript