[HTML] Table(테이블) 태그 사용법과 예제

HTML Table 태그

HTML의 <table> 태그는 표를 만들어 주는 태그입니다. 

<table> 태그와 관련된 기본적인 태그들은 다음과 같습니다.

 

• <table>
  // 테이블을 만드는 태그
• <th>
  // 테이블의 헤더를 만드는 태그; 가운데 정렬에 굵은 글씨가 default 값임
• <tr>
  // 테이블의 행을 만드는 태그

• <td>
  // 테이블의 열을 만드는 태그// <tr> 안에 포함되어 각각의 table data를 담고 있음

 

예제 1: 간단한 테이블 만들기

<table border="1">
      <tr>
        <th>header1</th>
        <th>header2</th>
      </tr>
      <tr>
        <td>row1 - data1</td>
        <td>row1 - data2</td>
      </tr>
      <tr>
        <td>row2 - data1</td>
        <td>row2 - data2</td>
      </tr>
</table>

 

 

Table 태그 관련 속성들

• border
  // 테이블의 테두리 설정
  

• width / height
  // 테이블의 가로 / 세로 크기 설정

• align
  // 테이블 안의 내용 정렬

• bgcolor
  // 배경 색 설정

• colspan
  // 좌우로 열 확장

• rowspan
  // 상하로 행 확장; 밑에 예시에서 처럼 rowspan도 <td> 태그에서 사용해야 함

 

예제 2: 속성 값 사용해보기

<table border="1">
      <tr>
        <td colspan="2" align="center">colspan & align</td>
      </tr>
      <tr>
        <td rowspan="2">rowspan</td>
        <td bgcolor="yellow">bgcolor</td>
      </tr>
      <tr>
        <td bgcolor="lightblue">bgcolor</td>
      </tr>
</table>