[HTML , CSS] table로 표만들기

안녕하세요 오늘은 table 태그를 활용하여 간단하게 표를 만드는 방법을 알려드리겠습니다.

 

table태그를 사용하기 전 알아두어야하는 하위 태그들이 있는데요

 

* 헤더태그 : <th>

* 행태그 : <tr>

* 열태그 : <td>

 

이 세가지만 안다면 표는 간단하게 만들 수 있어요!

 

 

 

위 사진과 같이 css없이 표를 만들 수 있습니다.

 

먼저 table태그를 만들어 주고 만약 3x3표를 만들고 싶다 하면 먼저 헤더태그<th>를 3개 만들어줘야하겠죠?

 

그리고 행태그<tr> 안에 <td> 열 태그를 넣어주면 테이블 표 완성!

 

그 다음은 테이블 디자인을 변경하고 싶을 때 쓰는 속성인데요! 

 

총 8 개의 속성으로 이루어져있습니다.

 

1. border

테이블의 테두리

 2. bordercolor

테이블의 테두리 색상 

 3. width

테이블 가로 크기 

4. height 

테이블 세로 크기 

 5. align

정렬

 6. bgcolor

배경색 

 7. colspan

 가로 합병(열 합병)

 8. rowspan

 세로 합병(행 합병)

 

어떻게 쓰는지는 예시를 통해서 알아보겠습니다. 만약 첫행의 두번째 요소의 배경색을 바꾸고 싶다면

 

bgcolor속성을 넣어주면 됩니다.

 

다른 속성을 하나 더 해보겠습니다.  이번에는 병합하는 것을 해볼텐데

병합에는 가로병합colspan 세로병합 rowspan이 있습니다. 

저는 세로병합 rowspan을 적용해보겠습니다.

처음 시작점으로 rowspan을 적용시켜주면 적용한 태그 기준으로 병합된 모습을 볼 수 있습니다.

 

여기까지 table에 대해서 알아보았습니다.