WPで、表のcss/html入れ方について。分かる人には簡単だと思うのですが教えて頂けると大変助かります！

Question

質問が2つ、あります！

今、この記事の 【ココ知っトコ！】・・・の所にある表についてですが
この記事

本当は、こんな風に表示させたいです。
参照したサイト

------------------質問1------------------
全く同じ物を記事内にいれたら、
th.spec
th.specalt
この二つのbackgroundとしてしてされている三角のマークが左上についた画像は反映されたのですが、
一番上のthで背景画像として指定されている背景画像が反映されません。
コード、間違っていますでしょうか？
それとも、サイズの問題とか・・・？

▼WPの記事内に挿入したテーブルCSS/HTMLはこちらです

<style type="text/css">
#mytable {
    width:100%;
    margin:0 0 0 1px; padding:0;
    border:0;
    border-spacing:0;
    border-collapse:collapse;
}
caption {
    padding:0 0 5px 0;
    font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align:right;
}
th {
    font:bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color:#4f6b72;
    border:1px solid #c1dad7;
    letter-spacing:2px;
    text-transform:uppercase;
    text-align:left;
    padding:6px 6px 6px 12px;
    background:#cae8ea url(http://phpjavascriptroom.com/content/img/css/bg_header.jpg) no-repeat;
}
th.nobg {
    border-top:0;
    border-left:0;
    background:none;
}
td {
    border:1px solid #c1dad7;
    background:#fff;
    padding:6px 6px 6px 12px;
    color:#4f6b72;
}
td.alt {
    background:#F5FAFA;
    color:#797268;
}
th.spec {
    background:#fff url(http://phpjavascriptroom.com/content/img/css/bullet1.gif) no-repeat;
    font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
    background:#f5fafa url(http://phpjavascriptroom.com/content/img/css/bullet2.gif) no-repeat;
    font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color:#797268;
}
</style>

<table id="mytable">
<tbody>
<tr>
<th class="nobg" scope="col" abbr="Configurations">空白</th>
<th scope="col" abbr="Dual 1.8">1列目</th>
<th scope="col" abbr="Dual 2">2列目</th>
<th scope="col" abbr="Dual 2.5">3列目</th>
</tr>
<tr>
<th class="spec" scope="row" abbr="Model">1行目</th>
<td>1列目の1</td>
<td>2列目の1</td>
<td>3列目の1</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="G5 Processor">2行目</th>
<td class="alt">1列目の2</td>
<td class="alt">2列目の2</td>
<td class="alt">3列目の2</td>
</tr>
<tr>
<th class="spec" scope="row" abbr="Frontside bus">3行目</th>
<td>1列目の3</td>
<td>2列目の3</td>
<td>3列目の3</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="L2 Cache">4行目</th>
<td class="alt">1列目の4</td>
<td class="alt">2列目の4</td>
<td class="alt">3列目の4</td>
</tr>
</tbody>
</table>

------------------質問2------------------

上記と同じ表についてですが、
今、
記事編集の時点（WPでいう［テキスト］タブの所）で上記のcss/htmlをそのままワンセットでいれてて反映させている状態です。（最後に入れる表が綺麗に反映されますが、編集途中でstyle/cssの指定がなくなっちゃってシンプルになっちゃいます。）
今まで他の表を入れる時は、表の装飾等の指示をWP管理画面→テーマの編集→スタイルシート（style.css）で、表についての指示をしていたのですが、今回はなぜかそのようにしたとしてもうまく反映されません。
何か間違えているのでしょうか・・・？それとも、この表はそういう指示が難しいのでしょうか？

▼スタイルシート(style.css)に指示を入れた時、こんな風に書きました：

/* --------------------------------------------------
    sankaku Table ここからいれたもの表5つ目
-------------------------------------------------- */

