HTML - 테이블(table)

HTML 테이블은 웹 개발자가 데이터를 행과 열로 구성하여 정렬할 수 있게 해줍니다. 테이블을 사용하면 데이터를 구조화하고 시각적으로 표현할 수 있습니다.

 

HTML에서 테이블을 사용하는 방법은 다음과 같습니다.

 

1. 테이블 엘리먼트 생성 : <table> 태그를 사용하여 테이블을 생성합니다.

<table>
</table>

2. 행 생성 : <tr> 태그를 사용하여 테이블의 각 행을 생성합니다.

<table>
  <tr>
  </tr>
</table>

3. 열 생성 : <td> 태그를 사용하여 각 행에 열을 생성합니다. <td> 태그는 셀의 내용을 정의합니다.

<table>
  <tr>
      <td>김치천국</td>
      <td>000-000-000</td>
      <td>국가</dh>
  </tr>
</table>

 

4. 열 제목 생성 : 테이블의 열 제목을 나타내려면 <th> 태그를 사용합니다. <tn> 태그는 <td> 태그와 비슷하지만 보통 굵은 글씨로 표시되면 가운데 정렬 됩니다.

<table>
  <tr>
      <th>회사</th>
      <th>연락처</th>
      <th>국가</th>
  </tr>
</table>

5. 행 병합 : 한 열에 여러 행을 병합하려면 rowspan 속성을 사용합니다. 병합할 셀에 rowspan 속성을 추가하고 병합할 행의 수를 지정합니다.

<table>
  <tr>
      <td rowspan =”2”> 병합된 셀</td>
      <td> 셀1</td>
  </tr>
  <tr>
    <td>셀2</td>
  </tr>
</table>

6. 열 병합 : 한 행에 여러 열을 병합하려면 colspan 속성을 사용합니다. 병합할 셀에 colspan 속성을 추가하고 병합할 열의 수를 지정합니다.

<table>
  <tr>
      <td colspan=”2”> 병합합된 셀</td>
      </tr>
  <tr>
    <td> 셀1</td>
    <td> 셀2</td>
  </tr>
</table>

7. 테이블 캡션 추가 : <caption> 태그를 사용하여 테이블에 캡션을 추가할 수 있습니다. 캡션은 테이블 위나 아래에 위치하며 테이블과 관련된 설명을 제공하는 역할을 합니다.

 

  <table border="1">
    <caption>테이블 캡션</caption>
    <tr>
      <th colspan="2">제목 1</th>
      <th>제목 2</th>
    </tr>
    <tr>
      <td>셀 1</td>
      <td>셀 2</td>
      <td rowspan="2">병합된<br>셀</td>
    </tr>
    <tr>
      <td colspan="2">병합된<br>셀</td>
    </tr>
  </table>

위의 코드를 시각화 해서 보면 아래와 같다

table에 border 속성을 사용한 이유는 그래야 표가 더 눈으로 보기 편하기 때문에 사용한 것이다. 직접 텍스트 파일에 써서 HTML 파일로 열어서 보면 이해하기 편합니다.