• ベストアンサー

テーブルタグをcssでデザインしなおす

既存のサイトをHTMLはいじらずにCSSだけでデザインしなおすという作業をしています。 そこで質問なのですが、テーブルタグで2列に組まれたものを、cssで1列に組ませることはできるのでしょうか。 イメージとしては ┏━━━━━┳━━━━━┓ ┃     ┃     ┃ ┗━━━━━┻━━━━━┛ こういう形を ┏━━━━━┓ ┃     ┃ ┣━━━━━┫ ┃     ┃ ┗━━━━━┛ こういう形にします。 (四角がずれていたらすいません) いじるのはcssのみです。 普段tableは使わないのでよくわからず質問しました。よろしくお願いします。

  • ayass
  • お礼率33% (7/21)
  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.2

こういうことでしょうか。 <style type="text/css"> <!-- table,tbody,tr,td { display: block; } td { margin: 1em 0px; border: solid 1px #ccc; } --> </style> </head> <body> <table> <tr> <td>test1</td> <td>test2</td> </tr> </table> # 可能ですが、論理構造と視覚効果が一致しない点が今一ですね…。

その他の回答 (2)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.3

>2さん 良いアイデアです。 でも、 わがままなブラウザもあるから結論は無理って事かな。

noname#111181
noname#111181
回答No.1

残念ながらできません。

関連するQ&A

  • CSSで、表をデザインしたいのですが…

    CSS初心者です。 現在作っているサイトは、CSSの部分とHTMLは別ファイルになっています。 CSSで表をデザインしたいのですが、ページによって表のレイアウトが違い、パターンが5~6種類あります。 CSSでの表の設定はおおむねわかりますが、 ・1つの表にしか使わない記述を、それぞれの表の数だけいくつもいくつも書くのか? ・それだったら、HTMLの中にHTMLとして記述してもいいのでは? ・でも、CSSで書いた方がいいであろう設定をHTMLに書いて混在させるのはあまりすっきりしない… と、悩んでいます。 このようなサイトを作る場合は、普通どのようにするのでしょう? また、いくつものパターンの表の設定をするのに、一気に設定できるような方法はあるのでしょうか? 表は、○列○行といったようなごくシンプルなものばかりで、ただそれぞれが列と行の数が違うものです。 もしかしたらとんでもない考え方をしているのかもしれませんが、どうかご教示下さい。

    • ベストアンサー
    • CSS
  • htmlとcssのデザインについて

    Webサイトでデザインをする際に、cssを利用すると<table>タグ不要でテーブルデザインできるようです。個人的には色やフォントに限定してcssを適用しています。古いブラウザで見れないなどのデメリットがありますが、今後はcssでデザインをするのが一般的になるのでしょうか? 個人的にはcssで全てを作ると可読性が悪くなるような気がするのですが。。。

    • ベストアンサー
    • HTML
  • 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のどこに、そのテーブルタグを書きこんでいけばよろしいのでしょうか。 例えば、/* エントリー部分の設定 */ もしくは、/* 各部のテキスト設定 */ の中でしょうか?

    • ベストアンサー
    • HTML
  • ホームページをCSSで配置しているサイトを最近見かけます。

    CSSでデザインすると、HTMLのテーブルよりもすっきり見えるからだと思うのですが。 しかしCSSだけで配置やデザインをしっかり組むと、 HTMLのテーブルタグで作成した場合とタグの量がそんなに変わるとは思えません。 よく変わっても倍半分くらいかなと思います。 CSSでデザインするとDreamWeaverなどではデザインをチェックすることができません。 ブラウザに表示して確認しないといけません。 ↑これが結構手間 あとCSSを使う理由としてデザインの変更が簡単ということや、 検索エンジンに優しい?というのもあります。 以上を考えるとCSSでの大きなメリットがあまり見出せないのですが、 スッキリとしたサイトはCSSでデザインされています。 なぜCSSでデザインするほうがいいのでしょうか? CSSでデザインすることの大きなメリットを教えてください。

    • ベストアンサー
    • HTML
  • CSSでのWebデザインについて。

    現在、Webページを作っておりCSSでデザインしようと思っているのですが http://jyouhouya3.sakura.ne.jp/ (情報屋さん。) このサイトや http://cowscorpion.com/  (Cow&Scorpion) このサイトのように、大体見てもらえれば分かって頂けると思いますが、大きいテーブルの中でサイトを作っているとでもいいますか・・・・ サイト自体の幅が狭いとでもいいますか・・・ どう説明したらいいのかわからないです、すみません^^;  して、Cow&Scorpionさんのソースを見てみまして この部分を作るタグが下記のようにでてきまして(多分間違っているでしょうが^^;) <base href="http://cowscorpion.com/"> <link rel="stylesheet" type="text/css" href="style.css" /> <div class="banner_top" align="center"><img src="/img/vbar.gif"></div> <table class="tablebody" cellspacing="0" cellpadding="0" border="0" align="center" width="730px" height="100%"> <td valign="top" class="i" colspan="2"> このままじゃ自分のサイトには貼れませんでした。CSSはサッパリなんでどこがどうなっているのか分かりません。 なお、HTMLは大体わかります。 とりあえずこの様にサイトを作るにはどのようにして、HTMLタグに書けばいいのでしょうか?  お手数ですがお願いします。 乱文、長文すみませんでした。

    • ベストアンサー
    • CSS
  • CSSを使ったサイトデザインについて

    最近、雑誌などを参考にしながらCSSを使ったサイトデザインに挑戦しています。 そこで疑問に思っているのは、画像の配置方法についてです。 画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。(当然、場合によって違うので答えはないのでしょうが) たとえば、gooでいえば左上のロゴマークをHTML上で挿入してCSSで配置するのか、CSSで画像の挿入も含めて配置するのがベストなのか、どちらなのでしょう。 それとも、一定の基準があるのでしょうか。 アドバイスお願いします。

    • ベストアンサー
    • CSS
  • HTMLのテーブルタグについて

    HTMLのテーブルタグについての質問です。 かわいい、面白いなど見栄えのいいテーブルとそのタグを紹介しているサイトを教えてください。 こちらのパソコンの事情でアクセスできないサイトがあるので、 なるべく多く教えてくだされば幸いです。 また分かりやすいサイトだと助かります!

  • ブログのデザインについて

    独自ドメインで、自分のブログを立ち上げるに際についての質問です。 ブログのデザインの為にHTMLやCSSを学ぶ必要があると思うのですが、 HTMLは必須としても、CSSを学んだところで、いかにも素人の手作り感があるサイトしか作れないのではないでしょうか? プロっぽい(OKWave等のメジャーサイトのような)デザインのサイトを、CSSで作れるとは思えないのですが、プロっぽいサイトはどのようにして作られているのでしょうか?

  • HTML5+CSS3 でしかできないこと

    長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML5+CSS3 が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5+CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML5で作られていますが(section タグや header タグがありますね) XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 3カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております^^ どうぞ宜しくお願い致します!

  • ホームページ作成する時のCSS,HTMLデザイン作業(Indesign Fireworks Illustratorなど)

    皆様いつも回答ありがとうございます。 早速ご質問ですが(素人ながら稚拙なご質問申し訳ないです) 1.IndesignとFireworks、どちらがDreamweaverで応用が利くか(HTMLやCSSを作成する点で) 2.プロはDreamweaverのみでHP(HTMLやCSS)を全部作成しますか? Indesign(cs3)やFireworksなど?のソフトウェアを使ってデザインしたついでにHTMLやCSSもそのまま出来上がり、それをDreamweaver(cs3)に埋め込めないかと思ったのですが、可能というか実践向けなのでしょうか? 実際のWEB現場ではどのように一連の作業していますか、やはりdreamweaverだけでHTMLやCSSを最初から作っていく、みたいな感じでしょうか?またもしIndesignやFireworksなどでCSSやHTMLも可能であるならばどちらがHPを製作・デザインする上でいいでしょうか? 私としてillustratorでロゴや画像などはすべて処理しようかと考えています。つまり画像やロゴを配置したイメージがそのままHTMLやCSSが出来上がり、それをDreamweaverで使えるかどうかお聞きしたいのです。。両方とも無料体験したのですが、イマイチ使えるのかどうかって感じなのです・・。 m(__)m回答いただければ大変助かります、よろしく尾根がいたします。

専門家に質問してみよう