HTML5 - 테이블 태그

테이블 태그는 HTML 페이지에서 표를 만들 때 사용하는 태그입니다. 과거에는 테이블 태그를 사용해 레이아웃도 구성했습니다. 하지만 현대의 웹 페이지 대부분은 뒤에서 살펴볼 div 태그를 사용해 레이아웃을 구성하므로 사용 빈도가 줄었습니다.

테이블 태그 기본

<body>

<table>

</table>

</body>

table 태그를 생성하기 위해서는 아래의 표의 태그를 이용합니다.

tr 태그는 table row를 의미하고, th 태그는 table header를 의미하며 td 태그는 table data를 의미합니다. 이것을 이요해서 아래의 예시1을 만들 수 있습니다.

예시1

예시1을 실행하고 요소 검사를 해보면 코드를 입력한 것과 다르게 아래 예시2와 같은 계층 구조를 형성합니다. tbody 태그가 자동으로 생성됩니다. 이러한 웹 브라우저의 특성으로 가끔 문제가 발생하는 경우가 있습니다.

예시2

HTML5 이전의 table 태그는 속성이 굉장히 많았습니다. 하지만 HTML5의 table 태그는 아래의 표의 속성 하나만을 가지고 있습니다.

속성 이름	설명
border	표의 테두리 두께 지정

또한 th태그와 td 태그는 아래 표와 같은 속성을 가지고 있습니다.

위의 표에 나온 속성을 이용해서 아래 작성후 나온 예시3의 결과를 봅니다.

예시3