痔になりやすい生活習慣とは?

html の初心者です。
divで箱を作って、画面のレイアウトをしている人が多いようですが、
僕は、tableを使用しています。
tableでほとんど出来ると思うのですは、
divを使う理由は何なのでしょうか。

ご存知の方がいらっしゃられたら教えて下さい。
よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

 少し長いですが、初心者は絶対に必要な知識ですから、頑張って呼んでくださいね。



 ます、初心者でしたら必ず仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )を読んでおきましょう。
【引用】____________ここから
本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
  本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な内容になっていく。
・必要な情報に直接アクセスする。
  できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、オンライン版の仕様書には次の特徴を持たせた。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

 沢山の有象無象の情報があふれています。その中から正しい情報を得るのは藁の山から針を探すようなものです。最後は仕様書を読むことになります。
 ここに書かれているように、通読してどこに何が書いてあるかを知っておくこと。あとは必要なときに、詳細目次( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )や要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )を利用して直接情報に進んでも良いでしょう。

 あなたの質問に関わる部分は

DIVの項目を読んでみると
 ⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

table
【引用】____________ここから
単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

 ⇒ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 などでしょうか??

★HTMLは、ワープロやDTPとは全く異なるものです。(ここを誤解されている)
 文書を読み解き、その文書を構成する要素(部品)に分解して、それぞれがどのような部品--要素であるかをタグを使ってマークアップするメタ言語です。
 <h1>ここはレベル1の見出し</h1>
 <p>ここはひとつの段落で、<strong>ここは重要</strong>です。</p>
 <blockquote>
  <p>ここは引用文で</p>
 </blockquote>
 <ol><!-- ここから序列リスト -->
  <li></li>

というふうに、文書の構造をマークアップして、どのようにプレゼンテーションするかは、全く書きません。
 ⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 ですから、読み上げソフトは、見出しは太い男声の声で、重要なところは強い言葉で読んでくれますし、検索エンジンにもどこが見出しで、どこが本文でどこが表かが判ります。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

 その上で、パソコンのディスプレイ用には、この様にプレゼンテーションするかをスタイルシートで指定すれば良いのです。

>(画面のレイアウトは)tableでほとんど出来ると思うのです
 は全く間違っています。tableの目的は2次元(以上)のデータを表す要素です。あなたは視角メディアのことしか考えていない。

>divで箱を作って、画面のレイアウトをしている人が多いようですが、
 これも重大な誤りです。!!!---DIVはデザインのためでは決してありません!!!
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ・・・もしそのように使われていたら、「している人が多いようですが、」のサイトも間違っています。

>divを使う理由は何なのでしょうか。
 
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
 HTML4.01には、実は文書構造を示す要素(タグ)が不足していました。そのためにDIVに関して上記のように書かれていました。
<body>
 <div class="header">
  <h1>見出し</h1>
  ・・・ここは文書のヘッダ・・・
  <div class="nav">
   ナビゲーション
  </div>
 </div>
 <div class="section">
  <p>・・・ここは本文・・</p>
 </div>
 <div class="footer">
  <p>・・ここはフッタ>/p>
 </div>
</body>
 のようにDIVを使うのが本来の使い方であるべきです。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★★ところが、これは理解されたとは言いがたく★★

 あなたが、ご存知のように「divで箱を作って、画面のレイアウト」するような使い方がされてきました。!!!!
<div class="contents"><div class="left_box"><div class="main">とかね。見かけたことあるでしょう。

 その反省から、次期HTML5では、文書をよりよく構造化するために、section,article,aside,hgroup,header,footer,nav,figureなどの要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
 そして、DIVは、「他に適当な要素がないときの最後の手段としてのみ使う」ことになります。
 ⇒Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )
 --著者は、 div 要素を、他に適切な要素がないときなど、最後の手段として使うことを、強く推奨する。---

 たとえば、よく引き合いに出すのですが・・
 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
 のソースは、全くシンプルですが、ブラウザの[表示]メニューから[スタイルシート]に進みスタイルシートを選択すると様々にデザインが変わります。ウィンドウサイズを変化させても追随します。印刷プレビューで見ると印刷用に変わります。この様なことはtableでHTMLが作成されていたら、決して出来ませんね。
 
 
    • good
    • 1
