dポイントプレゼントキャンペーン実施中！

HTMLでテーブルタグ<table>を使って複雑な表を作成するときの記述方法について

解決済

  • 質問者：march4
  • 質問日時：
  • 回答数：5件

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： outbrave
  • 回答日時：

テーブルを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文書をそのままソースにコピペし、確認してみましたところ、なかなか素晴らしいものが表示されました！

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

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

補足日時：2007/06/10 05:58
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2007/06/10 08:42

No.4

  • 回答者： kensaku46
  • 回答日時：

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


文字を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

No.3

  • 回答者： kensaku46
  • 回答日時：

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



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

この回答への補足

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

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

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

ex1)「田」←２行２列のオリです。
ex2)「目」←３行１列のオリです。

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

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

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

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

補足日時：2007/06/09 17:49
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/08/26 11:44

No.2

  • 回答者： yoko1mgs
  • 回答日時：

おはこんばんにちは、


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

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

この回答への補足

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

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

補足日時：2007/06/09 15:53
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/08/26 11:44

No.1

  • 回答者： kensaku46
  • 回答日時：

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


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

この回答への補足

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

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

補足日時：2007/06/09 15:46
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/08/26 11:45

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報