• ベストアンサー

セル結合時のcols指定について

tableタグでcols(列数)を指定すると表示が若干早くなる、ということを聞いたので、実践してみたいのですが、不規則なセルの結合をしている場合、列数の指定は、どこに揃えれば良いのでしょうか? 例) <table cols="?">  <tr>   <td colspan="6">左</td>   <td>右</td>  </tr>  <tr>   <td colspan="3">左1/2</td>   <td colspan="3">左2/2</td>   <td>右</td>  </tr>  <tr>   <td colspan="2">左1/3</td>   <td colspan="2">左2/3</td>   <td colspan="2">左3/3</td> <td>右</td>  </tr> </table> 左の列には、上からそれぞれ1,2,3個分のセルを収め、右の列は1個のセルを収める。 例えばこんな形式の表を作ったとして、実質的な列数は上から、2,3,4つになりますが、左右をきっちり分ける為に、colsは7つ分使っています。 この場合だと、colsの合計値である「7」に合わせるのが適切なのでしょうか? それとも見た目の列数の最大値「4」に合わせるべきなのでしょうか。 表示速度の効果自体は大したものではないかもしれませんが、 ちょっと気になったので質問します。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

> 不規則なセルの結合をしている場合、列数の指定は、どこに揃えれば良いのでしょうか? 「colspanを使わないときに何列あるか」に合わせて下さい。

syagain
質問者

お礼

なるほど、それは分かりやすいですね。 ありがとうございました。

その他の回答 (1)

  • k0021
  • ベストアンサー率26% (32/120)
回答No.2

<col span="1" style="width:左1/3;"><col span="1" style="width:(左1/2-左1/3);"><col span="1" style="(左2/2-左3/3);"><col span="1" style="width:左3/3;"><col span="1" style="width:右;"><tbody> 長さが不明ですのでセルの番号で回答しました。 span=は、連続した同じ長さの個数の指定です。 左2/3の独自の長さ指定は、しませんので、注意して下さい。 確か複雑指定した場合おかしくなる場合が有りますので。 ダミーで<tr><td></td><td></td><td></td><td></td><td></td></tr>と 指定するとうまく行きますよ。

syagain
質問者

お礼

なるほど、<col>の指定と、colspanの組み合わせは思いつきませんでした。 こういう作り方もできるんですね。colspanの数も減らせました。 たいへん参考になりました、ありがとうございます。

