워드프레스 기본 편집기에서 표(테이블) 셀 합치기/병합

기본 구텐베르크 편집기에는 안타깝게도 표_table의 셀 병합 기능은 들어있지 않은 듯하다. 이렇게 기본적인 기능이 없다는 건 생각보다 꽤 충격적이다. 그렇다 보니 셀을 합치고자 할 때는 수작업으로 html 편집을 해 주어야 한다. (그렇지 않으면 관련 플러그인 설치해 사용)

1. 표 작성
2. 표 선택 > HTML로 편집
3. 병합을 원하는 셀 위치의 <td>에서 colspan(가로 병합) 또는 rowspan(세로 병합) 속성을 넣어 준다.
   - 가로 방향으로 합치기 : <td colspan="합칠 셀 개수">
   - 세로 방향으로 합치기 : <td rowspan="합칠 셀 개수">
4. 병합된 셀 개수만큼 (기존에 남아있는) <td></td> 삭제

<td>는 표에서 셀을 정의하는 태그이기 때문에 (이미 작성된 표에서) 셀을 병합하면 바뀐 셀의 개수만큼 <td> 개수도 수정해 주어야 한다.

사실 용어가 조금 혼동스럽기는 한데,

• colspan : col.은 column으로서 기둥･세로줄･열을 의미하며, (세로 방향의 병합이 아니라) 여러 세로줄을 병합_span, 즉 가로 방향의 병합을 의미.
• rowspan : row는 가로줄･행을 의미하며, (가로 방향의 병합이 아니라) 여러 가로줄을 병합_span, 즉 세로 방향의 병합을 의미.

---

예시 table (3x3)

1. 가로로 합치기 예시

기준이 되는 셀의 <td> 속성에 colspan 추가 및 합친 셀 개수만큼 <td></td> 삭제.

<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody>
<tr><td colspan="2"></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody></table></figure>

■ colspan 속성 추가 후 여분의 <td></td>를 삭제하지 않을 경우 합친 셀 개수만큼 밀려남.

<tr><td colspan="2"></td>		<td></td>	<td></td></tr>
<tr><td></td>	<td></td>	<td></td></tr>
<tr><td></td>	<td></td>	<td></td></tr>

■ colspan 속성 추가 후 여분의 <td></td>를 삭제하면 제대로 완성.

<tr><td colspan="2"></td>		<td></td></tr>
<tr><td></td>	<td></td>	<td></td></tr>
<tr><td></td>	<td></td>	<td></td></tr>

2. 세로로 합치기 예시

rowspan 속성 추가 후 여분의 <td></td>를 삭제하지 않은 경우 합친 셀 개수만큼 밀려남. 아래 줄의 셀이 병합되기 때문에 아래 줄에 해당하는(즉, 두 번째 <tr> 부분의) <td></td>를 삭제한다.

<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody>
<tr><td rowspan="2"></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody></table></figure>

■ rowspan 속성 추가 후 여분의 <td></td>를 삭제하지 않을 경우 합친 셀 개수만큼 밀려남.

<tr><td rowspan="2"></td>	<td></td>	<td></td></tr>
	<tr><td></td>	<td></td>	<td></td></tr>
<tr><td></td>	<td></td>	<td></td></tr>

■ rowspan 추가 후 여분의 <td></td>를 삭제하면 제대로 완성.

<tr><td rowspan="2"></td>	<td></td>	<td></td></tr>
	<tr><td></td>	<td></td></tr>
<tr><td></td>	<td></td>	<td></td></tr>

하루빨리 구텐베르크 편집기에 표의 셀 병합 기능이 생기기를 기대하며...