ん〜っ、いろいろ考えたんですがやっぱりわからないんです。
という訳で、久しぶりに「誰か教えて」シリーズです。
今回はテーブルの書き方なのですが、今やろうとしているのはスタイルシート（CSS）を使ってテーブルを書こうと思っているのです。
で、完成形はこうしたいのです。
| 10月ネット収入 | |||
| 10/10 | Yahoo!リサーチ | 現金 | 260円 |
| 合計 260円 | |||
けれど、実際に自分が作ったスタイルシートを当てるとこうなってしまうんです。
| 10月ネット収入 | |||
| 10/10 | Yahoo!リサーチ | 現金 | 260円 |
| 合計 260円 | |||
tableタグのソースはこれです。
<!--＊ ネット収入表 ＊-->
<div id="net-income">
<table cellpadding="5" summary="net-income" ><tbody>
<tr>
<td style="background:#73d7aa;color:#ffffff;height:35px"
colspan="4">10月ネット収入</td>
</tr>
<tr>
<td style="width:50px">10/10</td>
<td style="width:150px"><a target="_blank" href="http:
//research.yahoo.co.jp/">Yahoo!リサーチ</a></td>
<td style="width:100px">現金</td>
<td style="width:100px">260円</td>
</tr>
<tr>
<td style="background:#73d7aa;color:#ffffff;text-align:right" colspan="4">合計 260円</td>
</tr>
</tbody></table>
</div>
<!--＊ ネット収入表終わり ＊-->
<div id="net-income">
<table cellpadding="5" summary="net-income" ><tbody>
<tr>
<td style="background:#73d7aa;color:#ffffff;height:35px"
colspan="4">10月ネット収入</td>
</tr>
<tr>
<td style="width:50px">10/10</td>
<td style="width:150px"><a target="_blank" href="http:
//research.yahoo.co.jp/">Yahoo!リサーチ</a></td>
<td style="width:100px">現金</td>
<td style="width:100px">260円</td>
</tr>
<tr>
<td style="background:#73d7aa;color:#ffffff;text-align:right" colspan="4">合計 260円</td>
</tr>
</tbody></table>
</div>
<!--＊ ネット収入表終わり ＊-->
スタイルシートの中身はこんな感じです。
/* ネット収入テーブルのスタイル */
#net-income {
text-align: center; /* 配置 */
font-weight: normal; /* フォントの太さ */
font-size: 13px; /* フォントサイズ */
color:#555555;/* フォントの色 */
background-color: #ffffff; /* 背景の色 */
border:1px solid #669999;/* テーブルの枠線 */
width: 400px; /* 全体の幅 */
border-collapse:collapse;
margin-top:3ex;
margin-bottom:0px;
}
/* テーブル内のスタイル */
#net-income td {
text-align: center;/* 配置 */
font-size: 13px;/* フォントサイズ */
border:1px solid #669999;/* テーブルの枠線 */
}
#net-income {
text-align: center; /* 配置 */
font-weight: normal; /* フォントの太さ */
font-size: 13px; /* フォントサイズ */
color:#555555;/* フォントの色 */
background-color: #ffffff; /* 背景の色 */
border:1px solid #669999;/* テーブルの枠線 */
width: 400px; /* 全体の幅 */
border-collapse:collapse;
margin-top:3ex;
margin-bottom:0px;
}
/* テーブル内のスタイル */
#net-income td {
text-align: center;/* 配置 */
font-size: 13px;/* フォントサイズ */
border:1px solid #669999;/* テーブルの枠線 */
}
このでっぱり枠（こんな前じゃないですよね（笑））をなくして普通のテーブルを作るためにはスタイルシートの記述をどう変えればいいのかわからないのです。
いろいろやってみたのですが、どれも効果なし！！
どなたかわかる方教えてくださるとうれしいです。
お願いします。
+++ 関連記事 +++
posted by ゆう at 00:03
|
|
コメント
こんにちは～♪ガイです。
ヤフーブログ検索に反映されているのであれば、
ピング送信しなくても大丈夫だと思いますよ♪
ブログ検索に反映されてないよりも、反映されていた方が
ヤフーのランクは多少上がると思います＾＾
それと、↑の記事は
自分はちょっとわかんないですね（汗）
どこで指定されてるんですかね～？
個人的には、下のでも良いかな、なんて
思いますが（笑）
ではでは、応援♪
『1upホームページ作成』様の
「テーブルの枠線を立体風でなく実線で表示する方法」が、
参考になるのではないでしょうか？
こちらのサイトは､あれどうやるんだっけ？っていう時に良く助けられています｡
IE、Firefox、Opera での見え方も表示されています｡
ちなみに､私は Win + Opera なのですが､
今回の記事の表は､上下ともほぼ同じに見えていますよ｡
IE と Firefox では､透明太枠になっていますけどね｡
ちょっと挑戦してみました｡
割といいところまで行ってると思うんですが､
もうちょっと調整が必要ですね｡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
table { background-color:#63659C;}
th { background-color:#73D7AD;
color:#FFFFFF;}
td { background-color:#FFFFFF;
color:#525552;}
-->
</style>
</head>
<body>
<table width="400" border="0" cellspacing="1">
<tr><th colspan="4">10月ネット収入</th></tr>
<tr><td style="width:50px">10/10</td>
<td style="width:150px"><a target="_blank" href="http://research.yahoo.co.jp/">Yahoo!リサーチ</a></td>
<td style="width:100px">現金</td>
<td style="width:100px">260円</td></tr>
<tr><th style="text-align:right" colspan="4">合計 260円</th></tr>
</table>
</body>
</html>
又マタ！色々な事を遣っているワイ？
爺には上も下も同じに見えるのじゃが？？
只、下のは枠線が付いているだけ・・？のように見えるのだが？？？
是を外すのは以下ではダメかな？
<table border cellspacing="0">
コンナ事は爺には解らぬ！解せぬは!! ｍ(｡≧Д≦｡)ｍ !!
こんな所が・・。
http://hp-sozai.net/saku01.html
こんちはー。
テーマの御指摘ありがとうです。
これからだらだらソース眺めてみようと思います。
海外ブログのテーマ引っぱって来ると、やたらフォント指定が小さかったりしますよね。
私はここをいつも参考にしてます。
http://www1.parkcity.ne.jp/chaichan/src/css.htm
最新すぎるとブラウザによって反映されなかったりします。
border-spacingプロパティあたりだと思うんですが
テーブルをめったに使わないのでちょっと曖昧です。
みなさん、アドバイスありがとうございました〜。(^^)
これからゆっくり見て、いろいろ検証してみてからまた記事更新したいと思います。
今回は長くなりそうなので、まとめてレスを。
>ガイさん
なるほど、Yahooに反映されていれば気にしなくても良いですか。
了解です。
じゃあ、↑の記事のスパムが解決するよう全力つくします。（笑）
あっ、ガイさんも下の方が良いと思いました？
自分でも記事書いてみて見比べたら下の方が良いかも、って思ってしまいました。（笑）
応援ありがとうです。(^^)
>ゑこびすさん
あぁ〜〜！！
ゑこびすさんに指摘されるまで忘れてましたよ。
そうですよね、モノによってはブラウザによって見え方違うんですよね。(^^;)
これは、ゑこびすさんの紹介してくれたサイト見て勉強してから、記事の修正や次の記事の更新しないとまずいですね。
WinのOperaでは同じですか。
Operaは使ったことないのでわからないんですよね。
やはり、Operaも導入しないと・・・検討します。
ゑこびすさんのタグも使ってみながらまたできたら報告しますね。
ありがとうございます。m(_ _)m
>山の爺さま
むむっ、山の爺さまのところも同じに見えますか！？
やはり、これはいろいろお勉強してからもう一度記事アップするしかないですかね〜。
うちでは全然違うように見えるんですよ。
cellspacingですか。
ちょっと調べてみますね。
サイトの方もありがとうございます。
こっちもこれからチェックしてみます。(^-^)/
>みさりーぬさん
海外のはたまにしか見ないですが、たしかに見づらいページ多いですよね。
さっきサイトの方確認したのですが、Firefoxでもきちんと見えるようになってました。
なので、またちょくちょく除かせてもらいますね。(^^)
みさりーぬさんが参考にされてるサイトですか。
じゃあ、こちらも参考にさせてもらいます。
すごい、この週末は珍しくお勉強漬けになりそうです。（笑）