[Day 7] HTML <table>

오늘 강의는 오전 재현님, 오후 호준님으로

나뉘어서 진행되었다! (하루에 두 분 다 봐서 너무 좋았다 헤헿)

 

재현님과는 HTML 마무리로 table 태그에 대해 배웠다.

table 태그가 정말 어려워서 정말 연습이 많이 필요함을 체감했다 ㅠㅠ

그래서 오늘 TIL 포스팅은 table 에 집중해서 다루려고 한다.

 

 

<table>

표를 생성하는 table 태그는 컨테이너로서, caption, tr, col, td, th가 자식 요소로 쓰인다.

<thead><tbody><tfoot>

각각 머리글, 본문, 바닥을 의미하며, 레이아웃엔 영향을 미치지 않으나 css를 사용해 디자인 스타일을 지정할 때 사용

디자인 지정 외에도 thead와 tbody는 JS로 데이터를 컨트롤하는 경우로도 많이 쓰인다고 한다.

 

<tr><th><td>

html에서 표는 반드시 한 행씩 만들어지기 때문에 무조건 내용은 반드시 tr 태그 안에다 적어야 한다!

th는 행이나 열의 머리말(제목)을 나타낼 때 사용하므로 자동적으로 굵게, 가운데 정렬되어 보여진다.

td는 tr로 나눈 행에서 칸의 내용(data)을 넣을 때 사용하고, 이때 내용은 html의 모든 종류를 포함할 수 있다.

 

<td>와 <th> 태그의 속성 [colspan, rowspan]

셀을 병합할 때 사용한다.

colspan=가로 방향, rowspan=세로 방향

이때, 병합하고 싶은 셀의 개수를 지정해야 한다.

<td rowspan="2">100</td>
<th colspan="2">이름</th>

 

<colgroup><col>

한 열에 공통적인 스타일을 주고 싶을 때 많이 쓰는 태그이다.

디자인적 컨트롤을 위해 많이 쓰인다.

---

table 사용 시 명심해야 할 점들

• 테이블은 기본적으로 반응형이다.
• 열의 넓이만 조절하려면 colgroup>col
• 하나의 행은 tr로 만들기
• 티바디는 하나만
• th에 scope="col" 혹은 "row" 정해주기 (SEO에 영향)

 

 

---

*https://github.com/daheejo/FrontendSchool_2

GitHub - daheejo/FrontendSchool_2: 멋쟁이사자처럼 프론트엔드스쿨 2기

table을 이용한 과제로 멋사 달력 만들기를 했는데

아직 테이블 태그에 익숙하지 않아 정말 어려웠다ㅠ.ㅠ

dt간의 간격, colgroup을 다루는 방법이 아직 많이 부족하다..

테이블 태그 안의 여러 자식 요소들을 알맞게 사용할 수 있도록 좀 더 노력해야겠다..

(일단 다시 고쳐보고 다시 완전히 클론했다면 다시 수정해야지..)