オンライン健康相談、gooドクター

複雑な表の作り方について、質問致します。
例を挙げますので、そちらをもとに回答を頂ければと思います。
<例>
作りたい表は2行のもので、1行目が7列、2行目が4列のもので、同じ行にあるセルはどれも同じ大きさとします。

※注1
4と7の最小公倍数は28ですから、2行28列の表を作り、1行目では4セルごとに「セルの結合」をし、2行目では7セルごとに結合することで、希望の表は作れますが、あまり賢い方法とは思えないので、一般的な方法を教えて頂けたらと思います。
※注2
「各行を別々に作って改行し、あたかも1つの表に見せる」という方法もありますが、1行目と2行目の間が周囲の枠の厚さより2倍厚くなるので、これも避けたいです。

説明が長くなりましたが、回答をよろしくお願い致します。

gooドクター

A 回答 (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>

この回答への補足

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

教えて頂いたHTML文書をそのままソースにコピペし、確認してみましたところ、なかなか素晴らしいものが表示されました!

1行目と2行目のテーブルは別々に作られているようですね。
しかし、2つのテーブルが重なる境界線部分が太くなってないのが不思議です。
これはなぜなんでしょう。
ちなみに、1行目は14%と15%があり、微妙に均等ではありませんでしたが、問題なしです!
大事なのはむしろ、境界線の太さの方なので。。
どうやら、ポイントは、border-bottom-width、border-top-widthにありそうですね。(色々、htmlをいじって試してみました。)
この命令を見るのは初めてです。
ただ、どちらも0pxで指定しているので、線は「見えない」のでは。。。
なんて思ったのですが、しっかり上と下のテーブルで半分こずつ線を出し合い、1本分の太さで境界線を形成しているではありませんか!
0pxに設定すると、線の太さは通常の半分になるのでしょうか。。。
(★この疑問に対し、再度回答を頂けると大変嬉しいです!)

いずれにしましても、おかげ様で、私が求めていたものに限りなく近い「箱」が作れそうです。
感謝感謝です!
ありがとうございます!

補足日時:2007/06/10 05:58
    • good
    • 0
この回答へのお礼

いろいろいじっているうちに、枠線のしくみが分かりました!
枠線は、セルの枠線とテーブル全体の枠線とに分かれているようですね。
0pxにすることで、数字通り太さ0(見えない)にできることが分かりました。
つまり、1行目と2行目の間は、セルの枠線1pxが重なって2pxの幅になっていて、これは、外枠の2px(テーブルの枠線1px+セルの枠線1px)と同じ幅になりますね。また、各行のセル間の枠線の太さも2px(セル枠線1px+セル枠線1px)なので、結果的に、この箱の中の枠線はすべて2pxになり、希望の「枠線すべてを同じ幅にしたい」という条件を満たします。
やはり、ポイントはborder-bottom-width、border-top-widthにあったようです。
とても助かりました!^^

お礼日時:2007/06/10 08:42

でしたらやはり表ではないですね。


文字を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に関してはハッキリ言ってド素人ですので、お手柔らかにお願い致します。。。^^;
ご無理を言って申し訳ございません。

補足日時:2007/06/09 20:21
    • good
    • 0
この回答へのお礼

その節はお世話になりました。
また機会がございましたら、ご助言よろしくお願い致します。

お礼日時:2009/08/26 11:44

何を作りたいのかいまいち分かりませんが、とりあえず表ではないのですね?



それならば、表示させる言葉を適切な要素でマークアップして、
CSSでレイアウトするのが良いと思います。

この回答への補足

んーとですね、表と言えば表なのですが、それは解釈の問題になりそうなので、この言葉にこだわるつもりはないといった所でしょうか。

要するに、作りたいものは、文字を一つずつ囲むような「囲い」です。
例えるなら、「動物園のオリ」のようなものです。
セル1つ1つがオリで、その中の文字が動物と考えてもらえればと思います。

セルとセルの境界線(テーブルの枠線)は残し、2行の「オリ」を作りたいわけです。

ex1)「田」←2行2列のオリです。
ex2)「目」←3行1列のオリです。

私の作りたいものは、以下のような入れ物です。

┏┳┳┳┳┳┳┓
┣┻╋┻╋┻╋┫
┗━┻━┻━┻┛
うまく表示されますでしょうか。
上の段は7セル(かつ、セル幅が均等なので、希望通り)
下の段は4セル(だが、セル幅が不均等なので、希望通りではない。)
下の段(2行目)のセル幅が均等なら完璧なのですが。。

やはり、No.2さんの回答にありましたように、28セルを結合処理するのが現実的なんでしょうかね。

以上、何か分かりましたら教えてください。
宜しくお願い致します。

補足日時:2007/06/09 17:49
    • good
    • 0
この回答へのお礼

その節はお世話になりました。
また機会がございましたら、ご助言よろしくお願い致します。

お礼日時:2009/08/26 11:44

おはこんばんにちは、


※1が現実的と思いますが・・・・
あまりにも複雑な場合は、エクセル等で作成した表を、
必要部分だけ画像ファイルにして、表示していると思いますよ。

回答になってませんが、参考までに。

この回答への補足

おはぽこあにょはせよ。
回答をありがとうございます。

画像ファイルを用いずに表を作りたいんですよね^^;
でも、アドバイスありがとうございます!

補足日時:2007/06/09 15:53
    • good
    • 0
この回答へのお礼

その節はお世話になりました。
また機会がございましたら、ご助言よろしくお願い致します。

お礼日時:2009/08/26 11:44

見出しと各行はどう対応しているのでしょうか?


それによってマークアップが変わってきます。
例えば、スケジュール表を作るとして、見出しが1時間毎でも、
最小単位が10分ならば、セルを小刻みに区切って、
結合させる方法は正しいと言えます。
(その場合、分単位の見出しはCSSで非表示にします。)

この回答への補足

回答をありがとうございます。
補足をさせて頂きます。
表を作りたいと書きましたが、正確に言うと、セルそれぞれに1つの言葉を入れておく「メニューのような囲い」を作りたいんです。
したがって、「見出し」のようなものは必要ないんです。

P.S
HTMLのことについて、あまり詳しくないので難しいことを言われてしまうと理解できないかもしれませんが、宜しければ更なる回答を宜しくお願い致します!!(^^)

補足日時:2007/06/09 15:46
    • good
    • 0
この回答へのお礼

その節はお世話になりました。
また機会がございましたら、ご助言よろしくお願い致します。

お礼日時:2009/08/26 11:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

gooドクター

人気Q&Aランキング