テーブルの罫線をセルで表現するのは？

質問

先日「縦罫線を1本だけ細くしたい」の質問をした者です。
http://oshiete1.goo.ne.jp/qa4883479.html

教えていただいた背景画像を使った方法をやってみたのですが、
colに設定したパディングが効かないため、テキストが外見上の縦罫線の上に乗る可能性に気付いてしまいました。
これは美しくない。

仕方ないので、全部の<td>タグにclass属性をつける覚悟は決めたんですが、
あと一つだけ自分の中で「反則じゃね？」という方法があります。
本来は横5列のテーブルですが、これを9列にして
2,4,6,8列目の幅を1～2ピクセルに、背景色を黒にして
視覚上、罫線に見せるという方法です。
これって、やっぱり反則でしょうか？

回答No.6

grumpy_the_dwarf · ベストアンサー

まっとうな記述に古いIEだけが対応してないくらいで、そこまで非
論理的な記述に走るってのは、ちょっと引きますね。全くスマート
じゃぁありません。そもそもクラスを指定する方が無駄なカラムを
何列も増やすより楽なように感じますが。

ちなみに前回の私の回答は、IE8対応確認済みです。

回答No.5

yambejp

どうせ販促まがいのことを考えているなら
javascriptで自動にclassをつけてやればよくないですか？

回答No.4

神崎 渉瑠（@taloo）

セルを線代わりにするのはテーブルレイアウトの方法ですので、Web標準的には反則ですね。
それ以上の事は、テーブルレイアウトを使わない主義かどうかだと思います。

> colに設定したパディングが効かないため、
それはtdに指定する物では？

colのborderはIE（IE8含む)は未対応です。
http://msdn.microsoft.com/en-us/library/ms535225(VS.85).aspx
（col要素の対応styleの項目にborderが書かれていません)
colは古くからあるタグですが、ブラウザが対応したのは比較的最近だと思います。

一部だけ細くする、というのがうまくいきませんでしたが、
2列目だけ線を引く場合は、
IE7以上、その他のブラウザはおおむね対応していると思いますが、こんな感じで出来ます。

td{border: 0 none;}
td+td{border-right:1px solid blue;}
td+td+td{border-right:0 none;}

ご参考まで。
IE6対応はtdにclassを指定するしかないかな、と思います。

回答No.3

nori_007

CSS でデザインでする前は良くやっていました。

今は、border で何とかすると思います。
正直ピンポイントで質問されても、具体的にどうされたいのか解らないので何とも言えません。反則の定義も解らないし・・・。

参考URL：

http://critical.s6.xrea.com/web/border.shtml

回答No.2

amanda97

最近はテーブルで作るのが反則って言われるぐらいですから、アリですよ(^^;

回答No.1

abril

> 2,4,6,8列目の幅を1～2ピクセルに、背景色を黒にして視覚上、罫線に見せるという方法です。
> これって、やっぱり反則でしょうか？

「反則」の定義はわかりかねますが、つまり見かけ上のレイアウトの為だけに存在する空のセルの列をマークアップする、という事ですよね。
そういう「無意味さ」ではNGでしょう。それでもその方法を取るか取らないかは質問者様の自由ですが。