(01) 現在の表に「合計金額」の行を追加します。table内に行を以下のように追加してからブラウジングしてください。
<table summary="注文内容"> <tr> <th>ご注文商品</th><th>税別価格</th><th>税込価格</th> </tr> <tr> <td>走れメロス</td><td>￥600</td><td>￥630</td> </tr> <tr> <td>対決！</td><td>￥980</td><td>￥1029</td> </tr> <tr> <td>日本の芸術</td><td>￥2400</td><td>￥2520</td> </tr> <tr> <td>合計金額</td><td>￥4179</td> </tr> </table>
(02) 現在はまだ不完全です。次に「合計金額」のセルを2列分の幅とします。セルが使用する幅を複数列分にするには、そのtdタグに「colspan」属性を用いて列数を指定します。今回は「合計金額」のセルが2列分使用するので、tdタグに「colspan=”2″」という属性と値を指定します。tableタグ内を以下のように更新してからブラウジングしましょう。
<table summary="注文内容"> <tr> <th>ご注文商品</th><th>税別価格</th><th>税込価格</th> </tr> <tr> <td>走れメロス</td><td>￥600</td><td>￥630</td> </tr> <tr> <td>対決！</td><td>￥980</td><td>￥1029</td> </tr> <tr> <td>日本の芸術</td><td>￥2400</td><td>￥2520</td> </tr> <tr> <td colspan="2">合計金額</td><td>￥4179</td> </tr> </table>
(03) もう1行分追加しましょう。
<table summary="注文内容"> <tr> <th>ご注文商品</th><th>税別価格</th><th>税込価格</th> </tr> <tr> <td>走れメロス</td><td>￥600</td><td>￥630</td> </tr> <tr> <td>対決！</td><td>￥980</td><td>￥1029</td> </tr> <tr> <td>日本の芸術</td><td>￥2400</td><td>￥2520</td> </tr> <tr> <td colspan="2">合計金額</td><td>￥4179</td> </tr> <tr> <td colspan="2">冊数</td><td>3</td> </tr> </table>
(04) 今度は、2行分の高さを持つセルを作成します。複数行にまたがるセルには、tdタグに「rowspan」属性で行数を指定します。
<table summary="注文内容"> <tr> <th>ご注文商品</th><th>税別価格</th><th>税込価格</th> </tr> <tr> <td>走れメロス</td><td>￥600</td><td>￥630</td> </tr> <tr> <td>対決！</td><td>￥980</td><td>￥1029</td> </tr> <tr> <td>日本の芸術</td><td>￥2400</td><td>￥2520</td> </tr> <tr> <td colspan="2">合計金額</td><td>￥4179</td> </tr> <tr> <td colspan="2">冊数</td><td>3</td> </tr> <tr> <td rowspan="2">ご連絡先</td><td>担当</td><td>三橋</td> </tr> </table>
(05) なお、まだWebページには反映されていません。
(06) その下の行は、2セル分のみ指定します。以下のようにHTMLファイルを更新してください。更新後はプレビューしましょう。
<table summary="注文内容"> <tr> <th>ご注文商品</th><th>税別価格</th><th>税込価格</th> </tr> <tr> <td>走れメロス</td><td>￥600</td><td>￥630</td> </tr> <tr> <td>対決！</td><td>￥980</td><td>￥1029</td> </tr> <tr> <td>日本の芸術</td><td>￥2400</td><td>￥2520</td> </tr> <tr> <td colspan="2">合計金額</td><td>￥4179</td> </tr> <tr> <td colspan="2">冊数</td><td>3</td> </tr> <tr> <td rowspan="2">ご連絡先</td><td>担当</td><td>三橋</td> </tr> <tr> <td>TEL</td><td>045-870-1652</td> </tr> </table>
(07) 最終行に3列分の幅を持つセル「明日発送予定です」を作成してください。
<table summary="注文内容"> <tr> <th>ご注文商品</th><th>税別価格</th><th>税込価格</th> </tr> <tr> <td>走れメロス</td><td>￥600</td><td>￥630</td> </tr> <tr> <td>対決！</td><td>￥980</td><td>￥1029</td> </tr> <tr> <td>日本の芸術</td><td>￥2400</td><td>￥2520</td> </tr> <tr> <td colspan="2">合計金額</td><td>￥4179</td> </tr> <tr> <td colspan="2">冊数</td><td>3</td> </tr> <tr> <td rowspan="2">ご連絡先</td><td>担当</td><td>三橋</td> </tr> <tr> <td>TEL</td><td>045-870-1652</td> </tr> <tr> <td colspan="3">明日発送予定です</td> </tr> </table>
