- ベストアンサー
HTMLでデーブルを作成
HTMLの初心者ですが、添付画像のようなページを作成しようとしましたが、 結合部分が上手くいかなく、枠線が重なったり、文字が重ねたりして 困ってます。 お願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <html lang='ja'> <head> <meta charset='UTF-8' /> <title>タイトル</title> <style> table { border-collapse: collapse; border: 0px; table-layout: fixed; width: 32em;} th, td { border: 1px solid black; } th.b1 { background: #92D050; } th.b2 { background: #FFC000; } td.c { text-align: left; border: 0px; } td.l { text-align: left; } td.r { text-align: right; } </style> </head> <body> <table> <tr> <td class="c" colspan="4">果物一覧</td> <td class="c" colspan="2">★</td> </tr> <tr> <th class="b1" rowspan="2">果物</th> <th class="b1" colspan="3">評価</th> <th class="b2" rowspan="2">賞味<br>期限</th> <th class="b2" rowspan="2">売却</th> </tr> <tr> <th class="b1">入荷日</th> <th class="b1">単価</th> <th class="b1">数量</th> </tr> <tr> <td class="l">リンゴ</td> <td class="r">2012/12/1</td> <td class="r">200</td> <td class="r">10</td> <td class="r">2012/12/7</td> <td class="r">250</td> </tr> <tr> <td class="l">メロン</td> <td class="r">2012/12/2</td> <td class="r">300</td> <td class="r">5</td> <td class="r">2012/12/8</td> <td class="r">230</td> </tr> <tr> <td class="l"> </td> <td class="r"></td> <td class="r"></td> <td class="r"></td> <td class="r"></td> <td class="r"></td> </tr> </table> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
tableをまず書きます。excelなどで作成してCSVにしてそれを置換すると楽でしょう。 <table summary="fruitList"> <caption>果物一覧</caption> <thead> <tr> <th abbr="name" rowspan="2">果物</th><th abbr="details" colspan="3">詳細</th><th abbr="term" rowspan="2">賞味期限</th><th abbr="sold" rowspan="2">売却</th> </tr> <tr> <th abbr="arrive">入荷日</th><th abbr="price">単価</th><th abbr="number">数量</th> </tr> </thead> <tbody> <tr> <th abbr="apple">リンゴ</th><td>2012/12/1</td><td>200</td><td>10<td>2012/12/7</td><td>250</td> </tr> <tr> <th abbr="melon">メロン</th><td>2012/12/2</td><td>500</td><td>5<td>2012/12/8</td><td>530</td> </tr> </tbody> </table> table[summary="fluitList"]{border:none;border-collapse:collapse;width:60%;min-width:400px;} table[summary="fluitList"] th,table[summary="fluitList"] td{border:solid 1px gray;position:relative;} table[summary="fluitList"] thead th{background-color:rgb(180,255,180);} table[summary="fluitList"] thead th[abbr="term"], table[summary="fluitList"] thead th[abbr="sold"]{background-color:rgb(255,180,180);} table[summary="fluitList"] td{text-align:center;} table[summary="fluitList"] td+td{text-align:right;} table[summary="fluitList"] td+td+td+td{text-align:center;} table[summary="fluitList"] td+td+td+td+td{text-align:right;} table[summary="fluitList"] th[abbr="term"]:after{content:"★";position:absolute;left:0;top:-2em;color:red;}
お礼
回答ありがとうございます。 スタイルシートの使い方がまずかったようです。 ありがとうございました。
お礼
素早いご対応で有難うございます。 イメージ通りに出来ました。 有難うございます。