<table border=1 cellspacing=1 cellpadding=20>
<tr><th>a</th><th>b</th></tr>
<tr><td>1</td><td>2</td></tr>
</table>

としたときに、セル内の左右上下に空白ができますが、
上下のみ空白を作るにはどうすればいいでしょうか?

左右は詰めたいです。(左に)

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

A 回答 (2件)

>というスタイルシートがある場合、まとめることは可能でしょうか?


 つまみ食いはダメですよ。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 →5.8 属性セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

★発想が違う!!!・・・とても大事な考え方ですから、しっかり自家薬籠中のものにすること。
 スタイルシートを使ってデザインする最大の目的は『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。極論するとHTMLは徹底的に文書構造だけをマークアップします。それをどのように表現するか(プレゼンテーション)は、もっぱらスタイルシートに任せます。
 ふたつのtableが同じデザインになると言う事は、この二つは同じ文書構造にあると言う事です。
例えば一つの文書内にいくつものtableが存在するとします。
<body>
 <div class="header">・・・・</div>
 <div class="section">
  ・・・・
  <table summary="世界の国別 人口">
   <tbody>
    <tr><td>・・・・</tr>
   </tbody>
  </table>
  ・・・・・
  <table summary="日本の県別 人口">
   <tbody>
    <tr><td>・・・・</tr>
   </tbody>
  </table>
  ・・・・・
  <div class="figure">
   <table summary="人口 推移">
    <tbody>
     <tr><td>・・・・</tr>
    </tbody>
   </table>
  </div>
  <div class="nav">
   <table summary="10月 カレンダー">
    <tbody>
     <tr><td>・・・・</tr>
    </tbody>
   </table>
   <table summary="11月 カレンダー">
    <tbody>
     <tr><td>・・・・</tr>
    </tbody>
   </table>
  </div>
  <div class="aside">
   <table summary="関連商品">
    <tbody>
     <tr><td>・・・・</tr>
    </tbody>
   </table>
  </div>
 </div>
 <div class="footer"></div>
</body>
だとします。
注】header,section,aside,figure,footerなどのclass名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )に合わせています。class名は、このように文書構造を示すために使用する。

 これだと
※本文中のtableだと
 div.section table{}で、figure,aside,nav内も含めてすべてのtableのデザインができる
 div.section div.aside table{}で、aside中のtableだけ
 div[summary~="人口"]{}だと、summaryの値リストの一つに"人口"をもつもの
 div.section * table{}だと、sectionの孫以下のtable
 div.section>table{}だと、div.sectionの子供のtable(子孫じゃない)

というふうに、セレクタで特定することができるのです。


