• ベストアンサー

TABLEのマスの増やし方

HTMLのテーブル？について教えて下さい。 ******************************************************************************************************************************* <TABLE class=table_a style="WIDTH: 100%"> <TBODY> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR></TBODY></TABLE> ******************************************************************************************************************************* という記載で、縦3列横3列の表が出来るのですが 表の内容（枠組み）を変更する方法が分かりません。 *********************************************************** <TABLE class=table_a style="WIDTH: 100%"> <TBODY> <TR> <TD class=table_a_th2 rowSpan=2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td> <P>右列<BR class=first-child>右列</P> <P>右列</P></TD></TR> <TR> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> ************************************************************* 作成したいのはこのようなイメージのもので 中列と右列を増やして行きたいのです。 どなたか詳しいかたご教授下さい。

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

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

  • ベストアンサー
  • hoso1974
  • ベストアンサー率78% (11/14)
回答No.2

こんな感じですか？ <table class="table_a" style="WIDTH: 100%"> <tr> <td rowspan="3" class="table_a_th2">左列</td> <td rowspan="2" class="table_a_td">中列</td> <td class="table_a_td">右列</td> </tr> <tr> <td class="table_a_td">右列</td> </tr> <tr> <td class="table_a_td">中列</td> <td class="table_a_td">右列</td> </tr> </table>

himefugu
質問者

お礼

無事解決いたしました。 ありがとうございました！

その他の回答 (1)

  • takoashi
  • ベストアンサー率39% (21/53)
回答No.1

セルを結合するイメージですかね？ このあたりが参考になるでしょう。 http://www.tohoho-web.com/html/table.htm

参考URL：
http://www.tohoho-web.com/html/table.htm
himefugu
質問者

お礼

