HTML 표에서 셀 병합하기

8.1 가로로 셀 병합하기

표에서 셀을 병합하면 데이터를 더 유연하고 정보 있게 표시할 수 있어. 이는 여러 셀을 병합하여 헤더나 요약 데이터를 만들 때 특히 유용해. HTML에서는 셀 병합을 위해 colspan과 rowspan 속성을 사용해.

colspan 속성

colspan 속성은 가로로 셀을 병합해. 이 속성은 하나의 셀이 몇 개의 열을 차지해야 하는지를 지정해. 예를 들어, colspan="2"가 있는 셀은 한 행에서 두 개의 일반 셀의 공간을 차지하게 돼.

사용 예제:

예를 들어, 세 개의 열이 있는 표가 있고, 특정 행의 첫 번째 셀이 두 개의 열을 차지하길 원한다고 해봐. colspan="2"를 사용하여 이 두 셀을 병합할 수 있어. 이렇게 하면 여러 열에 걸친 헤더를 만들거나 여러 카테고리에 관련된 데이터를 병합할 때 유용해.

    
      <table border="1">
        <tr>
          <th>이름</th>
          <th>나이</th>
          <th>도시</th>
        </tr>
        <tr>
          <td>앨리스</td>
          <td>25</td>
          <td>런던</td>
        </tr>
        <tr>
          <td colspan="2">총계</td>
          <td>2 기록</td>
        </tr>
      </table>
    
  

8.2 세로로 셀 병합하기

rowspan 속성은 세로로 셀을 병합해. 이 속성은 하나의 셀이 몇 개의 행을 차지해야 하는지를 지정해. 예를 들어, rowspan="2"가 있는 셀은 한 열에서 두 개의 일반 셀의 공간을 차지하게 돼.

사용 예제:

예를 들어, 세 개의 행이 있는 표가 있고, 특정 열의 첫 번째 셀이 두 개의 행을 차지하길 원한다고 해봐. rowspan="2"를 사용하여 이 두 셀을 병합할 수 있어. 이는 여러 행에 관련된 데이터를 병합할 때, 예를 들어 병합된 헤더나 요약 데이터를 만들 때 유용해.

    
      <table border="1">
        <tr>
          <th>이름</th>
          <th>프로젝트</th>
          <th>도시</th>
        </tr>
        <tr>
          <td rowspan="2">앨리스</td>
          <td>프로젝트 A</td>
          <td>런던</td>
        </tr>
        <tr>

          <td>프로젝트 B</td>
          <td>바투미</td>
        </tr>
      </table>
    
  

8.3 동작 설명

colspan과 rowspan의 작동 원리

가로 병합 (colspan): 예를 들어, 여러 강의실에서 진행되는 수업 시간표를 만들고 있다고 상상해봐. colspan을 사용하여 하나의 수업이 두 시간대를 차지한다고 표시할 수 있어.

세로 병합 (rowspan): 예를 들어, 여러 단계에서 경쟁하는 참가자의 결과표를 만들고 있다고 상상해봐. rowspan을 사용하여 하나의 참가자가 두 단계를 차지한다고 표시할 수 있어.

실용적인 예

여러 열에 걸친 헤더 만들기: 데이터의 다양한 카테고리가 있는 표에서 여러 열에 걸친 헤더를 만들고 싶다면 colspan을 사용해. 예를 들어 "직원 정보" 헤더가 "이름", "나이", "부서" 열을 포함할 수 있어.

세로로 데이터 병합하기: 같은 사람이나 객체에 대해 여러 기록을 병합해야 하는 경우, 예를 들어 프로젝트의 여러 단계가 있는 경우, rowspan을 사용하여 행을 병합해. 예를 들어, 프로젝트 정보가 여러 행(예: 프로젝트 단계)을 차지하는 경우, rowspan을 사용하여 이를 병합할 수 있어.

8.4 예제

여러 직원이 다양한 프로젝트에 참여하는 표를 가지고 있다고 상상해봐:

• 직원들: 이반, 마리아, 페트르.
• 프로젝트들: 프로젝트 A, 프로젝트 B.

이반과 마리아가 두 개의 프로젝트에 동시에 참여한다는 것을 표시하기 위해 셀을 병합해보자:

    
<table border="1">
    <tr>
        <th>이름</th>
        <th>프로젝트 A</th>
        <th>프로젝트 B</th>
        <th>도시</th>
    </tr>
    <tr>
        <td>이반</td>
        <td colspan="2">예</td>
        <td>런던</td>
    </tr>
    <tr>
        <td>마리아</td>
        <td colspan="2">예</td>
        <td>런던</td>
    </tr>
    <tr>
        <td>페트르</td>
        <td>예</td>
        <th>아니오</th>
        <td>로마</td>
    </tr>
</table>
    
  

또는, 이반이 두 개의 프로젝트에서 일하고 있다는 것을 나타내고 싶다면:

    
      <table border="1">
        <tr>
          <th>이름</th>
          <th>프로젝트</th>
          <th>도시</th>
        </tr>
        <tr>
          <td rowspan="2">이반</td>
          <td>프로젝트 A</td>
          <td>런던</td>
        </tr>
        <tr>
          <!-- 빈칸 -->
          <td>프로젝트 B</td>
          <td>런던</td>
        </tr>
        <tr>
          <td>세르게이</td>
          <td>프로젝트 C</td>
          <td>로마</td>
        </tr>
      </table>
    
  

나는 고의로 인접 셀의 확장으로 인해 '먹힌' 셀이 놓일 자리에 주석을 추가했어. 이렇게 하면 다른 셀이 어떻게 표시될지 더 잘 이해할 수 있어.