- 締切済み
HTML tableの枠線について
tableの枠線を cellspacingとcellpadding で作成しています。 ｄ３のセルの下と右の線を消す場合には、 どのようにすればいいのでしょうか？ <table border="0" cellspacing="1" cellpadding="2" bgcolor="#999999"> <tr> <td bgcolor="#f9f9f9">A</td> <td bgcolor="#FFFFFF">B</td> <td bgcolor="#f9f9f9">c</td> <td bgcolor="#FFFFFF">d</td> <tr> <td bgcolor="#f9f9f9">A2</td> <td bgcolor="#FFFFFF">B2</td> <td bgcolor="#f9f9f9">c2</td> <td bgcolor="#FFFFFF">d3</td> </tr> </table> よろしくお願いします
- megane5050
- お礼率85% (30/35)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
それがデザインのためでなく、あくまで表だとして・・ 必読＞14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) Web標準だとtableは <table summary="何とかの表" class="t1" border="1"> ＿<tbody> ＿＿<tr> ＿＿＿<td> ＿＿＿<td>A</td> ＿＿＿<td>B</td> ＿＿＿<td>c</td> ＿＿＿<td>d</td> ＿＿</tr> ＿＿<tr> ＿＿＿<td>A2</td> ＿＿＿<td>B2</td> ＿＿＿<td>c2</td> ＿＿＿<td>d3</td> ＿＿</tr> ＿</tybody> </table> となります。簡単なスタイルシートでデザインします この場合でしたら、 table.t1{ ＿border-collapse:separate;/* tableを分離モデルで描画 */ ＿border-spacing:1px;/* セルの間隔 */ ＿background-color:#999999;/* 表の背景色 */ } table.t1 td{ /* 詳細度[12] */ ＿border:solid 2px black; /* セルの外枠 */ ＿background-color:yellow;/* セルの背景色 */ } table.t1 td+td{ /* ２列目のセル 詳細度[13] */ ＿background-color:#FFFFFF; ＿color:red; } table.t1 td+td+td{/* ３列目のセル 詳細度[13] */ ＿background-color:yellow; ＿color:black; } table.t1 td+td+td+td{/* ４列目のセル 詳細度[13] */ ＿background-color:#FFFFFF; ＿color:red; } table.t1 tr+tr td+td+td+td{ /* ２行目４列目のセル */ ＿border-width: 2px 0 0 2px; --> ★IE5など古いブラウザを対象に入れるなら、隣接セレクタが使えないのでclass名で指定する。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) でチェック済み!! ★タブは＿に置換してあるので戻すこと ※IE5以降(わかりやすいかも・・(HTMLは余計なclass名が必要だけど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"> <!-- table.t1{ ＿border-collapse:separate; ＿border-spacing:1px; ＿background-color:#999999; } table.t1 td{ ＿border:solid 2px black; ＿background-color:yellow; } table.t1 td.R2,table.t1 td.R4{ ＿background-color:#FFFFFF; ＿color:red; } table.t1 tr.L2 td.R4{ ＿border-width: 2px 0 0 2px; --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="何とかの表" class="t1" border="1"> ＿＿<colgroup span="4" width="50"> ＿＿<tbody> ＿＿＿<tr class="L1"> ＿＿＿＿<td class="R1">A</td> ＿＿＿＿<td class="R2">B</td> ＿＿＿＿<td class="R3">c</td> ＿＿＿＿<td class="R4">d</td> ＿＿＿</tr> ＿＿＿<tr class="L2"> ＿＿＿＿<td class="R1">A2</td> ＿＿＿＿<td class="R2">B2</td> ＿＿＿＿<td class="R3">c2</td> ＿＿＿＿<td class="R4">d3</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html> ※IE7以降(HTMLは簡単だけど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"> <!-- table.t1{ ＿border-collapse:separate; ＿border-spacing:1px; ＿background-color:#999999; } table.t1 td{ ＿border:solid 2px black; ＿background-color:yellow; } table.t1 td+td{ ＿background-color:#FFFFFF; ＿color:red; } table.t1 td+td+td{ ＿background-color:yellow; ＿color:black; } table.t1 td+td+td+td{ ＿background-color:#FFFFFF; ＿color:red; } table.t1 tr+tr td+td+td+td{ ＿border-width: 2px 0 0 2px; --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="何とかの表" class="t1" border="1"> ＿＿<colgroup span="4" width="50"> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td>A</td> ＿＿＿＿<td>B</td> ＿＿＿＿<td>c</td> ＿＿＿＿<td>d</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>A2</td> ＿＿＿＿<td>B2</td> ＿＿＿＿<td>c2</td> ＿＿＿＿<td>d3</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
- 4017B
- ベストアンサー率73% (1341/1821)
HTMLタグのみでは表現出来ませんね。部分的にスタイルシートを設定する方法もありますが、ページ全体を丸ごとCSSで管理した方が簡単だと思います。 ━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>My Website</title> <style type="text/css"><!-- table#my_table, table#my_table tr, table#my_table td { margin: 5px; padding: 0; border: none; border-collapse: collapse; border-spacing: 0; font: inherit text-vertical-align: top; background-color: #fff; } table#my_table td.my_td_01, table#my_table td.my_td_02, table#my_table td.my_td_03 { padding: 2px; border: 1px solid #000; } table#my_table td.my_td_01 { background-color: #eee; } table#my_table td.my_td_02 { background-color: #fff; } table#my_table td.my_td_03 { background-color: #fff; border-right: none; border-bottom: none; } --></style> </head> <body> <div> <table id="my_table"> <tr> <td class="my_td_01">A</td><td class="my_td_02">B</td> <td class="my_td_01">c</td><td class="my_td_02">d</td> </tr> <tr> <td class="my_td_01">A2</td><td class="my_td_02">B2</td> <td class="my_td_01">c2</td><td class="my_td_03">d3</td> </tr> </table> </div> </body> </html> ━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━ とりあえず、上記のサンプルで右下のセルのみ、枠線無しに出来ます。後はこれを叩き台にして、色々改造していって下さい。
お礼
ありがとうございました！！ HTMLだけでは無理なのですね・・・ ｃｓｓでがんばってみます。
お礼
詳しくご回答頂きありがとうございました。 ｃｓｓだと複雑なのですね。 ※IE5以降というのがわかりやすかったです！ ありがとうございました。