CSS table 셀 병합시 가로 셀 병합과 세로 셀 병합하기


CSS table 셀 병합은 가로의 경우 colspan 속성을 td, th 등에 삽입하면 됩니다. 세로 셀 병합은 rowspan 속성을 td, th 태그에 삽입하면 됩니다.

CSS 셀 병합 가로 병합 colspan

가로 병합은 colspan 속성 삽입으로 해결합니다. 아래 예시에 나온 표에서 맨 윗 줄의 원소 기호라는 글자가 적힌 칸과 그 옆의 칸을 가로로 병합하려면 어떻게 해야 할까요?.


<!DOCTYPE html>
<html>
  <head>
    <style>
      table, tr, td{
        border:1px solid black;
        border-collapse:collapse;
        padding:5px;
        text-align:center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>원소 기호</td>
        <td></td>
      </tr>
      <tr>
        <td>수소</td>
        <td>질소</td>
      </tr>
      <tr>
        <td>H</td>
        <td>N</td>
      </tr>
    </table>
  </body>
</html>

먼저 병합을 해서 글자를 통합할 <td> 태그 뒤에 colspan 속성을 입력합니다.

<td colspan>원소 기호</td>

그리고 병합할 셀의 개수를 속성값에 입력합니다. 총 합해질 셀의 개수가 두 개이므로 2를 입력합니다.

<td colspan="2">원소 기호</td>

주의점은 병합되서 없어지는 <td></td> 빈 태그는 삭제해야 된다는 점입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, tr, td{
        border:1px solid black;
        border-collapse:collapse;
        padding:5px;
        text-align:center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">원소 기호</td>
      </tr>
      <tr>
        <td>수소</td>
        <td>질소</td>
      </tr>
      <tr>
        <td>H</td>
        <td>N</td>
      </tr>
    </table>
  </body>
</html>

세로 병합(줄 병합 rowspan)

아래 예제의 표에서 맨 왼쪽 상단의 과일 문자가 적힌 칸과 그 바로 아래칸의 공백 칸을 세로로 병합하려고 합니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      table, tr, td{
        border:1px solid black;
        border-collapse:collapse;
        padding:5px;
        text-align:center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>과일</td>
        <td>빨강</td>
        <td>사과</td>
      </tr>
      <tr>
        <td></td>
        <td>노랑</td>
        <td>참외</td>
      </tr>
    </table>
  </body>
</html>

병합될 셀의 글자를 적을 셀 태그 뒤에 rowspan 속성을 입력합니다.

<td rowspan>과일</td>

rowspan 속성명 뒤에 병합될 셀의 개수를 속성값으로 입력합니다. 여기서는 총 두 개의 셀이 합쳐지므로 숫자 2를 적습니다.

<td rowspan="2">과일</td>

마지막으로 합쳐져서 없어질 빈 태그인 <td></td> 셀은 삭제를 합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, tr, td{
        border:1px solid black;
        border-collapse:collapse;
        padding:5px;
        text-align:center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">과일</td>
        <td>빨강</td>
        <td>사과</td>
      </tr>
      <tr>
        <td>노랑</td>
        <td>참외</td>
      </tr>
    </table>
  </body>
</html>

익숙해지면, 처음부터 빈 태그를 생략하고 작성할 수 있습니다.