このページの短縮URL(リンク用) §08-03…セルの結合 – オンライン無料パソコン講座 | PCセミナー

§08-03…セルの結合

(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>