TABLE内の枠線を一部消すには

解決済

質問者：ark2004
質問日時：2012/06/04 10:25
回答数：1件

よろしくお願い致します。
HTMLでの表の書き方について教えてください。
1行5列の表で
1列目は枠線あり（枠内の表示項目あり）、
2列目は枠線なし（枠内の表示項目なし）、
3列目は枠線あり（枠内の表示項目あり）、
4列目は枠線なし（枠内の表示項目なし）、
5列目は枠線あり（枠内の表示項目あり）、
のイメージで作成したいのですが
どのように記述したらよいか教えてください。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/06/04 11:58

そもそも、枠内にデータがないのに２列目、４列目とはどういう意味でしょう。

データがないのに、空の行を見栄えのためだけにHTMLを記述するのは間違いです。
　表は決してデザインのために使用してはなりません。
・ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　表はあくまで、「縦横に関連のあるデータを組み立てるだけ」です。

　行ではなく、セルにデータがない場合は、
border-collapse:
border-spacing:
empty-cells:
　の各プロパティを組み合わせて希望のデザインにします。その行すべてデータがない場合も同様ですが、その場合は空の行をおくのではなく。これらを使って行間のスペースを開けるべきです。

ごく簡単な例　ウェブ標準HTML4.01strict+CSS2.1
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
※　タブは＿に置換してあるので戻すこと。

HTMLに無駄なものは一切ないです。携帯電話だろうが検索エンジンだろうが利用できる。読み上げブラウザが空の行を読み上げない。excelやメモ帳などにコピペとかデータの再利用がそのままできる。

<!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>
＿<h1>サンプル</h1>
＿<table summary="行間広げる">
＿＿<tbody>
＿＿＿<tr>
＿＿＿＿<th abbr="title">＼</th><td>１列</td><td>２列</td><td>３列</td><td>４列</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<th abbr="L1">１行目</th><td>１列</td><td>２列</td><td></td><td>４列</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<th abbr="L2">２行目</th><td>１列</td><td>２列</td><td>３列</td><td>４列</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<th abbr="L3">３行目</th><td>１列</td><td>２列</td><td>３列</td><td>４列</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<th abbr="L4">４行目</th><td>１列</td><td>２列</td><td>３列</td><td>４列</td>
＿＿＿</tr>
＿＿</tbody>
＿</table>
</body>
</html>