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=”“ を入れます。は、結合するセルの数。
テキストモードにして編集します。
1 | <table class="samtable"> |
2 | <tbody> |
3 | <tr> |
4 | <th>日付</th> |
5 | <th>商品</th> |
6 | <th>単価</th> |
7 | <th>数量</th> |
8 | <th>金額</th> |
9 | </tr> |
10 | <tr> |
11 | <td>2022/07/01</td> |
12 | <td>ペン</td> |
13 | <td>100</td> |
14 | <td>20</td> |
15 | <td>2,000</td> |
16 | </tr> |
17 | <tr> |
18 | <td>2022/07/02</td> |
19 | <td>ノート</td> |
20 | <td>300</td> |
21 | <td>5</td> |
22 | <td>1,500</td> |
23 | </tr> |
24 | <tr> |
25 | <th>合計</th> |
26 | <td coldpan="4"></td> |
27 | <td>3,500</td> |
28 | </tr> |
行を結合したい場合、rowspan = “*” を使います。
