htmlでテーブルタグを使わずにCSSのみでテーブルを作成する方法を教

質問

htmlでテーブルタグを使わずにCSSのみでテーブルを作成する方法を教えて下さい。

現在私はブログを所有しており、ブログ内の記事の中に小さな1.2行程度のテーブルを入れたいと思っています。
記事の中に直接テーブルのタグを書き込むと、ものすごい量のタグになってしまい、検索エンジンの読み込みに不利ですので、CSSにて記事の中用のテーブルタグを作り、それを<div class="">～略～</div>の形で省略して記事の中で使用していきたいと思います。

全くの初心者の為、質問が上手にできていないかと思いますので、具体的には下記のサイトを拝見して頂くと幸いです。
http://www.operationcheck.com/seo/seomeasure6.html
サイト内で書かれている、中程の「じゃあ、なぜCSSが必要なのか？」以降が、私の質問したい内容です。しかし、このサイトでは、CSSの具体的な使用方法については、書籍の紹介になっていました。

その上記サイトに記載されております、「CSSだけで書いた方」（グレーのテーブルの中の文です）は、

『<div class="box2">
<p>普通に見る限りでは、大した違いを感じることは出来ません。<br>
ちなみに、こちらはHTMLを使わずCSSのみを使って作成しました。 </p>
</div>』

<div class="box2">～略～</div>という風に、<table>のタグを使わずに、divのみで構成されています。
このように、記事の中でテーブルを省略し、divのみで、反映させるCSSの記載方法（タグなど）を教えて下さい。

また、具体的に、CSSのどこに、そのテーブルタグを書きこんでいけばよろしいのでしょうか。
例えば、/*　エントリー部分の設定　*/
もしくは、/*　各部のテキスト設定　*/
の中でしょうか？

回答No.2

admiral_ya · ベストアンサー

Tacosan さんの仰るように、div を使うか、table を使うかは、
> 本当に表を作りたいのなら table要素を使うべし. 表でないのなら table要素は使わない.
の通りですから、私は、
> また、具体的に、CSSのどこに、そのテーブルタグを書きこんでいけばよろしいのでしょうか。
に付いて。

ハッキリ言って、実際に div を使った記述がなされているので、使われているスタイル・ファイルを見るのが手っ取り早いでしょう。
実際に見てみると、該当するのは
> .box2 {
> width: 444px;
> border: 3px solid #0000FF;
> height: 60px;
> vertical-align: middle;
> color: #FF0000;
> }
ですから、これを参考にしては。

お礼

回答ありがとうございます。

>ハッキリ言って、実際に div を使った記述がなされているので、使われているスタイル・ファイルを見るのが手っ取り早いでしょう。

確かにその通りですね。
見てみました。admiral_yaさんの記載して頂いた通りでした。
お手数おかけいたしました。ありがとうございました。

回答No.1

Tacosan

1点だけ:
tableタグ (というか table要素) は「表を作る」ためのものです. だから, 「本当に表を作りたい」というのであれば「タグの量」がどうこうではなく table要素を使うべきですし, そうでない (たとえば「単に枠で囲みたい」とか) のであれば table要素は最初から考えるべきではないのです.
そのリンク先では「table要素を使った場合」に対して「不要なコードが多すぎる事に気がつきますでしょうか」と書いてありますが, これは当然です. 「表を作るのが目的ではない」のにわざわざ table要素を使っているのがおかしいのです.

もう 1度言います.
本当に表を作りたいのなら table要素を使うべし. 表でないのなら table要素は使わない.

お礼

解決しました。
テーブルを勘違いしていました。
気付かせて頂いてありがとうございました。

補足

回答ありがとうございます。
Tacosanさんがおっしゃるように、私は表を作りたいのではなく、文章を枠で囲んで目立たせたいと考えております。
私はhtml等の知識がないので、その場合「テーブルで枠を囲って目立たせる」ということを思いつきました。

例えば、
「お知らせ
○○（←○○にお知らせ内容を書く）」ということをブログの記事の中に設置したいと思っています。
上記サイトの例で、

<p>普通に見る限りでは、大した違いを感じることは出来ません。<br>
ちなみに、こちらはHTMLを使わずCSSのみを使って作成しました。 </p>

と、このような単なる文章をテーブルの中に書いているのでは、検索エンジンにとってあまりよくないということなのでしょうか。