본문으로 건너뛰기
실습하기

테이블(Table)

테이블(Table)은 데이터를 행과 열로 이루어진 표로 구성합니다.

HTML에서는 <table> 태그를 활용해 웹 페이지에 표를 만들 수 있습니다.


기본 구성​

테이블을 만들기 위한 주요 태그들은 다음과 같습니다.

  • <table> : 테이블 요소 생성

  • <tr> : 테이블의 행을 정의합니다. "table row"의 줄임말입니다.

  • <td> : 테이블의 데이터 셀을 정의합니다. "table data"의 줄임말입니다.

  • <th> : 테이블의 제목 셀을 정의합니다. 일반적으로 굵은 글씨로 표시됩니다.


사용 예제​

아래는 간단한 테이블 예제입니다.

테이블 예제
<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>25</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>영희</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>

위의 예제는 3x3 크기의 테이블을 생성하며, 첫 번째 행은 제목 셀로 구성되고 나머지 행은 데이터 셀로 구성합니다.


기타 테이블 관련 태그​

테이블을 더 정교하게 구성하기 위한 태그들도 있습니다.

  • <thead> : 테이블의 헤더(머리말) 그룹화

  • <tbody> : 테이블의 본문 그룹화

  • <tfoot> : 테이블의 푸터(바닥글) 그룹화

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!