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

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

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

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で質問しましょう!

今、見られている記事はコレ!

  • 簡単なのに本格派!タモリ流「たらこスパゲッティ」

    たくさんの種類があるスパゲッティ。トマト系のミートソースやナポリタンをはじめ、クリーム系のカルボナーラ、オイル系のペペロンチーノなどなど。 そんな中、和風系として人気が高いのが、たらこスパゲッティであ...

  • 【長谷川豊】防げたはずのアイドル刺傷事件

    アイドル活動をしていた女子大学生の冨田真由さん(20)が刃物で刺された事件。テレビや新聞でも大きく報じられていますね。 最新の話では、事件発生直後の目撃者からの110番通報より約1分前に、冨田さん自身から助...

  • 教えて! しりもと博士:第69話「ラブレター」

    なんでも知っているしりもと博士が、ボーイとガールにいろいろな事を教えてくれます。 二人がこの世の全てを学ぶまで博士は教える事をやめません。

  • サラ忍マン 良太郎:第51話「部下」

    忍(しのび)の末裔、現代サラリーマン平野良太郎。世知辛い世の中を耐え忍ぶ企業戦士サラ忍マンとして、日々戦う。

  • にゃらんのスイーツ&惣菜が6月1日より発売に

    じゃらんの公式キャラクターである“にゃらん”のスイーツ&惣菜が、大阪の大丸梅田店で6月1日より発売になる。今回発売となる“にゃらん”スイーツのラインナップは全10種、さらに初登場となる“にゃらん”惣菜も2種類あ...

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる


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

おすすめ情報

カテゴリ