テーブルのレイアウトがうまく反映されません。

Question

WordPressの固定ページの編集画面のテキストでテーブルを作成する際に色を指定しましたが、プレビュー表示でサイトを見てみると色が反映されないので、数字を表示している<th>タグに色を反映したいです。

ビジュアル画面では、指定したところに色が反映されています。
調べても解決方法にたどり着けなかったので、お手数をおかけしますがご教授をお願いいたします。

<table style="height: 350px;" border="0" width="550">
<tbody>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">1</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">A</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">2</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">B</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">3</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">C</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">4</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">D</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">5</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">E</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">6</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">F</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">7</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">G</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">8</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">H</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">9</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">I</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">10</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">J</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">11</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">K</td>
</tr>
<tr>
<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">12</th>
<td style="font-size: 120%; color: #996633;" align="center" bgcolor="#ffd3d3">L</td>
</tr>
</tbody>
</table>

〇ビジュアル画面

〇プレビュー表示

試してみたこと

履歴からキャッシュの削除を行いましたが、変化ありませんでした。

環境

ブラウザはクロームでサイトを表示しています。

Answer 1

<th style="font-size: 130%; color: #8a2930;" bgcolor="#f2b5b5">1</th> 上記コードでいうのであれば、 style="font-size: 130%; color: #8a2930;background-color:#f2b5b5"とすればstyleの設定ができそうですが、いかがでしょうか。

Comments

[xss]

King_of_Fliesさんご回答ありがとうございます。
試した結果、目的が達成できました。
本当に感謝いたします。

[King_of_Flies]

ちなみになんですが、cssができるのであれば
全てのthやtd要素にstyleを指定しなくてもcolorやfontsizeの設定を一括で指定できますよ。

[xss]

King_of_Fliesさんご返信ありがとうございます。
試してみようと思います。

アドバイス感謝いたします。

[King_of_Flies]

それとこの部分が気になったのですが、
<table style="height: 350px;" border="0" width="550">
は
<table style="height: 350px;width:550px;" border="0" >
のほうが良いと思われます・・・

[xss]

King_of_Fliesさんご指摘ありがとうございます。

修正します。
質問項目をはじめ、記述方法も勉強することが出来ました。
ありがとうございます。