table.sankaku {
    width:100%;
    margin:0 0 0 1px; padding:0;
    border:0;
    border-spacing:0;
    border-collapse:collapse;
}
table.sankaku caption {
    padding:0 0 5px 0;
    font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align:right;
}
table.sankaku th {
    font:bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color:#4f6b72;
    border:1px solid #c1dad7;
    letter-spacing:2px;
    text-transform:uppercase;
    text-align:left;
    padding:6px 6px 6px 12px;
    background:#cae8ea url(http://phpjavascriptroom.com/content/img/css/bg_header.jpg) no-repeat;
}
table.sankaku th.nobg {
    border-top:0;
    border-left:0;
    background:none;
}
table.sankaku td {
    border:1px solid #c1dad7;
    background:#fff;
    padding:6px 6px 6px 12px;
    color:#4f6b72;
}
table.sankaku td.alt {
    background:#F5FAFA;
    color:#797268;
}
table.sankaku th.spec {
    background:#fff url(http://phpjavascriptroom.com/content/img/css/bullet1.gif) no-repeat;
    font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
table.sankaku th.specalt {
    background:#f5fafa url(http://phpjavascriptroom.com/content/img/css/bullet2.gif) no-repeat;
    font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color:#797268;
}

▼スタいるシートに指示する上記のコードを入れた後、こんなhtmlを記事テキスト本文に入れました：

<table class="sankaku">
<tbody>
<tr>
<th class="nobg" scope="col" abbr="Configurations">空白</th>
<th scope="col" abbr="Dual 1.8">1列目</th>
<th scope="col" abbr="Dual 2">2列目</th>
<th scope="col" abbr="Dual 2.5">3列目</th>
</tr>
<tr>
<th class="spec" scope="row" abbr="Model">1行目</th>
<td>1列目の1</td>
<td>2列目の1</td>
<td>3列目の1</td>
</tr>
<tr>
<th class="specalt" scope="row" abbr="G5 Processor">2行目</th>
<td class="alt">1列目の2</td>
<td class="alt">2列目の2</td>
<td class="alt">3列目の2</td>
</tr>
<tr>
<th class="spec" scope="row" abbr="Frontside bus">3行目</th>
<td>1列目の3</td>
<td>2列目の3</td>
<td>3列目の3</td>
</tr>
</tbody>
</table>

～まとめ～
・参考サイトと同じ表を自社サイトに入れたいです！
コピペでそのままス変えると大変助かります！

よろしくお願い致します＞＜

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[amamiya_yaf]

ありがとうございます。編集させて頂きました。＾＾

[NatsumiOki]

トップに表とかないしなんか宣伝？かと思いました。ほんとにこのURL合っていますか？

[amamiya_yaf]

勘違いさせてしまって申し訳ございません。

ココ知っトコ！】クリニックとサロンの大きな違いは出力と痛みだった

の、表の所を指していました＾＾；

その記事にいれたら、反応しなかったので、画像キャプってしますとソースがみれない・・・って思って。そのままこの記事のurlを入れました。

内容、直しておきます。
ありがとうございます。

Answer 1

提示されているソースをそのまま私個人のWPで貼り付けてプレビューしてみましたが、見えるようです。
ということは組み方の問題ではないですね。

ひとつ確認です。style.cssには、どんな順序で記述していますか？

①よりセレクタの詳細度が高いセレクタで上書きされてしまっている
②CSSのどこかで括弧とかカンマとかセミコロンとかを間違えて消してしまっている

などのミスが考えられます。

ところで・・・
この画像、参考サイトのものを直接呼び出していますよね。
こういうのは良くありませんね。

もしこれがフリー素材なら、ダウンロードした画像を自分のサーバにアップしてそれを使いましょう。
そもそもフリー素材じゃないなら、これをそのまま使うのは著作権違反ですのでやめましょう。
自分で画像を用意するか、似たようなフリー素材を探してください。

Comments

[amamiya_yaf]

ありがとうございました＾＾
画像についても、変更できそうかやってみます！本当にありがとうございます＾＾！