table要素の余分なマージンを削除する方法
- IE6.0～IE8.0のブラウザで、table要素の周囲に余分なマージンが発生する場合の解決方法を教えてください。
- body要素とtable要素のマージンとパディングをリセットしても、table要素の周囲には依然として余分なマージンが生じます。
- HTMLのDOCTYPE宣言をHTML4.0に変更しても同様の問題が発生します。どのようにすれば余分なマージンを取り除くことができるのでしょうか？
- ベストアンサー
table要素の周囲に、余分なマージンができる
ブラウザは、IE6.0～IE8.0です。body要素、table要素のマージン、パディングをリセットしているにも関わらず、table要素の周囲に、余分なマージンが発生します（文書型宣言を、HTML4.0にしても同様）。どのようにすれば、余分なマージンを削除できるでしょうか？どなたか、おわかりになりますか？ ■■↓HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"? lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="あいうえお" /> <meta name="description" content="あいうえお" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="INDEX" href="./index.html" /> <link rel="stylesheet" href="./base.css" type="text/css" media="all" /> <link rev="MADE" href="mailto:aaa@yahoo.co.jp" /> <title>あいうえお</title> </head> <body> <table> <br> <td>aaa </td> </br> </table> </body> </html> ■■↓css■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ @charset "utf-8"; *{ margin: 0; padding: 0; } table{ margin: 0; padding: 0; width:800px; color:#ffff00; background-color:#000000; }
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<br> や <td> を <table> の直子にしてはいけません。 というか、 tr のつもりで br を書いてるんでしょうか？ <table> <tr> <td>あああ</td> </tr> </table> これで試してください。 これで問題の余白が消えるかどうかは判りませんが、tr の替りに br を使うのは間違いなので、今後とも tr を使ってくださいね。
関連するQ&A
- はじめまして
はじめまして 下記のUTF-8をhift_JISに変改したいのですが。 変換してアップすると文字化けになるか、画面上は真っ白（ソース上では文字化け）になってしまいます。 どのようにしたら変換できるのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>＊＊＊＊＊＊＊＊＊＊＊＊</title><!-- ▼▼ページタイトル▲▲ --> <link href="components/css/default.css" rel="stylesheet" type="text/css" /> </head> <body>
- ベストアンサー
- HTML
- 日本語が下記のように文字化けしました。
サブライム３を使っていた所、突然日本語が下記のように文字化けしました。 サブライム上では文字化けしていません。 ブラウザ、DWで見るとします。 バグで文字コードが変わるなどあるのでしょうか？ DWで見るとUTF8と表示されています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="robots" content="noindex,noimageindex,nofollow" /><!--onlysample--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /><!--mobile--> <meta name="keywords" content=" ,** h, Q " /> <meta name="description" content=" ɲ Q f ϡ ** h ɲ Фؤ ߤη ؤ Q ⰸ ڤ Ƥ ޤ Ф H Ҥ Ĥ꤯ " /> <title> k3 , o Ϥ ɲ Ф ߤ ڤ ޤ | ɲ Q f </title> <!--script lightbox--> <link rel="stylesheet" href="lightbox.css" type="text/css" /> <!--main--> <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="index.css" type="text/css" /> </head>
- ベストアンサー
- CSS
- 下記のタグの中で必要ないのはありますか？
(1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
- 締切済み
- HTML
- FirefoxでCSSが読み込めない。
ＨＰを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title></title> </head> <body>
- ベストアンサー
- HTML
- headerの添削お願いします。
自分なりに書いてみたのですがおかしいところがあったら教えてください。 また、採点してくれるサイトがあったと思うのですがご存知の方教えてください。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content－script-type" content="javascript" /> <meta name="keywords" content="content" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="/css/main.css" type="text/css" /> <title>0725</title> </head>
- 締切済み
- HTML
- ファイヤーフォックスでの文字化け
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> </head>までの部分をコピーペーストしてみましたが、昨日、<body>～<body>部分で更新をしようと思い、予定情報の終了した分の文字を削除して、ローカルで確認したところ、そのページすべてが文字化けしていました。アップロードしても文字化けはなおりませんでした。 因みに文字コードはUTF-8に設定して（いるつもり?）作成しており、これまでＩＥもグーグルクロームもファイヤーフォックスもしばらく使ってそのようなことはありませんでしたので、何が原因なのかわかりません。（現在、ファイヤーフォックスです。） 詳しい方教えて下さい！！
- ベストアンサー
- HTML
- ie6.0で、余分なmargin-bottom(padding-bottom)が表示される
ieのバージョンのちがいで、表示が異なってしまいます。たとえば、ホームページのタイトル画像を、table要素とimg要素で表示させたとき、ie6.0では、余分なmargin-bottom(padding-bottom?)が付加されます。どうやれば、統一できるのでしょうか？ （参考のために、レンダリングの見本を画像で添付しておきました。） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"? lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="ダイエット" /> <meta name="description" content="ダイエット効果の高いサプリメントやダイエット食品を紹介。また、豆乳ダイエットやキャベツダイエット、 プロティインダイエットなどの簡単にやれて成功率の高いダイエット法なども紹介しています。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="INDEX" href="./index.html" /> <link rel="stylesheet" href="./base.css" type="text/css" media="all" /> <link rev="MADE" href="mailto:aaa@yahoo.co.jp" /> <title>美容ダイエットグッズランキング・総合トップ10/Team-10kg—1年で-10kgのダイエットを</title> </head> <body style="background-color:#000000;"> <table style="width:100%; background-color:#c0c0c0;" cellspacing="0" cellpadding="0"> <tr style="background-color:#ffff00; margin-bottom:0; padding-bottom:0;"> <td style="background-color:#ffff00; margin-bottom:0; padding-bottom:0;"> <a href="./index.html"><img style="vartical-align:middle; border-style:none; margin-bottom:0; padding-bottom:0;" src="./img/title.jpg" alt="Team-10kg" width="192" height="50"></a> </td> ------------------------------------------------------------------- @charset "utf-8"; *{ margin: 0; padding: 0; } table{ width:800px; color:#ffff00; background-color:#000000; } table,tr,td { margin: 0; padding: 0; } </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 多言語ページのエンコード記述が分かりません
友人に頼まれてサイトの挨拶文のようなページを、英語バージョンと中国語バージョンで作っています。 ナビゲーションなどは日本語のままで、メインのコンテンツエリアのみ英語や中国語を書くので２つの言語が交じるページとなります。 文字化けを防ぐためのエンコードがいまいち分かりません… 分からないなりに書いては見たものの、これであっているのかも分かりません。 （確認する方法はあるのでしょうか） コードを書いてみました。 添削やアドバイスをお願いします。 ───────────────────────── 【英語と日本語のページ】 ※エンコードをUTF-8にしただけです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>△△△</title> <link href="◯◯◯.css" rel="stylesheet" type="text/css" media="all" /> </head> ───────────────────────── 【中国語と日本語のページ】 ※ネットで検索してcharset=bg2312、 lang="ja,zh" xml:lang="ja,zh"を書きましたがこれでいいんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja,zh" xml:lang="ja,zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=bg2312" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>△△△</title> <link href="◯◯◯.css" rel="stylesheet" type="text/css" media="all" /> </head> ───────────────────────── また、友人のサイトを見てみるとその他すべてのページはShift_JISで作られています。 これは海外の人が開くと文字化けしてしまうということなのでしょうか？ 日本語の表示のままでいいのですが、UTF-8にしたほうがいいのでしょうか？ わからない事だらけでスミマセン(;_;) よろしくお願いします。。
- 締切済み
- HTML
- HTMLソースにない文字がブラウザ画面に表示
HTMLのソースについて DOMソースについて ある画面のHTMLについて質問です。HTML自体には、閉じるタグが漏れているとかそういったミスが ないことを確認済。 対象のHTMLをブラウザで見ると一番先頭に「/」（半角スラッシュ）が入っています。HTML自体をどんなにみても 余計なスラッシュはありません。見落としがあるといけないので検索をしてみたのですがやはりありません。これは間違いありません。 IE１０ DebugBarを使用しDOMソースというのをみると、<body>のすぐ下に「/」がありその下に<meta ・・・ が続いています。 FireFoxで見てもやはり「/」は画面の一番上に表示されています。インスペクタでみるとIE同様 <meta ・・・ <link ・・・ が、bodyタグ、スラッシュ、の次に続きます。 画面で右クリックしソースをみると 一番先頭に「/」があり次に <!DOCTYPE ・・・と続きます。 すごく困っているのは このスラッシュを取り除きたいのですが、どうしたらいいのでしょうか？ bodyの中を空にしてみたのですがやはり画面でみると先頭に半角スラッシュが登場します。 ほんとうにわからず質問させていただきました。 次に どうしてこのような現象が起きるのでしょうか？ HTMLの先頭部分は以下のとおりです。 bodyタグの中は簡単なtebleです ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ｘｘｘｘｘｘｘ</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="noindex,nofollow"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/xxx.js"></script> <script type="text/javascript" src="js/xxxxxx.js"></script> </head> <body> <div> <table> (略） </table> </div> </body> </html>
- 締切済み
- HTML
- phpで これは、head要素の中に、meta要
phpで これは、head要素の中に、meta要素、title要素、link要素が入っているということなんですか？ ↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>
- ベストアンサー
- PHP
