HTML 표 태그 구현 - HTML

표 (또는 테이블)는 웹 페이지에서 데이터를 구조화하고 표현하기 위한 강력한 도구입니다. 표는 주로 엑셀이나 달력과 같은 형태로 생각할 수 있으며, 웹 페이지에서 정보를 정리하고 시각적으로 표현하는 데 사용됩니다. HTML에서 표를 만들 때 다음과 같은 기본 태그들을 사용합니다.

1. <table> 태그: 표를 정의하는 컨테이너입니다. <table> 태그로 표를 시작하고 닫아야 합니다.

2. <tr> 태그 (Table Row): 표의 각 행을 정의합니다. 행은 가로 방향으로 데이터를 나타냅니다. 표의 각 행은 <tr> 태그로 시작하고 닫아야 합니다.

3. <td> 태그 (Table Data): 표의 데이터 셀을 정의합니다. 각 셀은 행 내에서 열의 위치를 나타냅니다. 셀 내에 실제 데이터를 입력합니다. 셀은 <td> 태그로 정의하고 닫아야 합니다.

4. <th> 태그 (Table Header): 표의 헤더 셀을 정의합니다. 보통 첫 번째 행에 표 제목이 들어갑니다. 헤더 셀은 <th> 태그로 정의하고 닫아야 합니다.

 

table.html

<table>
  <tr>
    <td>첫 번째 셀</td>
    <td>첫 번째 행</td>
  </tr>
  <tr>
    <td>두 번째 셀</td>
    <td>두 번째 행</td>
  </tr>
  <tr>
    <td>세 번째 셀</td>
    <td>세 번째 셀</td>
  </tr>
</table>

해당 코드는 밑에 테이블과 같이 표현될 수 있습니다.

첫 번째 셀	첫 번째 행
두 번째 셀	두 번째 행
세 번째 셀	세 번째 행

 

모든 <td> 태그는 <tr> 태그 안에 있어야 합니다.  행을 그린 후 그 행을 데이터로 채워 나가는 생각을 가지고 코딩을 하면 쉽게 만들 수 있습니다. 하지만 보기에는 테두리도 없고 선뜻 구별하기가 힘들 수 있습니다. 그러하여 CSS를 사용하여 테두리를 그려 보겠습니다.

 

table.html

<style>
	table {
  		border-collapse: collapse; /* 테두리를 합침 */
  		border-spacing: 0; /* 간격을 0으로 설정 */
		}
    td {
    	border: solid 1px black; /* td 태그에 테두리 추가 */
        }
</style>

<table>
  <tr>
    <td>첫 번째 셀</td>
    <td>첫 번째 행</td>
  </tr>
  <tr>
    <td>두 번째 셀</td>
    <td>두 번째 행</td>
  </tr>
  <tr>
    <td>세 번째 셀</td>
    <td>세 번째 셀</td>
  </tr>
</table>

첫 번째 셀	첫 번째 행
두 번째 셀	두 번째 행
세 번째 셀	세 번째 행

<td> 태그에 실선(solid) 검은(black) 테두리(border)를 추가하는 코드를 작성했습니다. 이제 표의 구분선이 잘 보입니다.

 

그리고 border-collapse 속성을 collapse로 설정하여 테두리를 합치고, border-spacing 속성을 0으로 설정하여 표 간격을 없애고 있습니다.

이렇게 설정하면 표 사이의 간격을 0으로 만들 수 있고, 위의 코드를 사용하면 표의 간격이 없어져서 표 사이에 간격이 없는 효과를 얻을 수 있습니다.

 

table.html

<table>
  <tr>
    <td colspan="2">열 확장</td>
    <td>열 3</td>
  </tr>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
    <td>열 3</td>
  </tr>
</table>

colspan 속성 (열 확장):
colspan 속성을 사용하면 셀을 가로 방향으로 확장할 수 있습니다. 아래의 예시에서는 첫 번째 행의 첫 번째 셀을 가로로 2개의 열로 확장하고 있습니다.

(참고 : colspan에서 col은 column(열)에서 가져온 말입니다.)

 

 

table.html

<table>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
    <td>열 3</td>
  </tr>
  <tr>
    <td rowspan="2">행 확장</td>
    <td>열 4</td>
    <td>열 5</td>
  </tr>
  <tr>
    <td>열 6</td>
    <td>열 7</td>
  </tr>
</table>

rowspan 속성 (행 확장):

rowspan 속성을 사용하면 셀을 세로 방향으로 확장할 수 있습니다. 아래의 예시에서는 두 번째 행의 첫 번째 셀을 세로로 2개의 행으로 확장하고 있습니다.

 

(참고 : rowspan에서 row는 row(행)에서 가져온 말입니다.)