Web/HTML
[HTML5] 테이블의 기본 구조와 태그
eunyoe
2019. 8. 27. 15:52
반응형
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 ="합칠 셀 개수"
반응형