• 文字サイズ
  • 文字サイズ[小]
  • 文字サイズ[中]
  • 文字サイズ[大]

テーブルパーツ

テーブルパーツ -- 色・罫線付テーブル(単色2) --

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

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


使い方

<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>郵便会館 会議室A</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 = 偶数行に色をつける


■結果 ---- ↓このように表示されます。
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

装飾パターンとタグ記述

■グレー(1) 表記:<table class="ta03_gl01 wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

■グレー(2) 表記:<table class="ta03_gl02 wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

■ブルー(1) 表記:<table class="ta03_bl01 wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

■ブルー(2) 表記:<table class="ta03_bl02 wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

■グリーン(1) 表記:<table class="ta03_gr01 wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

■オレンジ 表記:<table class="ta03_or wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

■カーキ 表記:<table class="ta03_kh wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

■ブルーグレイ 表記:<table class="ta03_bg wdp100 cnt">
No, 会場 日時 講師 定員
1 厚生年金ホール5F 2007/5/23(水) 西田博光 25名
2 郵便会館 会議室A 2007/5/30(水) 徳山隆 25名
3 中野市民ホール 2007/6/3(日) 山口洋一郎 50名
4 三鷹PLATS 2007/6/16(土) 西浦一 30名

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

このパーツの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: #背景色番号;
}

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