表(テーブルタグで)を作ると、その上に有る文との距離がかなり離れてしまいます。
どうしたら良いでしょうか?

A 回答 (5件)

miyano さんの回答でOKみたいですね。



具体的には、
<p style="margin-top: 0; margin-bottom: 0">上の行</p>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p style="margin: 0">下の行</p>

このようにします。
フロントページという製作ソフトなら、上の行・下の行の
右クリックメニューより、「段落」というのがあります。
「スペース」の「段落の前・後」を0にすれば、簡単にできます。
ビルダーもこんな機能があったと思いますが、ビルダーは持ってませんので、
とりあえず、フロントページの使い方だけです。
    • good
    • 0

どの様にHTMLを書いてるかで変わるのですが


例えば:
<P>あああ<BR>あああ</P>
<TABLE>
としていると、段落が出来るので上の文章とテーブルの間が空きます。
こういう場合は、
<P style="margin-top: 0; margin-bottom: 0">あああ<BR>あああ</P>
<TABLE>
又は、
<BR>あああ<BR>あああ
<TABLE>
等にするといいかも・・・
はずしていたらごめんなさい...
    • good
    • 0

表の中で余計な改行タグを使用していませんか?


それらは全て表の外で有効になってしまう場合がありますよ。
    • good
    • 0

上の文も表の中に入れてしまったらどうですか?

    • good
    • 0

どんな感じにHTMLを書きましたか?



 また、ブラウザは何をターゲットと考えますか? 多少、IEとネスケでは見栄えが変ります。よ。
    • good
    • 0

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

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

Qテーブルタグで作った表を左側に、右側に表とは関係なく文字入力をするにはどのようにHTMLを組めば良いでしょうか?

テーブルタグで作った表を左側に、右側に表とは関係なく文字入力をするにはどのようにHTMLを組めば良いでしょうか?

よろしくお願いします

Aベストアンサー

CSSのfloatでレイアウトするのが一般的だと思います。
少し勉強してみましょう。

テーブルタグの中にテーブルタグを書けば、HTMLでも実現可能ですが、現在はあまり推奨されていません。

<html>
<head>
<style type="text/css">
<!--

div.leftbox{
width:100px;
height:200px;
float:left;
}

div.rightbox{
width:200px;
height:200px;
}

-->
</style>
</head>
<body>
<div class="leftbox">
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
</table><br>
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
</table>
</div>
<div class="rightbox">
<p>この部分に</p>
<p>文字をいれたいです。</p>
<p>よろしく</p>
<p>お願い</p>
<p>します</p>
<p>。</p>
</div>
</body>
</html>

CSSのfloatでレイアウトするのが一般的だと思います。
少し勉強してみましょう。

テーブルタグの中にテーブルタグを書けば、HTMLでも実現可能ですが、現在はあまり推奨されていません。

<html>
<head>
<style type="text/css">
<!--

div.leftbox{
width:100px;
height:200px;
float:left;
}

div.rightbox{
width:200px;
height:200px;
}

-->
</style>
</head>
<body>
<div class="leftbox">
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<...続きを読む

QHTMLでテーブルタグを使って複雑な表を作成するときの記述方法について

複雑な表の作り方について、質問致します。
例を挙げますので、そちらをもとに回答を頂ければと思います。
<例>
作りたい表は2行のもので、1行目が7列、2行目が4列のもので、同じ行にあるセルはどれも同じ大きさとします。

※注1
4と7の最小公倍数は28ですから、2行28列の表を作り、1行目では4セルごとに「セルの結合」をし、2行目では7セルごとに結合することで、希望の表は作れますが、あまり賢い方法とは思えないので、一般的な方法を教えて頂けたらと思います。
※注2
「各行を別々に作って改行し、あたかも1つの表に見せる」という方法もありますが、1行目と2行目の間が周囲の枠の厚さより2倍厚くなるので、これも避けたいです。

説明が長くなりましたが、回答をよろしくお願い致します。

Aベストアンサー