この回答へのお礼

ご回答ありがとうございました。
勉強課題になりました。
方針つかめとても嬉しいです。^^

お礼日時:2013/07/06 21:14

専門的な回答は他の皆様がやられているので、個人的意見をば。



・tableタグは「表」をデザインするもの。
・divはスタイルを指定するもの

というイメージです。
初心者ならば、divをあまり気にする必要はありません。
おっしゃるとおり、tableでほぼ実現出来ます。

しかし、そのうち「ああ、この書き方では無駄が出る」「この書き方だとソースコード(HTMLで書かれた物)が見難い……」なんて思い始めることでしょう。
それが成長ですね。

一歩踏み出して「CSS」と呼ばれるものに手を出してみましょう。
ここからが、「div」さんに有り難みを感じ始める時です。
もしかしたらCSSより先に、JavaScriptに興味が向くかも知れません。
同様に「div」さんにありがたみを感じると思います。



▽ 以下、少し詳しく(少し難しくなってきます) ▽

例えば、「見出しを作りたい!」なんて思うとしましょう。
その見出しは目立たせなくてはいけません。
そして複数作らないといけない場合、いちいち

<table border="1"><tr><td><font size="7" color="#ff0000">見出し1</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し2</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し3</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し4</font></td></tr></table>
<table border="1"><tr><td><font size="7" color="#ff0000">見出し5</font></td></tr></table>




な~んて書いてたら、ゴッチャゴチャになりますよね?
そんな時に役に立つのがCSSと呼ばれるものです。

一箇所に文字の大きさやら背景色やらを定義しておきます。

<style type="text/css">
<!--
.topic{
COLOR: #ff0000;
FONT-SIZE: 20px;
}
-->
</style>

そしてdivさんにお願いします。

<div class="topic">見出し1</div>
<div class="topic">見出し2</div>
<div class="topic">見出し3</div>
<div class="topic">見出し4</div>
<div class="topic">見出し5</div>




ほら、少しはスッキリしたのではないでしょうか。
こんな感じで使えます。

No.2さんなどとかぶってしまったかな?^^;
    • good
    • 3
この回答へのお礼

ご回答ありがとうございました。
具体例でわかりやすいです。
この質問、解決しました。

mogeracchoさん
皆様、ありがとうございました。^^

お礼日時:2013/07/06 21:16

先の回答にもありましたが、tableタグは表の作成の為のタグです。

ただ、CSSが現在の様に広く使われるまではレイアウト目的で多用されていました(テーブルレイアウトという言葉さえあります)。例えばですが、ホームページビルダーの「どこでも配置モード(?)」などもHTMLソースを見るとテーブルレイアウトで生成されるのではないかと思います。きっとhatokamomeさん以外でも、『初心者』から少しずつ理解が深まってくると誰でも感じる疑問だと思います。
なんだか話がずれて行くので戻しますが、divでボックスを作ってCSSでレイアウトしていく方が多い理由は、大体下の様な事ではないかと思います。

■現在、ページの内容部分(文章など)はHTML、デザインはCSSで…と推奨されている。
■tableタグだとHTMLソースがやたらと長くなる。
■より緻密でデザイン性の高いレイアウトがしやすい。
■ソースが見やすくメンテナンスしやすい。

今では私も『手打ち』でtableタグは、辛くて書いてられません(汗)。
それと、今はあまり言われなくなりましたが、昔は検索エンジンのクローラーがソースが長いと一番下まで見に行ってくれないなんて言われてまして…まあ、これは現在も検索エンジンは進化し続けていますし、ソースが2~3000行もある大規模なページもありますので何とも言えませんが、SEO(検索エンジン対策)の面からも皆さん少しずつテーブルレイアウトから移行していったのでは?と思います。
    • good
    • 3
