FC2ブログでテーブル枠が出ない

質問

FC2ブログを使用しています。

デザイン等を変更したせいなのかわかりませんが、テーブルタグを使って表のようなものを表示させようと思うのですが、枠線が表示されません。

どうしたらいいのでしょうか？

ちなみに私のブログはこれです

http://mrmiracle777.blog.fc2.com/

本当に困っているので、よろしくお願いします。

回答No.1

OS_1 · ベストアンサー

サイトのURLが公開されているのでソースを流用して回答させてください。
（不都合があれば削除依頼などしていただければ、と思います）

ブログのスタイルは↓で指定されています。
http://blog-imgs-65-origin.fc2.com/m/r/m/mrmiracle777/css/f0ba7.css

ここに、今回のご質問にあるテーブル（表）についてのスタイルも指定され、反映しています。

/*************************************************
　▼CSSリセット
*************************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;}

　　↑
この中の「table,caption,tbody,tfoot,thead,tr,th,td」が表の要素で、値が「margin:0;padding:0;border:0;outline:0;」です。

このスタイルが適用される限り、表にライン（実線）は入らないです。
また、CSSが有効な環境ではHTMLよりもCSSの指定が優先されます。

なので

<table border="1" width="510" style="margin-bottom:5px">

と書かれていても、CSSを解釈するブラウザが表示してくれるのは「width="510" style="margin-bottom:5px"」だけです・・・

指定を反映させるには、後から別のスタイルを指定するのですが、方法は
１、要素に直接指定
２、上のCSSファイルに追記
３、更に別の外部ファイルを作成
など色々あります。

たぶん１か２が簡単だと思います。
おススメは２ですけれど・・・
（個人的に、要素に直接スタイルを指定すると編集時に混乱するから）

もしテンプレで、CSSも改変不可の場合は要素に直接指定してください。

*********************************
【CSS】

/* 表 */
table.hyou_0 {
width: 510px;
border: 2px #999 solid;
text-align: left;
margin:1em 6em 0;
}

table.hyou_0 th,
table.hyou_0 td {
border: 2px #999 solid;
}

table.hyou_0 th {
backgroud-color: #f0f8ff;
}

table.hyou_0 td {
backgroud-color: #d7cefc;
}

/* 表　パターン１ */
table.hyou_1 {
width: 510px;
border: 1px #000 solid;
text-align: left;
margin:1em 6em 0;
}

table.hyou_1 th,
table.hyou_1 td {
border: 1px #999 solid;
}

table.hyou_1 th {
backgroud-color: #fccefc;
}

table.hyou_1 td {
backgroud-color: #d7cefc;
}

/* 表　パターン２（枠線が１本に見える） */
table.hyou_2 {
width: 510px;
background-color: #000;
text-align: left;
margin:1em 6em 0;
}

table.hyou_2 th {
backgroud-color: #fccefc;
}

table.hyou_2 td {
backgroud-color: #d7cefc;
}

*********************************

*********************************
【HTML】

<!-- 表 -->
<table class="hyou_0" border="2">
<tr>
<th bgcolor="#f0f8ff" align="left">
<font color="#0d365f" size="1">
プロフィール
</font>
</th>
</tr>
<tr>
<td bgcolor="#d7cefc">
<font color="#24093f">
<span style="font-size:8pt;">
プロフィール本文
</span>
</font>
</td>
</tr>
</table>

<!-- 表　パターン１ -->
<table class="hyou_1" border="1">
<tr>
<th bgcolor="#fccefc" width="180" align="left">
<font color="#5f0d5f" size="1">
Ａ
</font>
</th>
<th bgcolor="#fccefc" width="180" align="left">
<font color="#5f0d5f" size="1">
Ｂ
</font>
</th>
<th bgcolor="#fccefc" width="150" align="left">
<font color="#5f0d5f" size="1">
Ｃ
</font>
</th>
</tr>
<tr>
<td bgcolor="#faebd7" align="right" >
<font color="#0000ff" size="1">
ａ
</font>
</td>
<td bgcolor="#faebd7" align="right">
<font color="#0000ff" size="1">
ｂ
</font>
</td>
<td bgcolor="#faebd7" align="right">
<font color="#0000ff" size="1">
ｃ
</font>
</td>
</tr>
</table>

<!-- 表　パターン２ -->
<table class="hyou_2" border="1">
<tr>
<th bgcolor="#fccefc" width="180" align="left">
<font color="#5f0d5f" size="1">
ＡＡ
</font>
</th>
<th bgcolor="#fccefc" width="180" align="left">
<font color="#5f0d5f" size="1">
ＢＢ
</font>
</th>
<th bgcolor="#fccefc" width="150" align="left">
<font color="#5f0d5f" size="1">
ＣＣ
</font>
</th>
</tr>
<tr>
<td bgcolor="#faebd7" align="right" >
<font color="#0000ff" size="1">
ａａ
</font>
</td>
<td bgcolor="#faebd7" align="right">
<font color="#0000ff" size="1">
ｂｂ
</font>
</td>
<td bgcolor="#faebd7" align="right">
<font color="#0000ff" size="1">
ｃｃ
</font>
</td>
</tr>
</table>

*********************************

余談ですが、ソースを拝見させていただいたら、<span>の閉じタグ（</span>）の位置が不正確だったり、<font>の閉じタグ（</font>）が抜けているところが幾つかありました。
今回のことには関係なかった（環境によっては問題？）ですけれど、できれば修正された方がいいかな、と思います。

あと、フォームにコピペしたらインデントが無効で見づらいです・・・
ごめんなさい。
僅かでもヒントになれば幸いです。

お礼

色々と細かく書いてくださって、本当にありがとうございます。

教えて頂いたやり方を踏まえて色々と試してみますね♪

本当に本当にありがとうございます。