[HTML] Table Tag 이용하여 테이블 태그 만들기

HTML

제이미로그 2024. 5. 7. 14:32

📌 1. Table 이란?

가장 기본적인 게시판 형태를 만들 때, table 요소를 사용한다. 테이블이란 행과 열로 구성된 구조화된 데이터 집합(표 형식의 데이터)이다.

테이블을 사용하면 사람과 나이, 요일, 지역 수영장 시간표 등 다양한 유형의 데이터 간에 어떤 종류의 연관성을 나타내는 값을 빠르고 쉽게 조회할 수

있다.

📌 2. Table 구성요소?

<thead> : table header의 줄임말로, 각 열(세로줄)에 대한 제목이자 그 열이 무엇을 나타내는 지를 표기하는 요소

<tbody> : table의 각 영역(header, body, footer)를 명시하기 위해 <thead>, <tfoot> 요소와 함께 사용한다.

<tfoot> : table footer의 약자로 테이블의 하단 부분을 정의하는데 사용. 하단에 추가 정보나 요약 정보 표기.

<tr> : table row의 줄임말로, 테이블의 행을 표기. 가로줄 표시.

<th> : table header의 줄임말로, 테이블의 열에 대한 제목이자 그 열이 무엇을 나타내는 지 표기하는 요소. 볼드체로 나타남.

<td> : table data 혹은 table data cell 의 줄임말로 한 칸. 표의 셀 정의.

<table border="1"> : table의 굵기가 1 인 테이블.

<caption> : 표의 제목을 나타내는 태그.

<colgroup> : 표의 열을 그룹화하는 태그<col> : 표의 열을 나타내는 빈태그 (닫는 태그는 사용하지 않는다.)

<colspan> : 셀을 가로 방향으로 병합(열 병합)

<rowspan> : 셀을 세로 방향으로 병합(행 병합)

해당 코드에 대한 결과물은 다음과 같다.

태그 관련 코드 정리는 해당 사이트에서 참고 가능하다.