- ベストアンサー
borderとcellspacingの違い
- <table border=0 bordercolor="ff0000"><tr><td>aaa</td><td>bbb</td></tr></table> : 表のボーダーなし
- <table border=1 bordercolor="ff0000"><tr><td>aaa</td><td>bbb</td></tr></table> : 表のボーダーあり
- <table cellspacing=0 bordercolor="ff0000"><tr><td>aaa</td><td>bbb</td></tr></table> : セル間のスペースなし
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
今はbordercolor,cellspacingは使うこと無いですよ。 bordercolorという属性は存在しません。 cellspacing、 cellpadding は今は使われなくなりましたが、それぞれの関係は長くなるので 11.3.3 コマのマージン( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3.3 ) を読んでください。 ★現在は、プレゼンテーションはスタイルシートで指定するのが基本です。 『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 下記に簡単なサンプル上げておきます。 ご覧のように、細かい設定や複雑な設定がスタイルシートで自在にできます。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力で確認済みのHTML4.01strictです。 ★タブは＿に置換してあるので戻す。 <!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関連 */ th,td{padding:0.5em 1em;} table+table{margin:10px;} table[summary="test1"]{border-collapse:collapse;} table[summary="test2"]{border: red dotted 5px;} table[summary="test2"] th{border: solid 2px blue;} table[summary="test2"] td{border: solid 2px green;} table[summary="test3"]{ border:outset 5px gray; border-collapse: separate; border-spacing: 15px 5px; } table[summary="test3"] th, table[summary="test3"] td{ border:inset gray 5px; } table[summary="test4"]{ border-top:dashed 5px aqua; border-right:double 10px gray; border-bottom:groove 5px red; border-left:ridge 5px lime; border-collapse: separate; border-spacing: 5px; box-shadow:10px 10px 10px 10px rgba(0,0,0,0.4); } table[summary="test4"] th, table[summary="test4"] td{ border:inset gray 5px; } table[summary="test4"] td+td{border-color:maroon;} table[summary="test4"] td+td+td{border-color:orange;} table[summary="test4"] td+td+td+td{border-color:teal;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table border="1" summary="test1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abc</td><td>efg</td><td>hij</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<table border="1" summary="test2"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abc</td><td>efg</td><td>hij</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<table border="1" summary="test3"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abc</td><td>efg</td><td>hij</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<table border="1" summary="test4"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th><th abbr="k">klm</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>abc</td><td>efg</td><td>hij</td><td>klm</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>
お礼
ありがとうございました。