dポイントプレゼントキャンペーン実施中！

tableタグの中にtableタグ

締切済

  • 質問者：aonori77
  • 質問日時：
  • 回答数：3件

tableタグの中にtableタグ

課題をやっています。
ホームページを作っていて、画像のようなページを今作っています。

僕が書いたタグはこうです。（途中ですが、何か違うんだと思います。)

<html>
<head><title>FOMデンタルクリニック</title></head>
<body bgcolor="#99ccff" background="images/back.jpg" link="#cc0000" vlink="#663333" alink="#cc9999">
<table width="600" height="400" align="center" bgcolor="#ffffff" valign="top">
<tr><td><font size="2">完全予約制となっておりますので、あらかじめご予約ください。</font></td></tr><br>
<tr><td><hr></td></tr>
<tr><td><b><font size="4" color="#000099" align="left">診療科目</font></b></td></tr><br>
<br>
<tr><th align="left">
<ol>
<li>一般歯科</li>
<li>矯正歯科</li>
<li>審美歯科</li>
</th></tr><br>
<br>
<br>
<tr><td><b><font size="4" color="#000099" align="left">診療時間</font></b></td></tr><br>
<table width="500" height="90" align="center" border="1"><tr bgcolor="#ffcccc" align="center">
<th>時間</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
<tr>
<th>午前(9時～12時)</th>
<th>○</th>
<th>○</th>
<th>○</th>
<th>○</th>
<th>○</th>
<th>○</th>
<th>×</th>
</tr>
<tr>
<th>午後(15時～18時)</th>
<th>○</th>
<th>○</th>
<th>×</th>
<th>○</th>
<th>○</th>
<th>×</th>
<th>×</th>
</table>
<tr><td><b><font size="4" color="#000099" align="left">ご予約方法</font></b></td></tr><br>
<br>
<tr>
<th align="left">
<ul>
<li>予約専用フリーダイヤル（0120-333-XXX）にお電話ください。</li>
<li>予約専用メールアドレス（yoyaku@fom）にお名前と希望日時をご記入の上、お申し込みください。</li>
</th>
</tr>
</table>
<a href="index.htm"><img src="images/button.gif" border="0"></a>


</body>
</html>

何が違うんでしょうか？
tableの中にtableを使ってるからでしょうか^^;
ググってもよく分からないので教えてください。
よろしくお願いします。

「tableタグの中にtableタグ」の質問画像
通報する

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

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： ORUKA1951
  • 回答日時：

ちょっと腕試しに、HTML4.01strictで書いてみた。


Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でチェック済み
。投稿可能文字数の関係で一部省略。携帯端末でも表示OK
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>FOMデンタルクリニック</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" >
<style type="text/css">
<!--
body{background:#99ccff url(images/back.jpg)}
a img{border:none;}
a:link{ color:#cc0000}
a:visited{color:#663333}
a:active,a:hover{color:#cc9999}
div.main{width:600px;margin:10px auto;background-color:#ffffff;padding:0.2em 1em;}
h2,h3{color:#000099}
table{width:500px;margin:1em auto; background-color:white;border-collapse:collapse;border:ridge 3px;}
table thead tr{background-color:#ffcccc;}
table tbody td{text-align:center}
th,td{border:ridge 3px;}
address{text-align:center}
-->
</style>
<link rel="START" href="../index.html">
</head>
<body>
<div class="main">
<h2>完全予約制と・・略・・</h2>
<h3>診療科目</h3>
<ol>
<li>一般歯科</li>
<li>矯正歯科</li>
<li>審美歯科</li>
</ol>
<h3>診療時間</h3>
<table summary="診療時間一覧">
<thead>
<tr>
<th abbr="schedule">時間</th>
<th abbr="Mon">月</th>
<th abbr="Tue">火</th>
<th abbr="Wed">水</th>
<th abbr="Thu">木</th>
<th abbr="Fri">金</th>
<th abbr="Sat">土</th>
<th abbr="Sun">日</th>
</tr>
</thead>
<tbody>
<tr>
<th abbr="AM">午前(9時～12時)</th>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>×</td>
</tr>
<tr>
<td colspan="8">省略</td>
</tr>
</tbody>
</table>
<h3>ご予約方法</h3>
<ul>
<li>予約専用・・略・・</li>
<li>予約専用・・略・・</li>
</ul>
</div>
<address>
<a href="index.htm"><img src="images/button.gif" alt="トップへ" width="120" height="80"></a>
</address>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： TanakaHiro
  • 回答日時：

不適切と思われる点



・</tr>と<tr>の間には<br>を入れてもムダです。
・外テーブルのセルを細かく分けすぎなような気が・・・
・<th>と<td>の違いを把握してないような・・・
・<ol>や<ul>を閉じるタグがありません。
・内側のtable要素は、外側のテーブル要素のセル内（<td>～</td>内）に入れましょう。
・なお、htmlでは基本的に見てくれを指定しません。htmlは文書の要素をタグにより明確化するためのものです。

HTMLの例（見てくれに関するタグや属性は省いて書きます。検証してないのでタイプミスがあったら御免！）

（前略）・・・
<table>
<tr><td>完全予約制となっておりますので、あらかじめご予約ください。</td></tr>
<tr><td>
<h2>診療科目</h2>
<ol>
<li>一般歯科</li>
<li>矯正歯科</li>
<li>審美歯科</li>
</ol>
<h2>診療時間</h2>
<table>
<tr>
<th>時間</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
<tr>
<th>午前（９時～１２時）</th>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>休</td>
</tr>
<tr>
<th>午後（１５時～１８時）</th>
<td>○</td>
<td>○</td>
<td>休</td>
<td>○</td>
<td>○</td>
<td>休</td>
<td>休</td>
</tr>
</table>
<h2>ご予約方法</h2>
<ul>
<li>予約専用フリーダイヤル（0120-333-XXX）にお電話ください。</li>
<li>予約専用メールアドレス（yoyaku@fom）にお名前と希望日時をご記入の上、お申し込みください。</li>
</ul>
</td></tr>
</table>
・・・（以下略）

なお、見てくれは、CSSで指定すると良いでしょう。
本当は、外側にテーブルを用いる必要性がないので、外側は<div>ブロックとかにしておくなどといったマークアップが望ましいかと思います。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： 345itati
  • 回答日時：

http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
http://validator.w3.org/#validate_by_input
こちらで構文チェックをかけて、エラー指摘された部分を重点的に見直して下さい。
またHTMLの記述自体、現在では推奨されていないものを多く使っているのも問題です。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報