htmlの書き方と情報の配置について

このQ&Aのポイント
  • HTMLの書き方と情報の配置について、正しい方法を教えてください。
  • テーブルを使用して情報を配置する方法が最も正しいです。
  • セレクトボックスやボタンなどの要素も正しく配置してください。
回答を見る
  • ベストアンサー

このhtmlの書き方は正しいでしょうか。

下記の情報の配置の仕方は正しいでしょうか? 実際に使用するときは<tbody>~</tbody>を複数増やします。 サンプルでは2つですが、これが400以上になります。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <title></title> <style type="text/css"> body { background-color: #f5e088; margin: 0; padding: 0; font-size: 15px; } #base { width: 600px; margin: 0 auto; background-color: #fff; } table#ttt { width: 600px; background-color: #ccc; border: 2px solid #000; padding: 15px 0px; } table#ttt th, table#ttt td { width: 100px; } td#kkk { text-align:center; } table#ccc th { color: #f00; width: 60px; } table#ccc td { } .shashin, td.shousai { width: 150px; background-color: #ff0; } </style> </head> <body> <div id="base"> <form action="#"> <table id="ttt"> <tr> <th>市</th> <td> <select name=""> <option value="">指定していません</option> <option value="横浜市">横浜市</option> <option value="鶴見区">鶴見区</option> <option value="神奈川区">神奈川区</option> <option value="西区">西区</option> </select> </td> <th>町村</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>小学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> <th>中学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>データ</th> <td> <select name=""> <option value="">指定していません</option> <option value="500">500値未満</option> <option value="1000">500値以上1000値未満</option> <option value="1500">1000値以上1500値未満</option> </select> </td> <th>レベル</th> <td> <select name=""> <option value="">指定していません</option>  <option value="30">30Lv未満</option> <option value="60">30Lv以上60Lv未満</option> <option value="90">60Lv以上90Lv未満</option> <option value="100">90Lv以上100Lv以下</option> </select> </td> </tr> <tr> <td colspan="4" id="kkk"> <input type="button" id="" value="検索" onclick=""> </td> </tr> </table> </form> 方法その1 <table id="ccc"> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> </table> </div> </body> </html> このような内容を作る時はテーブルが一番正しいのでしょうか? 最も正しい方法を教えて頂きたいです。

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

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

テーブルを使うか使わないかは制作者の自由です。 制作者が「これは表です」と言い張るならそれは表なので、どう表現するかの問題です。 なので、 文章構造も多々あり、ベストではなくベターの判断です。 文法的に、不正とかの話は別です。 ただ、 見た限りでは、フォームは表では無いようなのでリストで良いと思います。 CSSで各種の疑似テーブル化が可能です。 下記データは、表と言えば表ですが、これもリストで良いでしょう。 400項目ものテーブルだとブラウザにより表示が遅くなる可能性はあります。 再現したところ、通常サイズでフォントが段落ちするし、 手狭な感じがするので、800px幅程度が良いかと思います。 colspan=""の合計数値も変ですね・・・ 添付画像: table非利用で再現する事も出来ます。

tekkenman7
質問者

お礼

ありがとうございます。

その他の回答 (1)

noname#158634
noname#158634
回答No.1

ソースなんかだらだら記載されても意味ないです。マークアップが正しいかどうかは内容との対応です。 セレクトボックスで選択して、それによって何かをするならフォームを使わなければならないし、しないなら使ってはならない。それだけの話。

tekkenman7
質問者

お礼

ありがとうございます。 セレクトボックスで選択して絞り込みさせる予定です。 このソースをブラウザで開いたときの内容を 添付画像にのせておけばよかったです。

関連するQ&A

  • 表の作成

    いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <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
  • スクロール付きのテーブルで、内側に線を付ける方法

    添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか? <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }

    • ベストアンサー
    • HTML
  • 1ページで2つのフォームをチェックしたいのですが…

    1つのページに同じ項目のフォームを2つ作りました。 そしてそれにチェックを設けたいと思いフォームチェックのスクリプトを入れてみました。 が、しかし、、 上のフォームはチェックが動くのですが、 下のフォームは何を入れてもチェックがエラー検出をして 次のページに進めなくなってしまいます。。 こちらはどのようにしたら両方のチェックが働きつつ 次のページに値を渡せるのでしょうか? 正しい書き方を教えてください。 よろしくお願いします。 <html> <head> <script language="JavaScript"> <!-- // 入力チェック function chkInputForm() { Error = new Array(); i = 0; // お客様の業種入力チェック if (document.forms[0].elements["part"].selectedIndex == 0) { Error[i] = "[ 1・2の選択 ] は必須項目です。"; i++; } // 会社(事務所)のご住所入力チェック if (document.forms[0].elements["pref"].selectedIndex == 0) { Error[i] = "[住まい] は必須項目です。"; i++; } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("以下の項目は必須です。\n\n"+ErrorText); return false; } return true; } //--> </script> </head> <body> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>1か2</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> </body> </html>

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

    練習でメニュー表作成をしているのですが、ややこしくてわかりません。。 やりたいことは、サービス内容と料金、ストレート、パーマ、トリートメントの色を同じに変更したいです。 ストレート、パーマ、トリートメントのところは右サイドの大人のところも料金も含めて色を変更したいです。 値段のところに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] 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
  • HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。

    HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。 下のソースで50と130のとこをきちんとエクセルのように枠線揃えたいのですが、 どのようにしたら良いのでしょうか? よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • JSFタグ<h:dataTable>でヘッダのcolspan

    お世話になります。 JSFの<h:dataTable>で、ヘッダをcolspanで結合する方法、さらにヘッダを2行にしたいのですが、可能でしょうか? 以下のようなhtmlを生成したいのです。 <table border="1">  <thead>   <tr>    <th colspan="2" scope="colgroup">May</th>    <th colspan="2" scope="colgroup">June</th>   </tr>   <tr>    <th>name</th>    <th>flag</th>    <th>name</th>    <th>flag</th>   </tr>  </thead>  <tbody>   <tr>    <td>5A</td>    <td>B</td>    <td>6A</td>    <td>D</td>   </tr>   <tr>    <td>7B</td>    <td>B</td>   </tr>  </tbody> </table> テーブル要素をカラム単位<h:column>で管理するので、このようなことはできないような気がしていますが、なにか方法ありませんでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • Java
  • jQueryで行の移動

    jQueryでテーブルの行を移動させたいのですが、なかなかうまくいきません。 <table id = "table_test"> <tbody id = "test1"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button1" value="テスト1"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test2"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button2" value="テスト2"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test3"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button3" value="テスト3"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> </table> 処理としては、button1を押下したら、<tbody id = "test1">~</tbody>の内容を<tbody id = "test2">と<tbody id = "test3">の間にくるように移動させたいです。 trの内容を次のtrの次に移動させることは調べてわかったのですが、tbodyで囲まれている部分をごっそり抜き出して、次のtbodyの後に移動させる方法がわかりません。 tbody内にはtrが複数あるため、移動させるというよりは、追加させてから削除するといった感じになるのでしょうか? どなたかご教授お願い致します。

  • phpでのselect値の取得・表記について

    php初心者です。 自動計算する見積ページを独学で作っているのですが、どうしてもわからなかったので、質問させてください。 htmlページでセレクトタグから選択してもらった結果(値)を、phpページに送信し、phpページでvalueとname両方を別々の場所に表記するには、どのようなコードを書けば良いでしょうか? valueの値をphpページで表記させたり計算させる事はなんとか独学でもできたんですが、nameを表記させる事がどうしてもできませんでした。 お詳しい方、何卒ご教授ください。 途中までなんとかできたタグを下記に記載します。 <例>input.html → output.php (1)input.html (細かいタグは端折ります) <html> <body> <form action="output.php" method="post"> <tr> <th>生菓子</th> <td> <select name="goods1" onChange="keisan()" style="padding:5px; border:1px solid #dcdcdc;" /> <option value="0" name="未選択">お選びください</option> <option value="500" name="フルーツケーキ">フルーツケーキ</option> <option value="3000" name="チーズケーキ">チーズケーキ</option> <option value="5000" name="チョコレートケーキ">チョコレートケーキ</option> <option value="※別途見積" name="おまかせ">おまかせ</option> </td> </tr> <tr> <tr>焼き菓子</th> <td> <select name="goods2" onChange="keisan()" style="padding:5px; border:1px solid #dcdcdc;" /> <option value="0" name="未選択">お選びください</option> <option value="500" name="クッキー">クッキー</option> <option value="3000" name="パウンドケーキ">パウンドケーキ</option> <option value="5000" name="パイ">パイ</option> <option value="※別途見積" name="おまかせ">おまかせ</option> </td> </tr> <tr> <th><input type="submit" value="submit" /></th> </tr> </form> </body> </html> ↓上記で選択してもらった値を下記のoutput.phpにsubmit。 (2)output.php (細かいタグは端折ります) <html> <body> <tr> <th>生菓子</th> <td>ここに選択されたnameの値を表記したい!</td> <td><?php echo htmlspecialchars($_POST["goods1"]); ?></td> </tr> <tr> <th>焼き菓子</th> <td>ここに選択されたnameの値を表記したい!</td> <td><?php echo htmlspecialchars($_POST["goods2"]); ?></td> </tr> <tr> <td colspan="2">Total </td> <td><?php echo htmlspecialchars( $_POST["goods1"] + $_POST["goods2"]); ?><td> </tr> </body> </html> 以上。 ぜひ、ぜひぜひご教授よろしくお願いいたします。

    • 締切済み
    • PHP
  • ジャバスクリプトで作った自動計算フォームが

    ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <html> <head> <title>テスト</title> <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 2900; document.form1.goods1.options[document.form1.goods1.selectedIndex].value; document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1 // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</td> <td><select name="goods1" onchange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select></td> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1(500円)</option> <option value="1000">タイプ2(1,000円)</option> <option value="1500">タイプ3(1,500円)</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>