본문 바로가기
Frontend/HTML

[HTML] 테이블 정의 예제 (1)

by olli2 2021. 8. 29.
table 태그에 대한 기본적인 설명 및 구조
https://dotddori-prgmwh.tistory.com/31

예제 실습 코드 및 결과물

테이블 정의

 

테두리 서식

 

결과물

 


각 줄 코드에 대한 설명

<table> ... </table>

테이블을 구성하는 요소 태그들을 포함하는 2차원 테이블 정의

 

 

<colgroup span="2" style="background-color: lightpink"></colgroup>

colgroup 태그로 2개의 열을 묶어 스타일 지정 (배경색 = lightgreen)

 

 

<tr> <th> ... </th> ... </tr>

th 태그를 사용하여 테이블 헤더(테이블의 각 열 제목)를 정의하고, 이들을 tr 태그를 사용하여 하나의 행으로 묶음

 

 

<tr> <td> ... </td> ... </tr>

td 태그를 사용하여 테이블 내에 들어갈 데이터들을 정의하고, 이들을 tr 태그를 사용하여 하나의 행으로 묶음