アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：tekkenman7
  • 質問日時：
  • 回答数：2件

下記の情報の配置の仕方は正しいでしょうか？
実際に使用するときは<tbody>～</tbody>を複数増やします。
サンプルでは２つですが、これが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>

方法その１
<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>

このような内容を作る時はテーブルが一番正しいのでしょうか？
最も正しい方法を教えて頂きたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

ソースなんかだらだら記載されても意味ないです。

マークアップが正しいかどうかは内容との対応です。
セレクトボックスで選択して、それによって何かをするならフォームを使わなければならないし、しないなら使ってはならない。それだけの話。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
セレクトボックスで選択して絞り込みさせる予定です。

このソースをブラウザで開いたときの内容を
添付画像にのせておけばよかったです。

通報する
お礼日時：2011/10/22 09:16

No.2ベストアンサー

  • 回答者： naokita
  • 回答日時：

テーブルを使うか使わないかは制作者の自由です。


制作者が「これは表です」と言い張るならそれは表なので、どう表現するかの問題です。
なので、
文章構造も多々あり、ベストではなくベターの判断です。
文法的に、不正とかの話は別です。
ただ、
見た限りでは、フォームは表では無いようなのでリストで良いと思います。
CSSで各種の疑似テーブル化が可能です。

下記データは、表と言えば表ですが、これもリストで良いでしょう。
400項目ものテーブルだとブラウザにより表示が遅くなる可能性はあります。

再現したところ、通常サイズでフォントが段落ちするし、
手狭な感じがするので、800px幅程度が良いかと思います。
colspan=""の合計数値も変ですね・・・

添付画像：　table非利用で再現する事も出来ます。
「このhtmlの書き方は正しいでしょうか。」の回答画像2
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

通報する
お礼日時：2011/12/30 16:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報