指定した範囲に背景色を付けることができます。

テキスト入力フォームに入力する際、下記記入例のように、テキスト内の装飾したい部分の前後を指定のタグではさむことで、テーブルのデザインを指定することができます。

• 使い方
• ｜
• 装飾パターンとタグ記述
• ｜
• このパーツを改造する

使い方

＜table＞タグ内のクラス指定に「カラータイプ」「テーブル幅」「テーブル内の行揃え」の組み合わせを入力して使用します。

■記入例 ---- ↓このように入力してください。

<table class="ta03_gl01 wdp100 cnt">
<tr>
<th>No,</th>
<th>会場</th>
<th>日時</th>
<th>講師</th>
<th>定員</th>
</tr>
<tr>
<td>1</td>
<td>厚生年金ホール5F</td>
<td>2007/5/23（水）</td>
<td>西田博光</td>
<td>25名</td>
</tr>
<tr class="even">　<!-- 偶数行背景色指定 -->
<td>2</td>
<td>郵便会館 会議室Ａ</td>
<td>2007/5/30（水）</td>
<td>徳山隆</td>
<td>25名</td>
</tr>
<tr>
<td>3</td>
<td>中野市民ホール</td>
<td>2007/6/3（日）</td>
<td>山口洋一郎</td>
<td>50名</td>
</tr>
<tr class="even">　<!-- 偶数行背景色指定 -->
<td>4</td>
<td>三鷹PLATS</td>
<td>2007/6/16（土）</td>
<td>西浦一</td>
<td>30名</td>
</tr>
</table>

以下の指定を組み合わせています。
※ta03_gl ＝ 「テーブルタイプ」グレー
※wdp100 ＝ テーブル幅100％　[幅の指定]へ
※cnt ＝ テーブル内をセンター揃え　[行揃えの指定]へ
※even ＝ 偶数行に色をつける

装飾パターンとタグ記述

このパーツを元にオリジナルパーツ作成する

このパーツのCSS記述をユーザーフリーエリアCSSにコピーして内容を一部変更することで、このバリエーション内に無いオリジナルパーツを作成することができます。

ユーザーフリーエリアCSSの記入方法
デザイン管理→詳細CSS設定→ユーザーフリーエリア編集をクリックすると、入力フォームのポップアップ画面が開きますので、以下の記述を貼り付けて指定部分をお好みの値に変更してください。

※クラス名（パーツの名前）に関して。
必ずクラス名（パーツの名前）を変更してください。また、名前の先頭に「u」などを付加して、既存のクラス名との重複を回避してください。クラス名が重複すると思わぬ結果になる恐れがあります。

このパーツのCSSサンプル

/* テーブル */
table.パーツ名 {
border-collapse: collapse;
}


/* 見出しセル指定（TH） */
.パーツ名 th {
margin: 0px;
padding: セルの内余白px;
border: 枠線の太さpx solid #枠線の色番号;
background: #背景色番号;
}


/* 項目セル指定（TD） */
.パーツ名 td {
margin: 0px;
padding: セルの内余白px;
border: 枠線の太さpx solid #枠線の色番号;
}


/* 偶数行色指定（TR） */
.パーツ名 .even {
background: #背景色番号;
}

赤文字の部分が変更対象箇所です。