- ベストアンサー
tableタグ内のテキストについて
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 現在レイアウトの主流になっているテーブル というのは誤った認識です。 現在、レイアウトのためにテーブルを使用することは推奨されていません。レイアウト目的にはスタイルシートを使用することが推奨されています。 tableは、あくまでも表を作成するためのタグです。 見出し<h1> 中見出し<h2> 小見出し<h3> 本文（段落）<p> 表<table> 本文（段落）<p> といった、正しい文書構造（一例ですが）でHTMLを書くと 自ずと表の中には見出しや段落は入りません。
その他の回答 (1)
僕は時折やりますね・・・・(笑)まとまりが欲しいと思ったときには。 HTML 4.01だと <!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell--> だし。良くやるのはul li内にh3とpとか(h1,h2は本文用)かな。 その場合自分は <!ELEMENT LI - O (%flow;)* -- list item --> じゃなくて <!ELEMENT LI - O ((%block;)*|(%inline;)*) -- list item --> だと思うようにしている。 ISO-HTMLだと多分h1～h6は%block;に入らなかったと思うから(DTD未確認)、使うとしたらpだけになりそうだけど。
お礼
回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 回答を見ていると他にも様々なレイアウト方法があるのですか。ちなみに私はXHTML Transitional+CSSでWebページのレイアウトをしています。
関連するQ&A
- tableタグについて
tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示（Chrome）では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか？ どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}
- ベストアンサー
- CSS
- tableタグによるエラー
モバイルサイトの制作の際に tableタグを使用した箇所で ページスクロールをすると 意図しない場所に飛ぶことがあります。 例えばページ下部にtableタグを記述し 実機で最下部から上部へ ページスクロールするとtableタグの箇所で 最上部に飛んでしまうことがありました。 記述ミスではなくtableタグを使わないと 直りました。 モバイルサイトの制作の際、 複雑なレイアウトにする場合、tableタグが必要になります。 これはどのようなことが原因なのでしょうか。
- 締切済み
- HTML
- <tr>タグ、<td>タグ
テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。 (1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。 (2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。
- ベストアンサー
- HTML
- tableタグとformタグの組み合わせ
tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか？ 私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので お聞きしました。 ＜table＞ ＜form＞ ＜input type="hidden" name="a" value="1"> ＜tr＞ ＜td＞ ＜input type="text" name="b" value=""＞ ＜/td＞ ＜/tr＞ ＜tr＞ ＜td＞ ＜input type="submit" value="OK" value=""＞ ＜/td＞ ＜/tr＞ ＜/fomr> ＜/table＞
- ベストアンサー
- HTML
- テーブルの一つのtdタグだけ、文字を小さく
テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい
お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1> <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ～行が続きますが省略～ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルでデザインするのはよくないのですか
テーブルを利用して左右２分割で 左側にイメージ、右側に説明文という形式にしています。 大分省略してますが、具体的なソースイメージは次の通りです。 これがテーブルでデザインをしていて良くないとのことです。 <body> ・・・ <table><tr> <td><img src="img1"></td> <td><p>説明文</p></td> </tr></table> ・・・ </body> ただ、当方としてはこれがテーブルを利用しての ページレイアウトの調整に該当するのかも良く分かっていません。 また、例え該当しても、どの程度の好ましくないのでしょうか。 絶対に止めるべきとか、そんなに神経質になる必要はないのか。 ご指導よろしくお願いします。
- ベストアンサー
- CSS
- IE7でinputタグのtextがはみ出る
いつもお世話になります。 以下のソースのように、テーブルのtdの中にinputタグのtextを、widthを100%にして配置しています。 IE7でこれを表示すると、はみ出るというか突き抜けるというか、、、 という状態になっています。 これがIE8以上からだと、box-sizingを使用すればうまくいくのですが、IE7以下ではこのCSSは使えません。 IE7において、tdの中にうまく収めるためには、どのようにすればよいのでしょうか。 --------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <table border="1"> <tr> <th>テキスト</th> <td style="width: 100px;"> <input type="text" style="width: 100%;" /> </td> </tr> </table> </body> </html> --------------------------------------------- 宜しくお願いします。
- ベストアンサー
- CSS
- tableタグとtableタグの間の余白の消し方について
現在モバイル用のHPを作成しているのですが、 AUで見た際に、tableタグとtableタグの隙間(空白)が出来てしまいます。 tableタグ1個でまとめればどうってことのない問題なのですが、 デザイン上、どうしてもtableタグを分ける必要があるります。 ■以下ソースです。 ************************************* <html> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title>タイトル</title> </head> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#FFFFCC"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> ・ ・ ・ ************************************* ↑の… </table> ←この部分に余白ができます。 <table width="100%" border="0" cellpadding="0" cellspacing="0"> どなたか原因と解決法をご教示いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 元々この質問は仮にテーブルレイアウトをとった場合、セル内のテキストにCSSの適用ができるのかと思ったからです。 kaiwareponさんの言うとおりなら、テーブルを使わず色々チャレンジして他のレイアウトを考えてみます。