- ベストアンサー
HTMLで複雑な表を作成する方法
- HTMLで複雑な表を作成する方法について解説します。セルの結合や行の結合を利用することで、希望の表を作ることができます。
- 例えば、２行の表で１行目が７列、２行目が４列のものを作りたい場合、２行２８列の表を作り、１行目では４セルごとにセルの結合、２行目では７セルごとにセルの結合を行うという方法があります。
- 他にも各行を別々に作って改行し、１つの表に見せる方法もありますが、この方法では１行目と２行目の間が周囲の枠の厚さよりも２倍厚くなってしまうことがあります。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
テーブルを2段にしても、枠の太さが同じならいいわけですよね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- table { width: 100%; border: solid 1px #666666; } td { border: solid 1px #666666; padding: 4px; text-align:center; } --> </style> </head> <body> <table style="border-bottom-width:0px" cellpadding="0" cellspacing="0"> <tr> <td style="width:15%">1 - 1</td> <td style="width:14%">1 - 2</td> <td style="width:14%">1 - 3</td> <td style="width:14%">1 - 4</td> <td style="width:14%">1 - 5</td> <td style="width:14%">1 - 6</td> <td style="width:15%">1 - 7</td> </tr> </table> <table style="border-top-width:0px" cellpadding="0" cellspacing="0"> <tr> <td style="width:25%">2 - 1</td> <td style="width:25%">2 - 2</td> <td style="width:25%">2 - 3</td> <td style="width:25%">2 - 4</td> </tr> </table> </body> </html>
その他の回答 (4)
- kensaku46
- ベストアンサー率21% (259/1214)
でしたらやはり表ではないですね。 文字をspanでマークアップし、CSSでレイアウトが妥当です。 最も、妥当なマークアップにこだわらなければ、この限りではありませんが。 ■CSS span.word_a, span.word_b { positoin: absolute; display: block; border: 1px solid #000; text-align: center; line-height: 30px; } span.word_a { width: 40px; } span.word_b { width: 70px; top: 30px; } #word2 { left: 40px; } /* 以下、#word3～#word7まで leftに40pxずつ足す */ #word8 { left: 70px; } /* 以下、#word9～#word11まで leftに70pxずつ足す */ ■HTML <p> <span id="word1" class="word_a">あ</span> <span id="word2" class="word_a">い</span> <span id="word3" class="word_a">う</span> <span id="word4" class="word_a">え</span> <span id="word5" class="word_a">お</span> <span id="word6" class="word_a">か</span> <span id="word7" class="word_a">き</span> <span id="word8" class="word_b">く</span> <span id="word9" class="word_b">け</span> <span id="word10" class="word_b">こ</span> <span id="word11" class="word_b">さ</span> </p> 適当な指定なので、幅や位置の調整が必要かと思います。 表示させる場所によっては、top・leftではなくmarginの方がよいかもしれません。
お礼
その節はお世話になりました。 また機会がございましたら、ご助言よろしくお願い致します。
補足
回答をありがとうございます。 私が作ろうとしているものは「表」ではないんですね。 呼び方が分かれば良かったのですが。。。 さて、教えて頂いたCSSとHTMLですが、これをどのように使ったら良いかわからないでいます。。。 WEBページ作成ソフトのソースにコピペしてみたのですが・・・表らしきものは表示されません。。。（もっとも、これは「表」ではないようですが。。） 「そのままそっくりコピペしてソースに貼付けたら、はいできますよ」 といった書き方をして頂けると大変助かるのですが、お願い出来ますでしょうか。 HTMLに関してはハッキリ言ってド素人ですので、お手柔らかにお願い致します。。。＾＾； ご無理を言って申し訳ございません。
- kensaku46
- ベストアンサー率21% (259/1214)
何を作りたいのかいまいち分かりませんが、とりあえず表ではないのですね？ それならば、表示させる言葉を適切な要素でマークアップして、 CSSでレイアウトするのが良いと思います。
お礼
その節はお世話になりました。 また機会がございましたら、ご助言よろしくお願い致します。
補足
んーとですね、表と言えば表なのですが、それは解釈の問題になりそうなので、この言葉にこだわるつもりはないといった所でしょうか。 要するに、作りたいものは、文字を一つずつ囲むような「囲い」です。 例えるなら、「動物園のオリ」のようなものです。 セル１つ１つがオリで、その中の文字が動物と考えてもらえればと思います。 セルとセルの境界線（テーブルの枠線）は残し、２行の「オリ」を作りたいわけです。 ex1)「田」←２行２列のオリです。 ex2)「目」←３行１列のオリです。 私の作りたいものは、以下のような入れ物です。 ┏┳┳┳┳┳┳┓ ┣┻╋┻╋┻╋┫ ┗━┻━┻━┻┛ うまく表示されますでしょうか。 上の段は７セル（かつ、セル幅が均等なので、希望通り） 下の段は４セル（だが、セル幅が不均等なので、希望通りではない。） 下の段（２行目）のセル幅が均等なら完璧なのですが。。 やはり、No.２さんの回答にありましたように、28セルを結合処理するのが現実的なんでしょうかね。 以上、何か分かりましたら教えてください。 宜しくお願い致します。
- yoko1mgs
- ベストアンサー率27% (220/806)
おはこんばんにちは、 ※１が現実的と思いますが・・・・ あまりにも複雑な場合は、エクセル等で作成した表を、 必要部分だけ画像ファイルにして、表示していると思いますよ。 回答になってませんが、参考までに。
お礼
その節はお世話になりました。 また機会がございましたら、ご助言よろしくお願い致します。
補足
おはぽこあにょはせよ。 回答をありがとうございます。 画像ファイルを用いずに表を作りたいんですよね＾＾； でも、アドバイスありがとうございます！
- kensaku46
- ベストアンサー率21% (259/1214)
見出しと各行はどう対応しているのでしょうか？ それによってマークアップが変わってきます。 例えば、スケジュール表を作るとして、見出しが1時間毎でも、 最小単位が10分ならば、セルを小刻みに区切って、 結合させる方法は正しいと言えます。 （その場合、分単位の見出しはCSSで非表示にします。）
お礼
その節はお世話になりました。 また機会がございましたら、ご助言よろしくお願い致します。
補足
回答をありがとうございます。 補足をさせて頂きます。 表を作りたいと書きましたが、正確に言うと、セルそれぞれに１つの言葉を入れておく「メニューのような囲い」を作りたいんです。 したがって、「見出し」のようなものは必要ないんです。 P.S HTMLのことについて、あまり詳しくないので難しいことを言われてしまうと理解できないかもしれませんが、宜しければ更なる回答を宜しくお願い致します!！（＾＾）
お礼
いろいろいじっているうちに、枠線のしくみが分かりました！ 枠線は、セルの枠線とテーブル全体の枠線とに分かれているようですね。 0pxにすることで、数字通り太さ０（見えない）にできることが分かりました。 つまり、１行目と２行目の間は、セルの枠線1pxが重なって2pxの幅になっていて、これは、外枠の2px（テーブルの枠線1px＋セルの枠線1px）と同じ幅になりますね。また、各行のセル間の枠線の太さも2px（セル枠線1px＋セル枠線1px）なので、結果的に、この箱の中の枠線はすべて２pxになり、希望の「枠線すべてを同じ幅にしたい」という条件を満たします。 やはり、ポイントはborder-bottom-width、border-top-widthにあったようです。 とても助かりました！＾＾
補足
回答ありがとうございます。 教えて頂いたHTML文書をそのままソースにコピペし、確認してみましたところ、なかなか素晴らしいものが表示されました！ １行目と２行目のテーブルは別々に作られているようですね。 しかし、２つのテーブルが重なる境界線部分が太くなってないのが不思議です。 これはなぜなんでしょう。 ちなみに、１行目は14%と15%があり、微妙に均等ではありませんでしたが、問題なしです！ 大事なのはむしろ、境界線の太さの方なので。。 どうやら、ポイントは、border-bottom-width、border-top-widthにありそうですね。（色々、htmlをいじって試してみました。） この命令を見るのは初めてです。 ただ、どちらも0pxで指定しているので、線は「見えない」のでは。。。 なんて思ったのですが、しっかり上と下のテーブルで半分こずつ線を出し合い、１本分の太さで境界線を形成しているではありませんか！ 0pxに設定すると、線の太さは通常の半分になるのでしょうか。。。 （★この疑問に対し、再度回答を頂けると大変嬉しいです！） いずれにしましても、おかげ様で、私が求めていたものに限りなく近い「箱」が作れそうです。 感謝感謝です！ ありがとうございます！