>というスタイルシートがある場合、まとめることは可能でしょうか?
>table[summary="test1 test2"]{
 これはsummary属性に"test1 test2"の値を持つものになりますから、違います。
table[summary="test1"],table[summary="test2"]{}
になりますが、それ以前に!!!。同じデザインに死体と言う事は、HTMLにきちんと文書構造が示されていれば、(上記の例だと)
div.section>table{}
 div.sectionの直接の子供であるtableと指定できるのです。

 セレクタを含むカスケーディングの仕組みは、CSS--Cascading Style Sheetsの根幹ともいえる最重要な部分です。それを知らなきゃCSS使うことができないです。
  
 プロパティだけ説明してある、役に立たないサイトがあまりに多すぎる。
    • good
    • 0

border=1 はともかく、cellspacing=1 cellpadding=20は非推奨です。

スタイルシートを使いましょう。
★スタイルシート使えばお茶の子さいさい

「スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

<table summary="テストの表" border="1">
 <tbody>
  <tr>
   <th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
  </tr>
  <tr>
   <th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
  <tr>
  <tr>
   <th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
  </tr>
  <tr>
   <th abbr="た">た行</th><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td>
  </tr>
 </tbody>
</table>
にて、上に10px,下に20px、左右に一文字分、ただしthは左に二文字とか・・自在にできる
一行おきに背景色を変えるとか・・もね。
 最後にサンプルあげて置きます。
★ HTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」でしたが、HTML5では完全にプレゼンテーションに関わる要素、属性は廃止です。
 HTML4.01strictに適合するHTMLを書くようにして、プレゼンテーションはすべてスタイルシートに任せたほうが楽です。
 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

サンプル
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 でチェック済みのHTML4.01strict+CSSです。
★タブは_に置換してあるので戻す。
★もっともっと色々な設定ができますが、ごく一部だけ・・・

<!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 name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

/* tableのデザイン */
table[summary="テストの表"]{
border:gray outset 10px; /* tableの外枠の色と形とサイズ */
border-collapse:collapse;/* セル間を空けない */
border-color:red orange yellow lime;/* 上下左右の色を変えてみた */
}
table[summary="テストの表"] th,
table[summary="テストの表"] td{
border:gray solid 2px;/* セルの枠線の色と形 */
padding:10px 1em 20px 1em;/* 上下左右のpadding */
}
table[summary="テストの表"] th{
padding:10px 2em 20px 1em;/* 右がの余白をあけて */
border-right-style:double;/* 見出しの右枠は二重 */
}
table[summary="テストの表"] tr:nth-child(2n) th{
background-color:yellow;/* 偶数行は黄色背景 */
}
table[summary="テストの表"] tr:nth-child(2n) td{
background-color:rgb(255,255,180);}
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<table summary="テストの表" border="1">
___<tbody>
____<tr>
_____<th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
____</tr>
____<tr>
_____<th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
____</tr>
____<tr>
_____<th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
____</tr>
____<tr>
_____<th abbr="た">た行</th><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td>
____</tr>
___</tbody>
__</table>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

無事できました。ありがとうございました!コードも参考になります。

ちなみに

table[summary="test1"]{
width: 100%;
}

table[summary="test2"]{
width: 100%;
}

というスタイルシートがある場合、まとめることは可能でしょうか?

table[summary="test1 test2"]{

だと、適用されませんでした。

最後ご回答いただければ幸いです。
よろしくお願いします。

お礼日時:2014/10/14 17:39

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

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

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか?
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

Q■ でテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか?

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか?
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>~</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ~>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む

)に外部ページを呼び出し

HTMLで表の<td></td>タグの中に外部ページ(ブログなど)を呼び出す(埋め込む)やり方は何か無いでしょうか?

フレームを使えば簡単に外部ページを使用できるのはわかっているのですが、デザイン上テーブルの中に入れたいので…

もし知っている方がいましたらよろしくお願いします。(「それは無理」という回答でも大丈夫です)

Aベストアンサー

デザイン上だけの問題でしたら<TD><IFRAME></TD>ではだめですか?
一応テーブルの中に組まれます。(かなり端折った書き方ですが…
width="100%" height="100%" frameborder="0"
をフレームの属性で指定すればテーブルにぴったりとくっついてテーブル自体に読み込んでいるように見えます。
勿論<TD>の中身のサイズを%で決めるからには<TD>自体のサイズをピクセルで定義しなければなりません。

Q

~~ を表示することはできますか?

テーブルタグ
<table>
<tr>
<td>

をそのまま文字として表示することはできますでしょうか?

<を全角の<にすればいいのでしょうが、なにぶん、テーブルタグの量が膨大なため、手でいちいち直してたら数ヶ月、数年かかってしまいます。

タグをそのまま画面に表示させる良い方法はないでしょうか?

詳しい方いらっしゃいましたら教えていただけないでしょうか?

よろしくお願いします!

Aベストアンサー

タグの無効化というタグです

<xmp>タグ</xmp> タグを無効化にして文字として表示されます
良かったら使ってみて下さい

Q

内のテキストのサイズ

以下のようなソースで,TEXTの部分のサイズを変更したいと思い,<table>~</table>を含む範囲をを<div class="test">~</div>で挟んで,スタイルシートで指定してみました.
そしたら,<div class="test">~</div>の中でも<table>~</table>の外にあるテキストはサイズが変わるのですが,下のソースのTEXT部分は変わりませんでした.
表中のテキストのサイズを一括して指定する方法はあるのでしょうか?

<table align="center">
<tr bgcolor="#aaffaa">
<td>TEXT</td><td>TEXT</td><td>TEXT</td>
</tr>
<tr bgcolor="#aaaaff">
<td>TEXT</td><td>TEXT</td><td>TEXT</td>
</tr>
</table>

Aベストアンサー

いろいろやり方がありますが、

1.全てのテーブルで文字サイズを指定するときは

<STYLE type="text/css">
<!--
TABLE{font-size : 24px;}
-->
</STYLE>

を<HEAD>と</HEAD>の間に入れます。

2.テーブルごとに文字サイズを指定するときは

<CENTER>
<TABLE style="font-size : 24px;text-align : center;">
<tr bgcolor="#aaffaa">
<td>TEXT</td><td>TEXT</td><td>TEXT</td>
</tr>
<tr bgcolor="#aaaaff">
<td>TEXT</td><td>TEXT</td><td>TEXT</td>
</tr>
</TABLE>
</CENTER>

3.クラスを使って文字サイズを指定するときは

<STYLE type="text/css">
<!--
.text{font-size : 24px;}
-->
</STYLE>
</HEAD>
<BODY>
<CENTER>
<TABLE class="text">
<tr bgcolor="#aaffaa">
<td>TEXT</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
<tr bgcolor="#aaaaff">
<td>TEXT</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</TABLE>
</CENTER>

いろいろお試しいただければと思います。

いろいろやり方がありますが、

1.全てのテーブルで文字サイズを指定するときは

<STYLE type="text/css">
<!--
TABLE{font-size : 24px;}
-->
</STYLE>

を<HEAD>と</HEAD>の間に入れます。

2.テーブルごとに文字サイズを指定するときは

<CENTER>
<TABLE style="font-size : 24px;text-align : center;">
<tr bgcolor="#aaffaa">
<td>TEXT</td><td>TEXT</td><td>TEXT</td>
</tr>
<tr bgcolor="#aaaaff">
<td>TEXT</td><td>TEXT</td><td>TEXT</td>
</tr>
</TABLE>
</CENTER>

...続きを読む


人気Q&Aランキング

おすすめ情報