[HTML] 테이블 만들기

2024. 7. 26. 19:05WebFront/HTML CSS

기본

<table> 테이블 태그는 전체 테이블을 감싼다. border="숫자"는 테이블의 경계선 두께를 결정한다. 

<th>: table head라는 의미로 테이블의 첫번째 행에서 사용되어 각 열의 제목을 만드는데 사용된다. 

<tr>: table row라는 의미로 태그는 각각의 행을 나타낸다. 

<td>: table date라는 의미로 테이블 행 내에 있는 각각의 셀을 표현하는데 사용된다. 

 

* 테이블의 영역을 thead, tbody, tfoot으로 구분하기도 한다. 

 

 

 

https://codepen.io/ycraah/pen/gONLbMY

 

[07.26]테이블 만들기 연습

...

codepen.io

넓이 지정

colgroup: 각 행의 넓이를 width로 지정할 수 있다. 닫는 태그가 없다는 것에 주의하자.

https://codepen.io/ycraah/pen/RwzoNKX

 

[07.26] 테이블 넓이 지정 colgroup col width 이용

...

codepen.io

행 병합

colspan: 테이블에서 열을 병합하는 속성이다. th 또는 td 태그 안에서 사용된다는 점에 주의하자.

rowspan: 테이블에서 행을 병합하는 속성이다. colspan과 반대이다. 

https://codepen.io/ycraah/pen/MWMbYvO

 

[07.26] 테이블 병합 colspan,rowspan

...

codepen.io