関連するQ&A

  • HTMLのtableタグでセル毎の幅率を指定したい

    HTMLにtableタグがあると思いますが、 例えば <table> <tr> <td></td> <td></td> </tr> </table> のように左右にセルがあるだけの単純な表を作ったとします。 この場合100ピクセルの幅にして左が70ピクセル、右が30ピクセルみたいに 個々の列で幅の比率を指定したりはできるのでしょうか?

    • ベストアンサー
    • HTML
  • テーブルレイアウト

    テーブルレイアウトで困っています。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100%</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> これだと問題なく表示されるのですが、 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100% 少し長い文章を入れる</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> このように1列目のセルに長い文章を入れると、2列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか? Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • colspan セルの結合について

    テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>

  • tableでcolspanを使うと次行以下のセルの幅が均等に?

    tableでcolspanを使うと、colspanで結合した行の次行以下のセルの幅が均等になってしまいます。 どうすれば、colspanで結合した行の次行以下のセルの幅が均等になるのを防げるでしょうか?IE6,IE7 意図的にスタイルシートは、使用しないでください。 例: <table width="300" border="1" cellspacing="1" cellpadding="5"> <tr> <td colspan="2" width="284" align="center"> タイトルセル </td> </tr> <tr align="left" valign="top"> <td width="100"> セル左 <td> <td width="171"> セル右 <td> </tr> <table> 上記の場合、本来ならば、左のセルの幅(100px)が右のセルの幅(171px)より狭いはずなのに、左のセルの幅と右のセルの幅が均等になっていしまいます。 下記コード部分を上記のコードから削除すると、本来の比率で左のセルと右のセルの幅が表示されます。 <tr> <td colspan="2" width="284" align="center"> タイトルセル </td> </tr> よろしくお願いします。

    • ベストアンサー
    • HTML
  • TABLE内でのwidth指定

    <table> <tr><th colspan="3">●</th></tr> <tr><td class="1">■</td> <td class="2">▲</td> <td class="3">★</td></tr> <tr><th colspan="3">○</th></tr> <tr><td class="1">□</td> <td class="2">△</td> <td class="3">☆</td></tr> </table> このサンプルについて考えています。 ●○が、割と長い文字列になります。 この時、例えば2段目の左の列が、■,□のうち長い方の文字列に合わせて「width」が表示されるためには、スタイル「class="1"」の内容をどう記述すれば良いのでしょうか。 デフォルトの「width:auto」では、●○の長さに引っ張られてしまい、余分なスペースが出来てしまいます。 2段目の中の列(▲△部分)が短文を記述するセルなので、●○に合わせる必要のあるスペースは、全てここで吸収してしまいたいのです。 同じ仕組みで幾つかテーブルを組みますので、【class="1"】のwidthにpx,%等といった値自体を指定するのは向いていません。 ご指導おねがいします。

    • ベストアンサー
    • HTML
  • [table] colspanについて

    画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。 4列目にセルが4つあるので、3列目のcolspanの指定をどのように記述すればいいのか 不明で困っています。 ---------------------------------------------------- <table> <tr> <th></th> <th colspan="3"></th> </tr> <tr> <td></td> <td colspan="3"></td> </tr> ▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼ <tr> <td></td> <td></td> <td></td> </tr> ▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲ <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> ---------------------------------------------------- どなたか解決案をご存知の方、お教えいただけないでしょうか? colspanにこだわっているわけではないので、cssで解決できるのであればcssでも大丈夫です。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • セルの高さを固定するには?

    2列2行のテーブルを作り、右の列をrowspan=2で結合しています。 右の列はテキストや画像を追加入力していくので、縦が長くなっていきます。 その際、左上のセルだけ高さを固定し、左下のセルは自動で高さが決まるようにしたいと思っています。 が、左上のセルにheight=150と入力しても、右が伸びるにつれて長くなってしまいます。 CSSで指定しても同じです。 rowspanを使うと、結合していないセルの高さを固定することはできないのでしょうか。 良い解決策がありましたら、お知恵をお貸し下さい。 <table> <tr> <td>ここを固定したいです</td> <td rowspan="2">ここが長くなっていきます</td> </tr> <tr> <td>ここは右が長くなるにつれて自動で伸びるようにしたいです</td> </tr> </table>

    • ベストアンサー
    • HTML
  • 列の幅をcssで指定するには?

    <table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> というテーブルがあるのですが こういう場合、 左の列(あ、う)は1em、右の列(い、え)は2em、 と、スタイルシートで指定する場合、どうすればいいでしょうか?

    • ベストアンサー
    • HTML
  • テーブルの幅の指定・・・

    テーブルの幅が変わらないように 幅を指定するようにするにはどうしたらよいでしょうか? 普通にwidth=100などと打ち込んでいるのですが、 サイズが変化してしまいます。 もうちょっと具体的に言うと、 <table> <tr> <td></td> <td></td> </tr> <tr> <td colspan=2></td> </tr> </table> 上に二つテーブルがあって、 その下に一つのテーブルがある状態です。 この状態で、上の二つのテーブルの右側の方には画像を入れて、 幅と高さを指定したいと思っています。 その下には、文を打ち込む予定です。 この画像のところを変化しないように指定したいのです。 画像が何重にも写らないようにしたいからです。 文をたくさん打ち込むとそれだけテーブルが大きくなりますよね。 そのときに上の二つのテーブルのところの 画像が入っていない左のほうのテーブルの長さを変化させたいのです。 どうすればいいでしょうか? よろしくおねがいします。

    • ベストアンサー
    • HTML
  • 次のテーブルのセル内文字を小さく

    したいのですがセル内文字ごとに<h7></h7>を付けると文字は小さくなるもののセルの高さがむしろ高くなり文字が上に貼りついてしまいます セルの高さも同じように文字にあわせて小さくできるような設定はあるでしょうか? <table border=1 cellspacing=0 cellpadding=0> <caption align=left> <nobr>あいうえおかきくけこ<nobr/> </caption> <tr><td colspan=3>abc</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td colspan=3 height=15></td></tr> </table>

    • ベストアンサー
    • HTML

専門家に質問してみよう