- 締切済み
cellpadding
<table border=1 cellspacing=1 cellpadding=20> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> としたときに、セル内の左右上下に空白ができますが、 上下のみ空白を作るにはどうすればいいでしょうか？ 左右は詰めたいです。（左に）
- PMNRACILHZDG
- お礼率87% (35/40)
- HTML
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞というスタイルシートがある場合、まとめることは可能でしょうか？ つまみ食いはダメですよ。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) →5.8 属性セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#attribute-selectors ) ★発想が違う!!!・・・とても大事な考え方ですから、しっかり自家薬籠中のものにすること。 スタイルシートを使ってデザインする最大の目的は『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』です。極論すると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/html5-diff/#new-elements )に合わせています。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使うことができないです。 プロパティだけ説明してある、役に立たないサイトがあまりに多すぎる。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
border=1 はともかく、cellspacing=1 cellpadding=20は非推奨です。スタイルシートを使いましょう。 ★スタイルシート使えばお茶の子さいさい 「スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」 <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-html401j/conform.html#h-4.1 )」でしたが、HTML5では完全にプレゼンテーションに関わる要素、属性は廃止です。 HTML4.01strictに適合するHTMLを書くようにして、プレゼンテーションはすべてスタイルシートに任せたほうが楽です。 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」 サンプル ★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>
お礼
無事できました。ありがとうございました！コードも参考になります。 ちなみに table[summary="test1"]{ width: 100%; } table[summary="test2"]{ width: 100%; } というスタイルシートがある場合、まとめることは可能でしょうか？ table[summary="test1 test2"]{ だと、適用されませんでした。 最後ご回答いただければ幸いです。 よろしくお願いします。