[HTML5] 테이블의 기본 구조와 태그

html에서 table(테이블)이란 표를 만들 때 사용하는 태그입니다.

레이아웃을 잡으려고 사용하는 용도로는 사용을 지양하는 것이 좋습니다.

table의 태그에 대하여 알아보겠습니다.

 

• <table> : 표
• <tr> : 행
• <th> : 열의 제목
• <td> : 내용 셀
• <thead> :  표의 머리 부분
• <tbody> : 표의 본문 부분
• <tfoot> 표의 꼬리 부분
• <caption> : 표 제목
• <colgroup> : 행의 그룹화. 보통 셀의 width값을 줄 때 사용.
• colspan : 가로의 셀을 합칠 때 사용하는 태그
• rowspan : 세로의 셀을 합칠때 사용하는 태그
• scope : 웹 접근성을 위해 데이터를 인식하기 위해 사용.

 

TABLE의 기본적인 예제

---

 

See the Pen WNejQgG by aldo814 (@aldo814) on CodePen.

 

위의 예제 처럼 하나의 tr태그에 있는 th, td 요소는 가로로 한 줄에 나타납니다. 

<tr> 태그는 <th><td>를 담아내는 부모라고 생각하시면 편합니다.

 

 

 

TABLE의 기본적인 구조에 대해 살펴볼 수 있는 예제

---

See the Pen wvwdaLb by aldo814 (@aldo814) on CodePen.

 

 

위의 리스트를 보며 코드를 보면 좀 더 이해하기 쉬우실 거예요.

caption:제목을 table 다음에 선언해주고, colgroup으로 width, 너비 값을 지정해줍니다.

이는 % 로도 가능하니 반응형 웹에서도 사용할 수 있습니다.

 

 

 

TABLE 병합 예제

---

See the Pen jONmbXB by aldo814 (@aldo814) on CodePen.

 

 

가로 셀 합치는 것은 colspan = "합칠 셀 개수" / 세로 셀 합치는 것은 rowspan ="합칠 셀 개수"