この記事では、個別ページで表示されるテーブルのデザイン設定について、解説しています。
テーブルデザインの設定では、「TH」「TD」などのHTML用語が出てきます。まずは、HTMLをご存じない方のために、テーブルのHTML構造から説明したいと思います。すでにご存じの方は、読み飛ばしてください。
テーブルのHTML構造について
テーブルは<table>～</table>というタグで記述します。
このタグで囲まれた「～」の部分に、行を指定する<tr>、セルを指定する<td>、ヘッダー（いわゆる見出しとなる部分）を表す<th>が記述されます。
例えば、下の画像のテーブルをHTMLで記述すると以下のようになります。
<table>
<tr>
<th>動物</th>
<th>昆虫</th>
<th>魚</th>
</tr>
<tr>
<td>いぬ</td>
<td>かぶとむし</td>
<td>ひらめ</td>
</tr>
<tr>
<td>ねこ</td>
<td>くわがた</td>
<td>さば</td>
</tr>
</table>
これらのことを踏まえて、テーブルデザインの設定を見ていきましょう。
どこで設定するの？
外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ テーブル設定（個別ページ用） で行います。
テーブルデザイン設定
テーブルデザインの設定と文字や背景などの色を選択することができます。
デザイン以外はすべて、色の設定となります。共通の設定なので先に説明しておきますね。
色の選択方法
「色を選択」をクリックすると、カラーピッカーが表示されるます。丸マークを動かし、色相や明度を決定します。次に四角マークを上下に動かし、彩度を調整します。
このやり方が面倒だなぁって思う方は、「色を選択」ボタン横の空欄に、直接カラーコードを入力することで色を指定するもできます。
デザインの設定
テーブルのデザインを「基本」「点線」から選択します。
基本（デフォルト）のイメージ
点線のイメージ
ボーダーラインが点線になります。
一部拡大したのがこちらです。
文字色を指定
指定した文字色は、<td>で記述されている部分に適用されます。
線の色を指定
テーブルの線の色を選択します。
THの背景色を指定
TH（ヘッダーセル：見出し部分）の背景色を指定します。
THの文字色を指定
TH（ヘッダーセル：見出し部分）の文字色を指定します。
TDの背景色を指定
TDの背景色を指定すると、THを除いた奇数列の背景色が指定されます。
TDの背景色（偶数列）を指定
TDの偶数列の背景色を指定します。
