htmlタグで表を作りたい

質問

htmlタグで表を作りたい
ｈｔｍｌで添付したような表をつくりたいのです。
１． 外枠を太くする
２． 中の線を点線にする
３． 左は項目ごとにセルを結合する

どう入力したらこのようになるでしょうか？
教えて下さい。お願いします。

回答No.1

756co

スタイルシートを使います。

ヘッダ内にスタイルシートを加えてください。
スタイルシートでは、セルの枠線についてしていています。
枠線の太さや色は適宜変更してください。

<style type="text/css">
table.a td
{ border:1px dotted #ffccff; }
</style>

表のタグは以下のとおりです

<table class="a" border="2" bordercolor="#000000" cellspacing="0" width="450">
<tbody>
<tr>
<td rowspan="3" style="border-top:0;border-left:0;">コーヒー</td>
<td style="border-top:none;">エスプレッソ</td>
<td style="border-top:none;border-right:0;">450円</td>
</tr>
<tr>
<td>アメリカン</td>
<td style="border-right:0;">230円</td>
</tr>
<tr>
<td>ブレンド</td>
<td style="border-right:0;">250円</td>
</tr>
<tr>
<td rowspan="2" style="border-left:0;">紅茶</td>
<td>ストレート</td>
<td style="border-right:0;">300円</td>
</tr>
<tr>
<td>ミルクティー</td>
<td style="border-right:0;">350円</td>
</tr>
<tr>
<td rowspan="2" style="border-bottom:0;border-left:0;">ジュース</td>
<td>コカコーラ</td>
<td style="border-right:0;">280円</td>
</tr>
<tr>
<td>オレンジジュース</td>
<td style="border-right:0;">350円</td>
</tr>
</tbody></table>

もう少しスマートな書き方もあると思いますが
とりあえずはこんな感じでしょうか…

テーブルやセルのサイズ、文字の配置は適宜変更できます。

IE、Firefoxにて確認してありますが
どんな環境でも崩れずに表示させたければ画像で置いた方が確実だと思います。

お礼

ありがとうございました。できました。