- ベストアンサー
フォームでテーブルの制御ってできる？
shiba1の回答
- shiba1
- ベストアンサー率41% (10/24)
どうも、こんばんは。 JavaScriptを使えば可能だと思います。 ソースを全部書き換えちゃいますが、、 こんなのは、どうでしょう。 試してみてください。 数値の書き換えも可能だと思いますが、 スミマセン。やってみてソースを見て感じを掴んでください。 失礼しました。 ソースの例： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> <META http-equiv=Content-Script-Type content=text/javascript> <script language="JavaScript"> <!-- function mytbl () { tcnt1 = parseInt(document.tmaker.m1.value) ; tcnt2 = parseInt(document.tmaker.m2.value) ; tcnt3 = parseInt(document.tmaker.m3.value) ; tcnt4 = parseInt(document.tmaker.m4.value) ; if(tcnt1==tcnt2+tcnt3+tcnt4){ document.write('<table border="1"><tr><td rowspan="'+ tcnt1 +'" bgcolor="#6699ff">1</td><td rowspan="'+ tcnt2 +'" bgcolor="#99ccff">2</td><td>3</td></tr>'); for(rcnt=1;rcnt<tcnt2;rcnt++) {document.write('<tr><td>'+(rcnt+3)+'</td></tr>');} document.write('<tr><td rowspan="'+ tcnt3 +'" bgcolor="#ccffff">'+(rcnt+3)+'</td><td>'+(rcnt+4)+'</td></tr>'); for(scnt=1;scnt<tcnt3;scnt++) {document.write('<tr><td>'+(rcnt+scnt+4)+'</td></tr>');} document.write('<tr><td rowspan="'+ tcnt4 +'" bgcolor="#f0ffff">'+(rcnt+scnt+4)+'</td><td>'+(rcnt+scnt+5)+'</td></tr>'); for(qcnt=1;qcnt<tcnt4;qcnt++) {document.write('<tr><td>'+(rcnt+scnt+qcnt+5)+'</td></tr>');} document.write('</table>');} else{alert('全体の行と\nそれぞれの行の合計を\n合わせて下さい。');} } //--> </script> </head> <body> <table border="1"> <tr><td rowspan="6" bgcolor="#6699ff">1</td> <td rowspan="3" bgcolor="#99ccff">2</td> <td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td rowspan="2" bgcolor="#ccffff">6</td> <td>7</td></tr> <tr><td>8</td></tr> <tr><td bgcolor="#f0ffff">9</td><td>10</td></tr> </table> <form name="tmaker"> 全体<font color="#6699ff">■</font>の行：<input type="text" value="6" size="4" name="m1"> <font color="#99ccff">■</font>の行：<input type="text" value="3" size="4" name="m2"> <font color="#ccffff">■</font>の行：<input type="text" value="2" size="4" name="m3"> <font color="#f0ffff">■</font>の行：<input type="text" value="1" size="4" name="m4"> <input type="button" value="Click!" onClick="mytbl()"> </form> <hr> </body> </html>
関連するQ&A
- 入れ子にしたテーブルを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
- テーブル内での改行がうまくいかない
ウィンドウが小さくなると、それに合わせてテーブルも小さくなると思っていたのですが、下のソースを表示すると、テーブルが一定の大きさから小さくなりません。何が悪いのでしょうか。 --ソース-- <HTML> <HEAD></HEAD> <BODY > <TABLE border="1"> <TR> <TD>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</TD> </TR> </TABLE> </BODY> </HTML> よろしくお願いします。
- ベストアンサー
- HTML
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- テーブルの線の幅を一重の線にしたい
<HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。
- ベストアンサー
- HTML
- tableがうまくいかないのですけど
どうしてなのでしょう 自分はmac os xなんですけど 文字化けしたり、セルがバラバラだったり、背景色も乗らないんですけど、 まだ初心者なんで教えて下さい。 <html> <head> <title>TheMY WorlD PloF AreA</title> </head> <body text="white" bgcolor="black"> <table border="2" border color="blue" cellpadding="10px"> <tr><td rowspan="2">NemE</td><td>TheMY</td></tr> <tr><td rowspan="2">From AreA</td><td>廣島</td></tr> <tr><td rowspan="2">HoW TO MY WaY</td><td>GO WitH FroW</td></tr> <tr><td rowspan="2">LikeS BooK</td><td>清水次郎長三国志、富島松伍郎伝</td></tr> <tr><td rowspan="2">LikeS MangA</td><td>COBRA,銀魂、ガキジャン、</td></tr> <tr><td rowspan="2">LikeS Musician</td><td>2Pac,EMINEM,SnooP Dogg,50cent<br>Lill Jon,Big Daddy Kane<br>Nas,Eazy E,<br>,,,So My love Hip Hop</td></tr> <tr><td rowspan="2">LikeS MuzaC</td><td>2Pac-Hit En' Up<br>Snoop dogg-Candy</td></tr> <tr><td rowspan="2">LikeS AnimE</td><td>disny</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- HTMLのテーブルについて
HTMLのテーブルについて 今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。 これを解決するにはどのように改善すればいいのでしょうか？ <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>１</td> <td>Ａ君</td> <td>(1)</td> </tr> <tr> <td>１</td> <td>Ｂ君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>１</td> <td>Ｃ君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>２</td> <td>Ｄ君</td> <td>(3)</td> </tr> <tr> <td>２</td> <td>Ｅ君</td> <td>(4)</td> </tr> <tr> <td>２</td> <td>Ｆ君</td> <td>(5)</td> </tr> </table> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブルを横に二つ並べて表示する方法はありますか？
テーブルを横に二つ並べて表示する方法はありますか？ 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に２個並んでしまいます。
- 締切済み
- HTML
- テーブルをテーブルで囲う意味はありますか？
<table border=1> <tr><td> <table border=1> <tr><td> a </td><td> b </td></tr> </table> </td> </tr> </table> このようにテーブルをテーブルで囲う意味はありますか？ ｈｔｍｌの勉強をしていて、 ネット上でテーブルのサンプルを拾ったのですが、 上記のようにテーブルをテーブルで囲んでました。 この方法でサイト上に１００個くらいテーブルを作ってしまったのですが 今更ながらこういう書き方に意味はあるのかな？ と思い始めてきました。 意味はあるのでしょうか？
- ベストアンサー
- HTML
- TABLE内のTABLEのHEIGHT属性が利かない
TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか？しょうがないのでしょうか？ それともCSSで解決できるものでしょうか？ ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- FireFoxでborder-collapseを使うと余計な枠線が表示される
FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td class=none> </td><td td class=none> </td><td class=none> </td><td class=none> </td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
お礼
ありがとうございます！ これだと入力したあとHTML形式になるので 加工が楽ですね。 テーブルを作り、 テキストを書いた後に 同じようにテーブルを付け加えることってできるんですか？ いろいろ細かい質問ですいません。
補足
HTMLのソース部分が 一列になってしまうんですけど、 適当に分割させることは無理ですか？ テーブル作成後、 テキスト部分を加工したいので それが一列になってくれると非常に助かります。 よろしくお願いします。