• 締切済み

テーブルの中で空白を表示させたいのですが、

テーブルの中で空白を表示させたいのですが、 <td> &nbsp;</td> このような表示のさせ方はよくないのでしょうか? <td>&nbsp;</td> も <td> </td> もダメなようです。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

empty-cellsです。  テーブルの各要素は、「テーブルのレイヤーと透過性( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/tables.html#table-layers )」の様に扱われます。 【引用】____________ここから 'empty-cells' 値: show | hide | inherit 初期値: show 適用対象: 'table-cell'要素 継承: yes パーセンテージ: 利用不可 メディア: visual 算出値: 指定値  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Tables - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/tables.html#propdef-empty-cells )]より cellpadding - HTML - 教えて!goo( http://okwave.jp/qa/q8788064.html )の回答で示したtableを分離ボーダーで書き直すと・・・ サンプル ★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; border-collapse:separate;/* ★分離ボーダーモデル★ */ border-color:red orange yellow lime; border-spacing:10px;/* ★セルの間隔を指定 ★ */ empty-cells:show;/* ★空白行も表示する hideで消える */ } table[summary="テストの表"] th, table[summary="テストの表"] td{ border:gray solid 2px; padding:10px 1em 20px 1em; } table[summary="テストの表"] th{ padding:10px 2em 20px 1em; } table[summary="テストの表"] tr:nth-child(2n) th{ background-color:yellow; } table[summary="テストの表"] tr:nth-child(2n) td{ background-color:rgb(255,255,180);} } table[summary="テストの表"] tr:nth-child(2n){ } /* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */ --> _</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