- 締切済み
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>
関連するQ&A
- cellpadding
<table border="1" cellpadding="10" cellspacing="0"> <tr> <td>あああああ</td> </tr> </table> 上記テーブルで、「あああああ」の周りに出来る余白(空白)のピクセル数(上下左右)は それぞれ10pxなんでしょうか？それとも5pxなんでしょうか？
- ベストアンサー
- HTML
- DreamWeaverのソースコードの整頓方法
DreamWeaverを使ってWEBサイト制作をしています。 コーディングしていく上で、 ソフト側で（おそらくソースの見易さを考慮してか）左詰めでなく、適宜空白を自動的に作っていってくれているのですが、 それを一括して左詰めにできる方法はないのでしょうか？ よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝ <table border="0" cellspacing="0"cellpadding="0"> <tr> <td>■■■</td> </tr> <tr> <td>■■■</td> </tr> </table> ↑これを <table border="0" cellspacing="0"cellpadding="0"> <tr> <td>■■■</td> </tr> <tr> <td>■■■</td> </tr> </table> ↑こうしたいのです
- ベストアンサー
- HTML
- 特定のテーブルのみ枠線の色を消したい
スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか？ <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？
- ベストアンサー
- CSS
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- colspan セルの結合について
テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>
- 締切済み
- HTML
- テーブルを横に二つ並べて表示する方法はありますか？
テーブルを横に二つ並べて表示する方法はありますか？ 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に２個並んでしまいます。
- 締切済み
- HTML
- html table の中のボーダーが二重になる
初歩的な質問ですが、テーブルタグに、線をつける際に、枠だけついたり、下記のように記述しても、 真ん中のtr もしくは th や td の上下か左右がかぶってしまい、局所的に2本になってしまいます。（他に比べて太くなります。） .book_form tbody tr .mailform, .book_form tbody tr .mailtext { border: 1px solid #666; } すべてのラインを１本にして、きれいに見せるにはどのようにしたいいでしょうか。 ちなみに、<table class="book_form" border="1" bordercolor="#666"cellspacing="0" cellpadding="3"> こちらでもうまく表示されません。 CSSでの記述があるものだと助かります。 構成は、 <table> <tbody> <tr></tr> <th></th> <td></td> </tbody> </table> です。
- ベストアンサー
- HTML
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- tableにinclude fileを組み込んだら・・・
<table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> </td> </tr> </table> を <table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <!--#include file="head.html"--> </td> </tr> </table> で head.html を <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> にした場合、中のtableの上下のスペースが異なってしまいます。 どなたか、解決方法を教えてください。
- ベストアンサー
- HTML
お礼
無事できました。ありがとうございました！コードも参考になります。 ちなみに table[summary="test1"]{ width: 100%; } table[summary="test2"]{ width: 100%; } というスタイルシートがある場合、まとめることは可能でしょうか？ table[summary="test1 test2"]{ だと、適用されませんでした。 最後ご回答いただければ幸いです。 よろしくお願いします。