はじめての親子ハイキングに挑戦!! >>

<table>
 <tbody>
  <th>くだもの</th>
   <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
   …etcとして
くだもの
・りんご
・みかん
・すいか
としたいのですが、
<table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
HTMLの仕様に反していますでしょうか?

A 回答 (4件)

きちんとネストされていれば構いません。


ただ、書かれた例だと
・テーブルを構成する<THEAD>, <TR>タグが無い
・<UL>が閉じていない
というエラーがあるので、それを直せばいいでしょう。

<table>
 <thead>
  <tr><th>くだもの</th></tr>
 </thead>
 <tbody>
   <tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
   :
   :
 </tbody>
</table>
    • good
    • 2
この回答へのお礼

ごめんなさい、遅れました!。
ご回答ありがとうございます!
なる程tableの中にthadとtr,直してみます!

お礼日時:2011/04/02 05:53

td、セルに何を入れようが自由ですが、


tableは表なので、その例での利用方法は変かも知れない。

<dl><dt></dt><dd></dd></dl>
定義リストで、
<dt>くだもの</dt>を定義してからリスト化してみるとか。
<dd></dd>の中にも<ul><li>でのリストは作れます。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!
<dd></dd>の中にも<ul><li>のリストが作れるんですね!。

お礼日時:2011/04/02 05:53
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
早速検証してみます。

お礼日時:2011/03/30 18:36

特に問題は無いのではないかと思います。


ただ、ちゃんと</ul>で閉じるようにしたほうが良いでしょう。
タグの開始と終了のペアが変に前後するとおかしな結果になりかねません。
    • good
    • 0
この回答へのお礼

ごめんなさい遅れました、
ご回答ありがとうございます!
タグの開始と終了にペアが出来るようにしたいと
思います!

お礼日時:2011/04/02 05:53

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qテーブルタグの中に
  1. を入れても正常に数字が表示されません。

テーブルタグの中に<ol><li>を入れても正常に数字が表示されません。
例えばテーブルの外に<ol>を入れて中に<li>を入れても表示される数字が
全部1になってしまいます。またテーブルの中に<ol>を入れても同じようになってしまいます。どなたか解決法をご存知の方がいらっしゃりましたら、
アドバイスお願いいたします。

Aベストアンサー

一応、こんな感じで打ってみました。

<table border="1"><tr><td>
<ol><li>1行<br>
<li>2行<br>
<li>3行</td></tr></table>

こういう意味で良いのでしょうか…
自分のパソコンで確認した際は、テーブルの中に

1.1行
2.2行
3.3行

と表示されました。
違っていましたら済みません。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qliタグの中に

タグやら

を入れるのはあり?

それともなしでしょうか?
たとえば、作品実績みたいなのを羅列するとき

「画像」
「タイトル」
「簡単な説明」

を乗せたいときはどうしますか?
<ul>
<li>
<p>画像</p>
<dl>
<dt>タイトル</dt>
<dd>説明</dd>
</dl>
</li>
</ul>

こんな感じを考えたのですが・・・
<li>(作品)ごとにボーダーボトムで区切りたいかなと考えております。

<li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか?


</ul>

Aベストアンサー

#1 ORUKA1951です。
#1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
★携帯端末では縦に並びます。
 ディスプレイの幅が狭いときもtableのように、はみ出ません

 このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います。リストに何を使うかとなると悩むところですね。
OL ordered list 序列リストは、順番が必要なとき以外は使わないでしょう。
DL definition list 定義リストでも良いかな?
・・・そして、なによりもリストにしておけば、携帯端末や読み上げソフト、あるいは検索エンジン最適化からも良いでしょう。
しかし、「(作品)ごとにボーダーボトムで区切りたいかな」という条件が一つありますね。
だとすると、
【注意】
 ★分かりやすくするため全角スペースでインデントされています。
  利用するときはタブに変換すること
 ★これは、私のページ一部を抜粋したもの。画像は200px×150px
 ★基本的にCSSのためだけのclass,id,divは無いのでHTMLはシンプルです。
 ★セレクタの使い方は調べること。
 ★これはolですがulでもよい。
 ★本来は、
 <div id="photoList">
  <ol>
   <li>本体
    <ul>
     <li><img src="./photo/R0011583.jpg" width="200" height="150"
        alt="ディスプレイを開く"></li>
     <li>本体を正面から撮影したところ、パネルの下がカバー</li>
    </ul>
   </li>
とマークアップしたほうがスマートでしょう。