ありがとうございます。 参考にさせて頂きます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • テーブルの料金表の複雑な記述方法

    練習でメニュー表作成をしているのですが、ややこしくてわかりません。。 やりたいことは、サービス内容と料金、ストレート、パーマ、トリートメントの色を同じに変更したいです。 ストレート、パーマ、トリートメントのところは右サイドの大人のところも料金も含めて色を変更したいです。 値段のところにclassを設定したから、縦には全部色を変えれるのですが、横にとなるとわかりません。 どのように記述すればよいでしょうか？ <table width="558" style="position: relative; top: -506px; left: 240px;"> <thead> <tr> <th rowspan="2" colspan="2"> サービス内容 </th> <th width="99" height="29" colspan="3"> 料金 </th> </tr> </thead> <tbody> <tr> </tr> <tr> <th width="165" rowspan="3"> カット </th> <td class="white" width="270"> 大人（一般） </td> <td class="price"> \4,200 </td> </tr> <tr> <td class="white"> 中学・高校生 </td> <td class="price"> \3,000 </td> </tr> <tr> <td class="white"> 小学生以下 </td> <td class="price"> \2,500 </td> </tr> <tr> <th> ストレート </th> <td class="white"> 縮毛矯正（カット・ブロー込） </td> <td class="price"> \8,600 </td> </tr> <tr> <th> パーマ </th> <td class="white"> カット・ブロー込 </td> <td class="price"> \5,200 </td> </tr> <tr> <th> カラー </th> <td class="white"> ファッションカラー </td> <td class="price"> \4,500 </td> </tr> <tr> <th rowspan="2"> トリートメント </th> <td class="white"> スペシャルプラチナ </td> <td class="price"> \2,300 </td> </tr> <tr> <td class="white"> スペシャルイオン </td> <td class="price"> \4,100 </td> </tr> </tbody> </table>

  • 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　幅指定でtheadとtbodyがずれる

    bootstrapを使っているのですが、 個別に幅設定がしたいので、htmlに下記を追加しました。 theadは問題なく幅設定できているのですが、tbodyがうまく適用されていないようで theadとずれてしまいます。 theadとtbodyの幅を合わせるにはどのようにすれば良いでしょうか？ <style type="text/css"> .scroll1 { width: 1600px; table-layout: fixed; } .scroll1 thead, .scroll1 tbody { float: left; } .scroll1 tbody { height: 350px; overflow-y: scroll; } .c1 { table-layout: fixed;width: 200px; } .c2 { table-layout: fixed;width: 100px; } .c3 { table-layout: fixed;width: 100px; } .c4 { table-layout: fixed;width: 200px; } .c5 { table-layout: fixed;width: 200px; } .c6 { table-layout: fixed;width: 200px; } .c7 { table-layout: fixed;width: 100px; } .c8 { table-layout: fixed;width: 250px; } .c9 { table-layout: fixed;width: 250px; } </style> <table class="table table-bordered table-striped"> <tr> <td> <table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1"> <thead> <tr style=""> <th class="c1">アクション</th> <th class="c2">店舗コード</th> <th class="c3">ユーザID</th> <th class="c4">ユーザパスワード</th> <th class="c5">ユーザ名</th> <th class="c6">メールアドレス</th> <th class="c7">管理権限</th> <th class="c8">更新日</th> <th class="c9">登録日</th> </tr> </thead> <tbody> <tr style=""> <td style="width:200px;table-layout:fixed"> <input type="submit" value="削除" /> <input type="submit" value="編集" /> </td> <td style="width:100px;table-layout:fixed"> <span >2697</span> </td> <td style="width:100px;table-layout:fixed"> <span >002</span> </td> <td style="width:200px;table-layout:fixed"> <span >000000</span> </td> <td style="width:200px;table-layout:fixed"> <span >大築</span> </td> <td style="width:100px;table-layout:fixed"> <span ></span> </td> <td style="width:100px;table-layout:fixed"> <span >0</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:39</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:48</span> </td> </tr> </tbody> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • 入れ子にしたテーブルをheight100%にする

    お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • tableのヘッダを固定したい

    IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 　・width: ?%として大きさを可変にする。 　・ヘッダを固定する。 　・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>

  • テーブルにCSSの枠のつけ方

    はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページ​http://www.rakuten.ne.jp/gold/royalparty/​ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • 表の作成

    いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick=""> <!-- ж --> </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick=""> <!-- ☆ --> </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テーブルの行の背景色をマウスオーバー時に変えたい

    <table>で表を作成しています。 表の行がマウスオーバーされたときに、その行の背景色が変わるようなページを作っています。 1行ずつなら css の tr:hover で解決しますが、表の中に rowspan を使うとうまくいきません。 下の表があったとします。現在のままだと、 ●A3セルをマウスオーバーすると、B3-2・C3-2セルの背景色が変わらない。 ●B3-2セルをマウスオーバーすると、3・A3・D3セルの背景色が変わらない。 やりたいのは、3 の行全ての背景色を変えたいのです。 ┏━┳━┳━━┳━━┳━┓ ┃行┃Ａ┃ Ｂ ┃ Ｃ ┃Ｄ┃ ┣━╋━╋━━╋━━╋━┫ ┃１┃A1┃ B1 ┃ C1 ┃D1┃ ┣━╋━╋━━╋━━╋━┫ ┃２┃A2┃ B2 ┃ C2 ┃D2┃ ┣━╋━╋━━╋━━╋━┫ ┃ ┃ ┃B3-1┃C3-1┃ ┃ ┃３┃A3┣━━╋━━┫D3┃ ┃ ┃ ┃B3-2┃C3-2┃ ┃ ┣━╋━╋━━╋━━╋━┫ ┃４┃A4┃ B4 ┃ C4 ┃D4┃ ┗━┻━┻━━┻━━┻━┛ 過去に同じような質問があったので試してみましたが、IE以外では動きませんでした。 ↓ http://okwave.jp/qa/q4793130.html CSSのみでやりたかったのですが、JavaScriptを使わないとダメでしょうか？ 色の変更は、できれば CSS で行いたいのです。 質問がわかりづらくてすみません。よろしくお願い致します。 以下サンプルです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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.test-01 tr { text-align:center; } table.test-01 thead th { background-color: #32a632; } table.test-01 tbody tr:hover { background-color: #ffddff; } --> </style> </head> <body> <table border="1" cellspacing="0" class="test-01"> <thead> <tr> <th>行</th> <th width="50">A</th> <th width="180">B</th> <th width="60">C</th> <th width="60">D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>2</td> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <td rowspan="2">3</td> <td rowspan="2">A3</td> <td>B3-1</td> <td>C3-1</td> <td rowspan="2">D3</td> </tr> <tr> <td>C3-2</td> <td>D3-2</td> </tr> <tr> <td>4</td> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルのレイアウトがおかしくなる

    畏れ入ります。 テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18">&nbsp;</th> <th width="100">&nbsp;</th> <th>&nbsp;</th> <th width="100">&nbsp;</th> </tr> <tr> <td rowspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="3">&nbsp; <!-- ここに　たくさんの　文字列を入れると　・・・　--> </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、 ここにたくさんの文字列（半角30文字程度でおかしくなります）を投入すると、レイアウトが異常に崩れてしまいます。 文字列は改行してもかまわないのですが テーブル1行目2行目のセルサイズ（width）がこのように変化してしまうと困るのです。 どのようにしたら良いか（width=100の部分を守らせたい） 教えてください。

    • ベストアンサー
    • HTML
  • tableのセル高さの固定法

    下記のようなTABLEがあるとします． 右の列は縦３行を連結した１つのセルになっています． また左上の「１」のセルの高さは，50PIXとなっています． いま，右列セルの内容が増えて，table全体の高さが増した場合， 「１」セルはその高さ指定50PIXを無視して拡がってしまいます． このような状況を回避して，右列セルの高さがどうあろうとも 「１」セルの高さを固定する方法を教えて下さい． （例えば，右列セルが高くなった場合， 　「１」セルと固定する代わりに「３」セルを拡げて全体の高さを確保する，など） <TABLE border="1"> <TBODY> <TR> <TD HEIGHT="50PIX">１</TD> <TD ROWSPAN=5> ●あ<br> ●あ<br> ●あ </TD> </TR> <TR> <TD>２</TD> </TR> <TR> <TD>３</TD> </TR> </TBODY> </TABLE>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する