この回答へのお礼

ご回答ありがとうございました。
明快で、わかりやすい解答でした。^^
ありがとうございます。

お礼日時:2013/07/06 21:15

CSS が普及していない昔は table 要素しかなかった訳ですが、


現在は以下の三点を理由として div とかその他諸々でレイアウトをします。

○ Web アクセシビリティ
日本の工業規格(JIS X 8341-3)にもなっていますが、Web は健全者でなくても使いやすい配慮が求められます。
具体的には、視覚障害者が使う音声ブラウザなら、table 要素をデータと見なして「表の一行目~」と読み上げる実装が考えられますので、データ以外の目的で table を使わない等です。

○ セマンティック Web
HTML をデータ交換の手段として再活用するため、データの意味を明確に記述すべきという考え方です。
具体的には、見出しには h1 要素、段落には section 要素、広告には aside 要素、数表には table 要素というように、データの意味ごとに使う要素を使い分ける等です。

○ SEO 効果
上記の二つを心がけると、検索エンジンは意味のあるデータを探し出しやすくなり、ページ評価が上がると期待されます。
    • good
    • 1
この回答へのお礼

ご回答ありがとうございました。
セマンティック Web参考になりました。^^

お礼日時:2013/07/06 21:13

こんにちは。



tableタグは表を作るタグであり、レイアウト用に使うタグではないからです。

ようはきちんと用途に合ったタグでマークアップしましょうということでしょうか。
    • good
    • 1
この回答へのお礼

ご回答ありがとうございました。

お礼日時:2013/07/06 21:11

このQ&Aに関連する人気のQ&A

お探しの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どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)などの関係のものが、以下に複数続いたりする場合、
どう考えてもテーブルのほうがよくない?って思うんですよね。
その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね?

divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、
divタグはここまで作る、テーブルタグの使い分けが微妙です。
このときはテーブルにしないといけない。とかないんでしょうから
ある意味センスなんでしょうが。。。。
製作の効率と、コンテンツの管理の仕方を考えると
divタグとテーブルの使い方の境目が分からなくなってしまいます。

そのへんの考え方ノウハウを教えてください。

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)など...続きを読む

Aベストアンサー

No.1補足に対し
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfloatさせれば良く、メモ帳などのテキストエディタで狙い通りのレイアウトがtableを使うより数倍速く作成できます。floatされる側のmargin指定しだいで表的なレイアウトにもワープロ的なレイアウトにも異なる回り込みを表現できます。初心者はfloat解除を忘れてレイアウトを崩すので、最初にfloat解除をマスターするのがコツと言えばコツです。
tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がないので、別途tableに同じフォント指定しなければ統一感のあるページにならないのもマイナス要因です。
ホームページビルダー(これは表でレイアウトする為に作られたようなソフトです)などのWYSWYGに頼って作成していると、この感覚は解らないと思います。これはEXCELをワープロ代わりに使う人が多いのと同じなのではないでしょうか。

No.1補足に対し
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfl...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

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テーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブルの位置を細かく指定したい。

現在、テーブルを組み合わせたサイトを作っていまして
そのテーブルの位置に悩んでおります。


背景固定で一つ大きめのイラストを置いていまして
そこに合わせてテーブルの位置を細かく調整したいのです。

center、left、rightの偏った3種類の位置じゃなく
左から200ピクセル程度の位置にテーブルを置きたいのです。

この様なタグはありませんか?

これはCSSなどて指定するしかないのでしようか?

Aベストアンサー

>左から200ピクセル程度の位置にテーブルを置きたいのです

<TABLE style="margin-left:200px;">
<TR><TD></TD></TR>
</TABLE>

CSSを使っての指定になると思います。

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

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。


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

人気Q&Aランキング