[HTML] 테이블 표, 행, 열 만들고 (<table>, <tr>, <th>, <td>) 행열 병합하기

 table 태그를 이용해서 표를 만드는 방법을 알아보겠습니다.

 

[ Contents ]

 

 

1. 기본적인 테이블 구조

  <table border="1">
      <tr><th>제목1</th><th>제목2</th></tr>
      <tr><td>내용1</td><td>내용2</td></tr>
      <tr><td>내용1</td><td>내용2</td></tr>
  </table>

 <tr>은 'table row'의 약자로 표의 가로 행을 나타냅니다. <tr> 태그 안에 한 행에 담을 셀을 넣을 수 있습니다.

 <th>는 'table header'의 약자로 표의 제목 셀을 나타냅니다. 주로 1행에서 column 명을 나타낼 때 사용하며, td 태그와 달리 bold 처리와 가운데 정렬이 되어 있습니다.

 <td>는 'table data'의 약자로 셀을 나타냅니다. td 태그를 추가하면 하나의 셀이 추가되며, 열이 길어지는 효과도 있습니다.

 

 

  <table border="1">
      <tr><th>제목1</th><th>제목2</th></tr>
      <tr><td>내용1</td><td>내용2</td><td>내용3</td></tr>
      <tr><th>내용1</th></tr>
  </table>

 만약 행마다 셀의 개수가 다르다면, 가장 많은 셀을 가진 행을 기준으로 표의 열이 결정됩니다.  

 또, th 태그는 굳이 1행이 아니어도 사용할 수 있습니다. 주로 표의 제목으로 사용하지만, 위치가 고정되어 있진 않습니다.

 

 

 

2. 행 병합하기 

  <table border="1">
      <tr><th>제목1</th><th>제목2</th></tr>
      <tr><td>내용1</td><td rowspan="2">내용2</td><td rowspan="3">내용3</td></tr>
      <tr><th>내용1</th></tr>
  </table>

 rowspan 속성을 사용하면 아래쪽 빈 셀과 병합할 수 있습니다. 만약 아래에 병합할 셀이 없다면 그 이전까지만 병합합니다.  

 

 

  <table border="1">
      <tr><th>제목1</th><th>제목2</th></tr>
      <tr><td>내용1</td><td rowspan="2">내용2</td><td rowspan="3">내용3</td></tr>
      <tr><th>내용1</th><td>내용2</td></tr>
  </table>

 만약 아래쪽 셀이 빈 셀이 아니라면, 오른쪽으로 밀쳐내고 영역을 차지합니다. 따라서 이런 경우를 유의해야 합니다.

 

 

 

3. 열 병합하기

  <table border="1">
      <tr><th>제목1</th><th>제목2</th></tr>
      <tr><td>내용1</td><td>내용2</td><td>내용3</td></tr>
      <tr><th colspan="3">내용1</th></tr>
  </table>

 colspan 속성을 이용하면 오른쪽에 있는 셀을 병합할 수 있습니다.

 

 

  <table border="1">
      <tr><th>제목1</th><th>제목2</th></tr>
      <tr><td>내용1</td><td>내용2</td><td>내용3</td></tr>
      <tr><th colspan="3">내용1</th><td>내용2</td></tr>
  </table>

 rowspan과 마찬가지로, 만약 오른쪽 셀이 빈 셀이 아니라면 밀쳐내고 n만큼 영역을 차지합니다.