締切済み

テーブルデザインをCSSで行う方法

2011/03/03 12:37

tableタグで組んでいるデザインをCSSに変更したいと考えております。以下のHTMLをCSSでtableタグを使わずに実現したいのですが、可能なのでしょうか。 ※参考までに画面上のイメージも添付しました。 CSSが苦手なのでどなたかご教授下さい。 <html> <head> </head> <body> <table border="1" width="50%" height="20%"> <tr> <td colspan="2" rowspan="2"><p align="center">test</p></td> <td colspan="2" rowspan="2"><p align="center">test</p></td> <td colspan="2"><p align="center">test</p></td> <td colspan="2" rowspan="2"><p align="center">test</p></td> </tr> <tr> <td><p align="center">test</p></td> <td><p align="center">test</p></td> </tr> <tr> <td colspan="2">data1</td> <td colspan="2">data1</td> <td>data1</td> <td>data1</td> <td colspan="2">data1</td> </tr> <td colspan="2">data2</td> <td colspan="2">data2</td> <td>data2</td> <td>data2</td> <td colspan="2">data2</td> </tr> <td colspan="2">data3</td> <td colspan="2">data3</td> <td>data3</td> <td>data3</td> <td colspan="2">data3</td> </tr> </table> </body> </html>

rapmaster7
お礼率43% (7/16)

HTML
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

みんなの回答

DrFell
ベストアンサー率55% (305/551)

2011/03/05 09:32 回答No.4

cssが苦手でtableタグでなく、cssで表をとのご質問ですね。表現としては可能ですが、その表の様な物の中身はどういう意味づけなのでしょうか？既に回答があるdivでもできますが、中身が段落ならpで、箇条書きならUlやolとliでとhtmlに文章構造に適したタグをつけるのがお勧めです。そして、今回は表なので表をあらわすtableで組まれるのが、適切だと思います。ｃｓｓは見た目のデザインを指定するものです。例えば、今回testにpを付けセンターに見えるようにされています。おそらく、pはつける意味がないが、真ん中に表示させるためにｐをつけられていると思います。そういう操作をｃｓｓでカバーすることが本来のｃｓｓの使い方です。 <head>と</head>の間に以下のソースをコピーしてみてください。 <style type="text/css"> table{ border-collapse:collapse; border:1px solid #555555;} td{ border:1px solid #999999; text-align:center;} table p{ background:#cccccc; font-weight:bold; color:red;} </style> 少し、デザインが変わったと思います。適切にタグをつけていると、見た目はｃｓｓで変更することが可能ですので、見た目に関するタグはhtmlから排除します。では、やってみてください。1つ変更しては、表示し、また、変更しては、表示すると、ｈｔｍｌとｃｓｓの役割分担がわかると思います。 table側の <td colspan="2" rowspan="2"><p align="center">test</p></td> は、表の中のタイトルに見えました。そして、説明したように<p align="center">は見た目を操る為のタグなので削除してください。表の中のタイトルはtdではなthというタグを使います。つまり<th colspan="2" rowspan="2">test</th>に変更します。次にheadに入れていただいた、ｃｓｓを変更します。table p{でtableの中のp要素を指示していましたが、これをth{表の見出しに変えます。そして、text-align:center;で中央揃えにし、font-weight:middleに変えます。thは初期値が太字なので普通の字にしたわけです。そして、td{内のtext-align:center;は取ってください。ｈｔｍｌは文章構造、ｃｓｓはデザインを担当します。文章構造とデザインを分離していれば、htmlがすっきりしますし、デザインも一気に変える事ができまた管理もしやすくなります。ｃｓｓでデザインを行うとはそういうことだと思うのですがいかがでしょうか？

k0021
ベストアンサー率26% (32/120)

2011/03/04 07:42 回答No.3

縦・横方向のセルの連結はブラウザによりスタイルシートの変更も必要で横方向のセルの連結の場合IEの場合セルの長さによりIE７とIE８でもスタイルシートの変更も必要ですので、tableタグを使用してCSSで対応できる内容をCSSで作成を推薦します。私の参考した内容は、横方向のセルの連結の説明ですが。 http://ryuso.info/me/se1/tbl01.htm

参考URL：: http://ryuso.info/me/se1/tbl01.htm

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/03/03 19:04 回答No.2

　もしこの文書のこの部分が、table(表)であるなら、それを他のマークアップ(マーク付け)で行うのは、誤りです。　tableが否定されるのは【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからこうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。 * メーカー独自拡張のHTMLを使う。 * テキストを画像に置き換えて表現する。 * 余白制御のために画像を用いる。 * ページレイアウトの目的で表を用いる。★★★ * HTMLでページを作らずにプログラムに頼る。　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。　スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より　本来表であるものを、 divやリストでマークアップするのは、HTMLの仕様の趣旨から明らかに反しています。