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> : セル間のスペースなし
- ベストアンサー
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> <table cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> いろいろサンプルを作ってみたのですが、 結局borderとcellspacingは、どう違うのでしょうか？
- oehbuencu
- お礼率92% (46/50)
- HTML
- 回答数1
- ありがとう数11
- みんなの回答 （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>
関連するQ&A
- テーブル・セル枠線の色
下記のようにテーブルを組むと、IEでは1pxの赤いボーダーで表示されるのですが、 ネスケだとグレーの太い線になってしまいます。 どのように変えたらよいのでしょうか。 <TABLE border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF5F8D" width="100%"> <TR> <TD width="50%"> </TD> <TD width="50%"> </TD> </TR> </TABLE>
- ベストアンサー
- HTML
- テーブルの線の幅を一重の線にしたい
<HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。
- ベストアンサー
- 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
- 特定のテーブルのみ枠線の色を消したい
スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか？ <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
- スタイルシートの書き方
HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな（？）スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか？ 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- dreamweaverで、テーブルのボーダーカラーに入力しても、表示されません。
プロの方に作っていただいたHPを書き換えていて、 テーブルのボーダーカラーを指定しようとしているのですが、 コードから何回もボーダーカラーを指定しているのに、 色がまったく表示されません。 </table> <table width="500" height="118" border="2" align="center" cellpadding="5" cellspacing="2" bordercolor="#000000"> <tr> <td width="131" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="205" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="114" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> </tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●<br> ●●● </div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> </tr> </table> 新しいページに、以上のコードをペーストすると、ちゃんと表示されます。 スタイルシートやCSSで指定してあって、それが優先されているのでしょうか？ スタイルシートやCSSは使ったことがないのですが、 それを解除するには、どうすれば良いでしょうか？ よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- 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
- Tableずれ
いつもお世話になっております。 ソースは以下の様となります、htmlのときが正常に表示されますが。 JSP化すると微妙が所にテーブルがずれてしまい、これを解消するにはどんな解決あるかな？ <html> </body> <table width="700" border="0" cellspacing="0"> <tr> <td valign="top"><table width="100" border="1" cellspacing="0" bordercolor="#FF3366" > <tr align="center"> <td height="23" ><img src="../Assets/Body/Common/StaffList.gif" alt="スタッフ" width="31" height="12" /></td> </tr> <tr align="center"> <td height="23" >田中栄子</td> </tr> ・ ・ //この部分がJSP上がループ処理となる ・ </table> </td> <td valign="top"> <div style="overflow-x:scroll; width:601px; scrollbar-track-color: #FFffff; scrollbar-face-color:#ff3366; scrollbar-shadow-color: #ff3366; scrollbar-highlight-color: #ff3366; scrollbar-arrow-color: #ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#ffffff;"> <table width="1200" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF3366" > <tr align="center" class="time_font" > <td> ・ ・ //この部分がJSP上がループ処理となる ・ ・ ・ ・ </td> </tr> </table> </div> </td> </tr> </table> </body> </html> ちょっと長いですが、見ていただいてありがとうございます、賜りたく切にご回答をまちしておております。
- 締切済み
- HTML
- テーブルの線の色が指定できない
テーブルの線の色が指定できないうえ、最後に宣言したスタイルシートが適用されてしまいます。 理由がわかりません。 <style type="text/css"> table, td, th.bordercolor_white { border: 1px white solid; } table, td, th.bordercolor_red { border: 1px red solid; } </style> <table class="bordercolor_white"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> このような文だと、 <table class="bordercolor_white">としているのに、 なぜかテーブルの線の色は、赤になってしまいます。 table, td, th.bordercolor_red { border: 1px red solid; } table, td, th.bordercolor_white { border: 1px white solid; } のように、順番を入れ替えると、最後に宣言した白になります。 なので、<table class="bordercolor_white">の部分は無視されるようです。 二つのテーブルの線の色を用意した場合、 任意でテーブルの線の色を付ける方法をご教授ください。
- 締切済み
- CSS
- ボーダーカラーの印刷
ドリームウェーバーでページを作っています。 で、 テーブルで表を作ったのですが、色を付けても、カラープリンターで印刷するとその部分の色は黒で出てしまうのです。ソフトでは、ボーダーカラーでちゃんと色を指定していて、Webで見ても色がついているのにです。色を印刷してもでるようになる方法をご存知の方がいましたらお願いいたします。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="75%" border="1" bordercolor="#FF0000"> <tr> <td> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
お礼
ありがとうございました。