- 締切済み
この表（テーブルレイアウト）をソースにしてください
添付した図のような表をテーブルレイアウトで 作るとどうなるかおしえてください。 （ソースを載せてください）
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
セルの幅のクラスと、ボーダー表示の有無のクラスを作っておいて、組み合わせて指定してあげればできそうですが… とりあえず、こんな感じ？ <html> <head> <style type="text/css"> table { border-collapse: collapse; empty-cells:show; } table td { height:20px; border:1px solid gray; } table .w1 { width:60px; } table .w2 { width:100px; } table .w3 { width:25px; } table .n { border:0; } </style> </head> <body> <table> <tr><td colspan=3 class="n"></td><td class="w2"></td><td colspan=2></td></tr> <tr><td class="w1"></td><td colspan=2></td><td></td><td class="w2"></td><td class="w3"></td></tr> <tr><td></td><td colspan=2></td><td></td><td></td><td></td></tr> <tr><td></td><td colspan=2></td><td></td><td></td><td></td></tr> <tr><td class="n"></td><td class="w1 n"></td><td class="w1"></td><td></td><td></td><td class="n"></td></tr> <tr><td colspan=2 class="n"></td><td class="w1"></td><td></td><td></td><td class="n"></td></tr> </table> </body> </html>
- darter
- ベストアンサー率48% (12/25)
No.1のdarterです。 よろしければこの質問の目的をもう少し具体的に教えていただけませんか？ セルの幅などにも意味があるのでしょうか。 表示ができればいいだけであれば、エクセルで作成した冗長なソースでも問題ないかと思いますが、 テーブルは特に何も指定しないと、セル内の文字列やブラウザの種類、ウインドサイズによって適当に解釈されてレイアウトされるため、一定になりません。
- darter
- ベストアンサー率48% (12/25)
線のない部分もあるのでスタイルも指定しないと難しいかも知れません。 こういう作業はベタに打たず、WYSIWYGな編集ソフトを使ったほうが楽ですよ。 専用の編集ソフトがなくても、もしエクセルをお持ちなら エクセルで希望の表組みを作って、 ファイル → 名前をつけて保存 で、ファイルの種類を「Webページ」にして 保存すると、HTMLコードが作れます。
お礼
ご回答ありがとうございます。線のない部分もあるので難しいですよね ＞スタイルも指定しないと難しいかも知れません CSSを利用するということでしょうか。 あまり、経験がないのでCSSも使い方がよくわかりません。 エクセルでもやってみましたが、かなり見ずらいコードになってしまいました。 初心者の私にはこのテーブルレイアウトを作るのは無理なのでしょうかね。