• ベストアンサー

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

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

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

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

  • ベストアンサー
  • t4t
  • ベストアンサー率55% (47/84)
回答No.1

できます。 <table> <tr> <td width="30">1</td> <td width="70">2</td> </tr> </table> これでピクセル単位での指定になると思います。 比率の場合は%を使います。 <table width="100%"> <tr> <td width="30%">1</td> <td width="70%">2</td> </tr> </table> tableタグのwidthは、ブラウザ全体に対するテーブルの幅を比率で指定しています。(この場合は100%、ブラウザの幅いっぱいにテーブルの幅を使う)

RockmanX
質問者

お礼

わかりやすい回答ありがとうございました!

関連するQ&A

  • セル結合時の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
  • HTMLの表で幅を指定しても折り返すことは無理なのでしょうか?

    以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか? <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>

    • ベストアンサー
    • 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>タグ、セルの隙間

    初めてなので上手く伝えられなかったらすみません。 テーブルのセルの隙間を調整したいんですが上手くできません。 <table cellspacing="0"> <tr> <th></th><td></td> </tr> ・ ・ ・ <tr> <th></th><td></td> </tr> </table> という形です。thとtdにはテキストが入っています。 縦の幅をそろえたいんですがcellspacing="0"をしても一行の高さより間隔が広いのをなんとかしたいんです。thの中に改行があるのでそれと合わせたいんです。 これはline-heightとかで何とかなりますか?一応文字サイズ変えたり見ても均一な行間になるようにしたいので高さ指定だとあまり良くないと思ってます。 CSSもいくらか分かるので、HTMLかCSSで上手い対策をごぞんじの方教えてください。

    • ベストアンサー
    • HTML
  • EXCELのセル内にHTMLタグを含む文を入力

    エディタ上の文章 abc<table border=1><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table> の文章をcopyして、適当なセルにpasteすると、この文章のままではなくて、A、B、C、Dが違う セルに入ってしまいます。 <とtabelの間に半角をいれて abc< table border=1><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table> をcopyして、セルに入力すると、そのセル内には入りますが、abc< table border=1>ABCD とタグが無視された形で入力されてしまいます。 今まではこんな事はなかったのですが、HTMLタグが消えないようにする事はできないでしょうか?

  • <table>タグについて

    以前同じような質問をさせていただいたのですが、以前質問した逆の内容が わからないので質問させていただきます。 以前の質問では<table>タグを使用して表を同じ高さに表示させるという 質問をさせていただきました。 【回答】 <table><tr> <td><table>******</table></td> <td><table>******</table></td> </tr></table> という回答をいただきました。(ありがとうございました。) 今度は逆に表を上下に表示したいと考えたのですが、どうしても 同じ高さに表示してしまいます。(っていうか普通に<table>タグを 書けば上下に表示するとおもうのですが・・・) おそらくタグを閉じたりするタイミングがおかしいかと思われますが、 その他ご存知の事がありましたら宜しくお願いいたします。 <table>タグのclassオプションを同じ名前にすると問題でもあるのでしょうか? ご多忙の中、大変申し訳ありませんが、ご回答宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • <TABLE>の<TD>タグの幅指定について

    <FORM>を2つに切って、その表示がずれてしまうという記事が少し前にありましたが、多少内容がかぶるかもしれません。 列項目が全く同じ2つの表を上下に並べて表示しようと思っています。 <TABLE>タグはWIDTHの指定ができるので表全体のサイズは上下でそろっているのですが、その中の項目の縦の線がずれてしまいます。 原因はその項目に表示される内容が上の表と下の表とで異なっていることによるズレのようです。 (<TD>のタグにはwidthの指定が無く、<TABLE>全体として、バランスが取れるように自動的に中の項目幅を調整してしまうためらしいです(--; ) 何か画期的な裏技がありましたら、教えてください。 お願いします。

    • ベストアンサー
    • HTML
  • XOOPSのHTMLタグ記入について

    XOOPS cube2.0を使用しています。 FAQモジュールで、質問/回答の項目を増やし、回答欄でHTMLタグを使用しましたが、どうも表示が不正です。 具体的には、TABLEタグなのですが、TABLEタグを使用してページを表示させた場合、かなり大きな空白が表の上にできてしまいます。 TABLEタグを消すとそういったことがなくなるので、TABLEタグが問題なのか、どうなのか。 ソースを表示させようと右クリックしても表示できないので困ってます。 何かよい助言をいただけないでしょうか。 ●必要事項を入力します。 <TABLE BORDER="1" WIDTH="100%" HEIGHT="100%" CELLSPACING="1" CELLPADDING="1"> <TR> <TD>1-1</TD> <TD>1-2</TD> <TD>1-3</TD> </TR> <TR> <TD>2-1</TD> <TD>2-2</TD> <TD>2-3</TD> </TR> </TABLE> としたときに、●必要事項を入力します。のすぐ下に何行もの空白が表示されます…

  • 列の幅をcssで指定するには?

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

    • ベストアンサー
    • HTML
  • <table>のclass指定が継承されない

    <table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。 HTMLを <table class="sample"> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table> とし、 cssを table, td { border: 2px #2b2b2b solid; } とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。 ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。 試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。 全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。 考えられる原因としてはどのようなものがありますでしょうか…?

    • ベストアンサー
    • CSS

専門家に質問してみよう