- ベストアンサー
TABLE内の枠線を一部消すには
よろしくお願い致します。 HTMLでの表の書き方について教えてください。 1行5列の表で 1列目は枠線あり（枠内の表示項目あり）、 2列目は枠線なし（枠内の表示項目なし）、 3列目は枠線あり（枠内の表示項目あり）、 4列目は枠線なし（枠内の表示項目なし）、 5列目は枠線あり（枠内の表示項目あり）、 のイメージで作成したいのですが どのように記述したらよいか教えてください。 よろしくお願い致します。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
そもそも、枠内にデータがないのに２列目、４列目とはどういう意味でしょう。 データがないのに、空の行を見栄えのためだけにHTMLを記述するのは間違いです。 表は決してデザインのために使用してはなりません。 ・ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 表はあくまで、「縦横に関連のあるデータを組み立てるだけ」です。 行ではなく、セルにデータがない場合は、 border-collapse: border-spacing: empty-cells: の各プロパティを組み合わせて希望のデザインにします。その行すべてデータがない場合も同様ですが、その場合は空の行をおくのではなく。これらを使って行間のスペースを開けるべきです。 ごく簡単な例 ウェブ標準HTML4.01strict+CSS2.1 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) で検証済み ※ タブは＿に置換してあるので戻すこと。 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"> <!-- table[summary="行間広げる"]{ ＿border:none; /* table自体には枠なし */ ＿border-collapse: separate;/* セル間を広げる */ ＿border-spacing: 0 2em; /* その間隔は上下２文字、左右0 */ ＿empty-cells: show; /* 内容のないセルもボーダーをつける */ ＿margin:0 auto; /* ページの中央に */ } table[summary="行間広げる"] th, table[summary="行間広げる"] td{ ＿padding: 0.2em 1em; /* セル内余白 上下0.2文字幅、左右１文字 */ ＿border:ridge gray 4px;/* ポーターの種類と幅、色 */ } table[summary="行間広げる"] td{border-left-width:0px;}/* tdのボーダーは消す */ --> ＿</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>
お礼
遅くなりました。 ご回答頂きましてありがとうございます。 帳票をイメージWebページをHTMLで可能か検討していました。 やはり罫線の問題は雛形ExcelをWebサイトに置き クライアントへのコピーで対応できればと思います。 ありがとうございました・