______________サンプルソース。
<!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>ディスプレイの分解:ノートパソコンの分解</title>
 <meta http-equiv="Content-Style-Type" content="text/css">
 <style>
<!--
  @media screen{
   div#photoList{
    display: block;
    border: solid green 1px;
    margin: 1em 10% 1em 10%;
    background-color: rgb(200,200,200);
    padding:0px;
   }
   div#photoList > ol{
    margin: 0px;
    padding: 0px;
   }
   div#photoList > ol>li{
    display:block;
    width: 210px;
    float:left;
    border-style: solid;
    border-color: black gray gray black;
    border-width: 1px 4px 4px 1px;
    padding: 5px;
    height: 240px;
    margin: 5px;
    background-color: white;
   }
   div#photoList > ol>li dl{
    margin:0px;
   }
   div#photoList > ol>li dl dt{
    padding: 5px 10px;
   }
   div#photoList > ol>li dl>dd{
    margin-left: 0px;
    text-align: center;
   }
   div#photoList > ol>li dl dd+dd{
    margin-left: 0px;
    text-indent: 1em;
    font-size: 0.8em;
    line-height: 1.5em;
    text-align: left;
   }
   div#photoList > hr{
    clear: both;
    margin: 0px;
    visibility: hidden;
   }
  }
-->
 </style>
</head>
<body>
 <h1>ノートパソコンの分解</h1>
 <h2>ディスプレイの分解</h2>
 <div id="photoList">
  <ol>
   <li>
    <dl>
     <dt>本体</dt>
     <dd><img src="./photo/R0011583.jpg" width="200" height="150"
         alt="ディスプレイを開く"></dd>
     <dd>本体を正面から撮影したところ、パネルの下がカバー</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>ビスの位置</dt>
     <dd><img src="./photo/R0011587.jpg" width="200" height="150"
         alt="カバーを外す"></dd>
     <dd>電源スイッチカバーを外すとビスがでてくる。</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>パネルを開く</dt>
     <dd><img src="./photo/R0011590.jpg" width="200" height="150
         alt="パネルを180度開く"></dd>
     <dd>ヒンジに負荷がかからないようにパネルを一杯に開く</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>パネルを裏返しに</dt>
     <dd><img src="./photo/R0011597.jpg" width="200" height="150"
         alt="パネルを1裏返す"></dd>
     <dd>取り外したパネルを裏返しにする。</dd>
    </dl>
   </li>
  </ol>
  <hr>
 </div>
</body>
</html>

#1 ORUKA1951です。
#1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
★携帯端末では縦に並びます。
 ディスプレイの幅が狭いときもtableのように、はみ出ません

 このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います...続きを読む

Qテーブルの入れ子について

このようにテーブルを入れ子にするのは不可能なのでしょうか?

<table>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <tr>
  <td colspan="4">
    <table>
     <tr>
     <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
     </tr>
    </table>
  </td>
 </tr>
</table>

cssなどでいろいろと設定しても、
「5・6・7・8」のセルが「1」のセルの幅にしかなりません。
colspanしているセル全体にテーブルを置きたいのですが・・・。

間違いを教えて下さい。
よろしくお願いします。

Aベストアンサー

No.1です。
図で解説すると・・tableのcellは内容の量に比例して配分されるので図の上になる。
tableの子孫のtableについてのみセル内100%幅なら
table table{}
table tbody tr table{
table tbody td table{
table tr td table{
table tbody table{
table tbody td table{
table tr td table{
table tr table{
td>table{ /*子供*/
・・どれでもよいけど、詳細度で他と区別したけりゃ適当なものを

Qtableの中で

タグを使うと…

<td>内に文章を書く際に「<p>文章</p>」とした所、
InternetExplorerでは
──枠──
文章
──枠──
と表され、
Mozillaでは
──枠──

文章

──枠──
となってしまいました。

これでは見栄えが異なってしまうので困っています。
同じ記述で同じように表示出来るような解決策をご教授下さい。

Aベストアンサー

スタイルシートで調整してください。

td p {margin:0 auto;}

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか?

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もしくは読み上げ)されることになります。
 その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
 あるいは、alt="本人の写真"
 と画像が表示されない人も画像から得られるはずの情報をいれておく。

 になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
 これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

 <p class="figure main">
  <img src="" width="" height="" alt="麓から見た紅葉の城山">
 </p>
 <p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
 <p class="figure sub">
  <img src="" width="" height="" alt="玄関で見送る妻">
 </p>
 <p>
  妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
 </p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もし...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング