Aqlier/ 7月 11, 2022/ tech

WordPress の表を使ったとき、表示上の見やすさの点で列を結合して使いたいときがあります。HTMLでも同様の処理になります。

例、以下のような明細を表示する表。

 

日付 商品 単価 数量 金額
2022/07/01 ペン 100 20 2,000
2022/07/02 ノート 300 5 1,500
合計 3,500

合計行のセルを結合したいとき

日付 商品 単価 数量 金額
2022/07/01 ペン 100 20 2,000
2022/07/02 ノート 300 5 1,500
合計 3,500

概要する箇所に coldpan=”*” を入れます。*は、結合するセルの数。
テキストモードにして編集します。

<table class="samtable">
<tbody>
<tr>
<th>日付</th>
<th>商品</th>
<th>単価</th>
<th>数量</th>
<th>金額</th>
</tr>
<tr>
<td>2022/07/01</td>
<td>ペン</td>
<td>100</td>
<td>20</td>
<td>2,000</td>
</tr>
<tr>
<td>2022/07/02</td>
<td>ノート</td>
<td>300</td>
<td>5</td>
<td>1,500</td>
</tr>
<tr>
<th>合計</th>
<td coldpan="4"></td>
<td>3,500</td>
</tr>

行を結合したい場合、rowspan = “*” を使います。