テーブルを2段にしても、枠の太さが同じならいいわけですよね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
<!--
table { width: 100%; border: solid 1px #666666; }
td { border: solid 1px #666666; padding: 4px; text-align:center; }
-->
</style>
</head>

<body>

<table style="border-bottom-width:0px" cellpadding="0" cellspacing="0">
<tr>
<td style="width:15%">1 - 1</td>
<td style="width:14%">1 - 2</td>
<td style="width:14%">1 - 3</td>
<td style="width:14%">1 - 4</td>
<td style="width:14%">1 - 5</td>
<td style="width:14%">1 - 6</td>
<td style="width:15%">1 - 7</td>
</tr>
</table>

<table style="border-top-width:0px" cellpadding="0" cellspacing="0">
<tr>
<td style="width:25%">2 - 1</td>
<td style="width:25%">2 - 2</td>
<td style="width:25%">2 - 3</td>
<td style="width:25%">2 - 4</td>
</tr>
</table>

</body>

</html>

テーブルを2段にしても、枠の太さが同じならいいわけですよね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
<!--
table { width: 100%; border: solid 1px #666666; }
td { border: solid 1px #666666; padding: 4px; text-align:center; }
-->
</style>
</head>
...続きを読む

Qテーブルタグを使わない、表作り。

 テーブルタグを使わない、表作りの方法を探しています。

<xhtml>
<p>
<span>テキスト</span><span>テキスト</span><span>テキスト</span><br/>
<span>テキスト</span><span>テキスト</span><span>テキスト</span>
</p>

{css}
span {
width: 100px;
border: medium solid blue;
}

 自分で考えて、上記のタグを書きました。
IEだときれいな表ができるのですが、Firefoxだとボックスの幅を指定するcssのタグを読み取らず、表が崩れてしまいました。
 テーブルタグを使わずに表を作成する方法を教えてください。

Aベストアンサー

<div>テキスト</div><div>テキスト</div><div>テキスト</div><br/>
<div id="sidKodvTable01">テキスト</div><div>テキスト</div><div>テキスト</div>

div{
width: 100px;
border: medium solid blue;
float:left;
}
#sidKodvTable01{
clear:both;
}

(OS : Windows XP SP2
ブラウザ : IE6, Opera8.5 Firefox1.5 Netscape7.1, Mozilla1.7.12
などで検証。)

span というインライン要素にボックス幅というブロック要素に有効な指定をしているから、Firefox の様に正しい解釈をして幅の指定が無効になるのです。

という事で、span の代わりに div などブロック要素を用いましょう。
その上で改行されるのも困るので、float:left; を追記します。逆に改行に対しては clear:both; となりますが・・・。


IE は結構、勝手な解釈をする事があるので、IE で望む結果が得られているとしても、記述として誤っている事が多々ありますので、その辺は意識しておいた方が良いと思います。


尚、今回の対応例は技術的な面のみを考えての事なので、意味的に適切かどうか不明です。
なにより、CSS が無効にされて閲覧されたりする場合を想定すると、HTML は span のままで、display:block; とする発想もあります。
ただ、意図が不明の為、詳細は明記できまんが・・・。
(いろんな手法があるという事です・・・。)

<div>テキスト</div><div>テキスト</div><div>テキスト</div><br/>
<div id="sidKodvTable01">テキスト</div><div>テキスト</div><div>テキスト</div>

div{
width: 100px;
border: medium solid blue;
float:left;
}
#sidKodvTable01{
clear:both;
}

(OS : Windows XP SP2
ブラウザ : IE6, Opera8.5 Firefox1.5 Netscape7.1, Mozilla1.7.12
などで検証。)

span というインライン要素にボックス幅というブロック要素に有効な指定をしているから、Firefox の様に正しい解釈をして幅の指...続きを読む

Qテーブルタグを作成した後、プレビューで表示されるタグの上部に空白が出来てしまう。

テーブルタグを作成した後、プレビューで表示されるタグの上部に空白が出来てしまいます。

下記の内容で文章中にテーブルタグを表示しようとしたところ、
(1)の文章とテーブルタグとの間に、かなりの空白が表示されてしまいます。
どのようにしたら、この空白が削除できるか、是非お教え願います。

10種類の競技は以下のとおりです。・・・・(1)
<Table Border><Tr><Td><FONT COLOR="#ec7600">1.サッカーナイン</FONT></Td><Td><FONT COLOR="#ec7600">ボールを蹴って的をいくつ落とせるか記録する</FONT></Td></Tr>
<Tr><Td>2.サッカーリフティング</Td><Td> リフティングが何回できたかを記録する</Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">3.サッカードリブル</FONT></Td><Td><FONT COLOR="#ec7600"> ドリブルのコースを作り何秒でクリアできたかを記録する</FONT></Td></Tr>
<Tr><Td>4.バスケットゴール</Td><Td> 決められた数のボールを何回入れられたかを記録する </Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">5.50メートル走</FONT></Td><Td><FONT COLOR="#ec7600">50メートルを何秒で走れるかを記録する</FONT></Td></Tr>
<Tr><Td>6.バランス競技</Td><Td> 不安定な仕掛けの上に何秒間いられるかを記録する </Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">7.息止め競技</FONT></Td><Td><FONT COLOR="#ec7600">水に顔を付けてどのくらい我慢できるか記録する</FONT></Td></Tr>
<Tr><Td>8.ターゲットゴルフ</Td><Td> クラブを使いボールをいくつ入れられるか記録する</Td></Tr>
<Tr><Td><FONT COLOR="#ec7600">9.フライングディスク</FONT></Td><Td><FONT COLOR="#ec7600">フライングディスクを何枚的にいれられるかを記録する</FONT></Td></Tr></Table>

テーブルタグを作成した後、プレビューで表示されるタグの上部に空白が出来てしまいます。

下記の内容で文章中にテーブルタグを表示しようとしたところ、
(1)の文章とテーブルタグとの間に、かなりの空白が表示されてしまいます。
どのようにしたら、この空白が削除できるか、是非お教え願います。

10種類の競技は以下のとおりです。・・・・(1)
<Table Border><Tr><Td><FONT COLOR="#ec7600">1.サッカーナイン</FONT></Td><Td><FONT COLOR="#ec7600">ボールを蹴って的をいくつ落とせるか記録する</FONT>...続きを読む

Aベストアンサー

IE6で確認しましたが、ご指摘の空白が再現できません。
プレビューということは、ホームページビルダーなどのソフトをお使いでしょうか?
使用ソフトや環境などの詳細を補足願います。

Qhtmlでテーブルタグを使わずにCSSのみでテーブルを作成する方法を教

htmlでテーブルタグを使わずにCSSのみでテーブルを作成する方法を教えて下さい。

現在私はブログを所有しており、ブログ内の記事の中に小さな1.2行程度のテーブルを入れたいと思っています。
記事の中に直接テーブルのタグを書き込むと、ものすごい量のタグになってしまい、検索エンジンの読み込みに不利ですので、CSSにて記事の中用のテーブルタグを作り、それを<div class="">~略~</div>の形で省略して記事の中で使用していきたいと思います。

全くの初心者の為、質問が上手にできていないかと思いますので、具体的には下記のサイトを拝見して頂くと幸いです。
http://www.operationcheck.com/seo/seomeasure6.html
サイト内で書かれている、中程の「じゃあ、なぜCSSが必要なのか?」以降が、私の質問したい内容です。しかし、このサイトでは、CSSの具体的な使用方法については、書籍の紹介になっていました。

その上記サイトに記載されております、「CSSだけで書いた方」(グレーのテーブルの中の文です)は、

『<div class="box2">
<p>普通に見る限りでは、大した違いを感じることは出来ません。<br>
ちなみに、こちらはHTMLを使わずCSSのみを使って作成しました。 </p>
</div>』

<div class="box2">~略~</div>という風に、<table>のタグを使わずに、divのみで構成されています。
このように、記事の中でテーブルを省略し、divのみで、反映させるCSSの記載方法(タグなど)を教えて下さい。

また、具体的に、CSSのどこに、そのテーブルタグを書きこんでいけばよろしいのでしょうか。
例えば、/* エントリー部分の設定 */
もしくは、/* 各部のテキスト設定 */
の中でしょうか?

htmlでテーブルタグを使わずにCSSのみでテーブルを作成する方法を教えて下さい。

現在私はブログを所有しており、ブログ内の記事の中に小さな1.2行程度のテーブルを入れたいと思っています。
記事の中に直接テーブルのタグを書き込むと、ものすごい量のタグになってしまい、検索エンジンの読み込みに不利ですので、CSSにて記事の中用のテーブルタグを作り、それを<div class="">~略~</div>の形で省略して記事の中で使用していきたいと思います。

全くの初心者の為、質問が上手にできていないかと思いますので...続きを読む

Aベストアンサー

Tacosan さんの仰るように、div を使うか、table を使うかは、
> 本当に表を作りたいのなら table要素を使うべし. 表でないのなら table要素は使わない.
の通りですから、私は、
> また、具体的に、CSSのどこに、そのテーブルタグを書きこんでいけばよろしいのでしょうか。
に付いて。

ハッキリ言って、実際に div を使った記述がなされているので、使われているスタイル・ファイルを見るのが手っ取り早いでしょう。
実際に見てみると、該当するのは
> .box2 {
> width: 444px;
> border: 3px solid #0000FF;
> height: 60px;
> vertical-align: middle;
> color: #FF0000;
> }
ですから、これを参考にしては。


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

おすすめ情報