13_CSS_stylish_table

記載者　：ペライチ大阪府サポーター　安達

記載期日：2018/8/15　

概要：見やすいテーブルをCSSで描く

https://gyazo.com/1906d6cae393647c39d0085df67729f7

<参照ページ>

【見やすいテーブルを描きたい】

ペライチで表を使おうとすると、なんだかイマイチ。

そんな時はHTML埋め込みでテーブルを作って見ましょう

「CSS」がちょっと面倒ですが。。。

（bodyタグに、CSS埋め込んで見てください）

コピペして使ってみて下さい。

code:CSS埋め込み（headタグ内の埋め込み。に入力）

<style>

.daikoPricingTable {

width:100%;

margin: 0 auto;

font-size: 16px;

}

.daikoPricingTable th,

.daikoPricingTable td {

padding: 10px;

}

.daikoPricingTable th {

font-weight: normal;

text-align: center;

}

.daikoPricingTable td {

text-align: right;

}

.daikoPricingTable th {

}

</style>

code:HTML埋め込み（HTML埋め込みブロックにて）

<table class="daikoPricingTable">

<tr>

<th>初稿納期 \ デザイン案数</th>

<th>x案</th>

<th>x案</th>

<th>x案</th>

</tr>

<th>x営業日</th>

<td>xxx円</td>

<td>xxx円</td>

<td>xxx円</td>

</tr>

<tr>

<th>x営業日</th>

<td>xxx円</td>

<td>xxx円</td>

<td>xxx円</td>

</tr>

</table>

<p style="font-size:12px; text-align:right;">※xxxx</p>

<p style="font-size:12px; text-align:right;">※xxxx</p>

<利用テンプレート>

テンプレート108番。セミナー向け。