cellpadding

締切済

質問者：PMNRACILHZDG
質問日時：2014/10/12 17:58
回答数：2件

<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

「diff とは」に関するQ&A：「Diffをとる」とは？

さらに表示

「人口推移」に関するQ&A：人口推移から見た住宅購入

「CSS チェック」に関するQ&A： CSSチェックをしたいのですが

「プレゼンテーションとは」に関するQ&A：プレゼンテーションとは？

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/10/14 19:54

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

　つまみ食いはダメですよ。
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使うことができないです。
　　
　プロパティだけ説明してある、役に立たないサイトがあまりに多すぎる。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/10/12 19:04

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">

＿</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>

- 0
- 件

通報する

この回答へのお礼

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

ちなみに

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

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

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

table[summary="test1 test2"]{

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

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