오랫만에 블로그 포스팅을 하다 보니 ㅠ_ㅠ 기본 코딩도 자꾸 잊어먹게 된다.
오늘은 table 태그를 사용해서 작업을 하다가 헷갈려서, 이번 기회에
오늘은 table 태그 및 속성에 대해서 알아보겠습니다.
table 태그는 HTML5에서는 사용이 권장되지는 않는 태그 요소로 알려져있습니다.
왜냐하면 더럽다고 해야하나.. 브라우저별로 맞추기도 힘들고, 브라우저 또한 많은 자원을 소모해서
구현하기 때문에 비권장되는 요소로 알려져있습니다.
반응형 테이블 태그를 만들 수 있지만 일부 브라우저에는 호환도 되지않고..
자제가 필요한 태그이지만 어쩔수없이 사용하게 되는 경우가 매우 많은 태그입니다.
예를들어.. 지금 작성하는 블로그 텍스트 편집기에 포함되어있는 [표삽입] 기능으로
표를 집어넣으면 style과 code가 뒤죽박죽 엉망이죠..
Table 태그의 요소
table도 기본구조는 다음과 같습니다.
<table border="1" summary="이 표는 그냥 표입니다.">
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Number">First</td>
<td data-label="Due Date">2016-06-01</td>
<td data-label="Amount">￦10,190</td>
</tr>
<tr>
<td data-label="Number">Second</td>
<td data-label="Due Date">2016-07-01</td>
<td data-label="Amount">￦20,443</td>
</tr>
</tbody>
</table>
See the Pen BzQaOb by JCM (@cocosoft) on CodePen.
summary 속성
테이블의 요약 정보를 적는 속성입니다. 단, caption속성과 혼돈을 초래하므로 권장되지 않는 속성입니다.
border 속성
테이블의 선을 표현합니다. 값은 1 또는 ""만 지원하며, 그 외에 테두리와 관련된 cellpadding, cellspacing, frame, rules, width 는 HTML5에서 권장하지 않습니다.
해당 속성은 마찬가지로 티스토리 텍스트 편집기에서 [표삽입]기능으로 생성시 해당 갖게 됩니다.
CAPTION 요소
table 요소 다음에 위치하며 하나의 table 당 하나의 속성을 가지게 됩니다. 가운데 정렬이 됩니다.
TR 요소
테이블의 행을 표현하며, th 또는 td 요소를 포함해야 합니다.
TH 요소
테이블 헤더 셀을 표현합니다. 제목셀
scope 속성
th속성의 가로행, 및 새로행 여부를 판단합니다.
scope="row"은 가로행에 적용, scope="col" 세로행에 적용, 기본값은 col 입니다.
scope="rowgroup" : 헤더 셀이 행 그룹에 적용이 됩니다. 그리고 scope="colgroup" 헤더셀이 열그룹에 적용이 됩니다.
TD 요소
테이블 데이터 셀을 표현합니다. 테이터 영역
셀병합
colspan 속성 : 세로행 병합범위 rowspan 속성 : 가로행 병합 범위
headers 요소
데이터셀과 헤더셀을 연결 지정할 때 사용
COLGROUP 요소
colgroup 요소는 열 그룹(COLumn GROUP)을 표시
COL 요소
col 요소는 테이블 열(table COLumn, 이하 열)을 표시
THEAD 요소
thead 요소는 테이블 헤더 그룹(Table HEADer group)을 표시
TFOOT 요소
tfoot 요소는 테이블 푸터 그룹(Table FOOTer group)을 표시
TBODY 요소
tbody 요소는 테이블 보디 그룹(Table BODY group)을 표시
아이고 암튼 이렇게 많습니다.. -_-
table class에 CSS 속성 주기
사실 오늘 가능 헷갈렸던게 바로 이거입니다.
<div class="test1">
<table>
...
</table>
</div>
위와 같이 div 태그에 해당 클래스만 CSS 속성을 줄때는
.test1 table {
속성
}
위와 같이 주면 됩니다.
그런데... table 자체 클래스 영역에만 속성을 줄때는..
<table class="test2">
...
</table>
위과 같이 자체 클래스 영역에 속성을 줄때는..
table.test2 {
속성
}
이렇게 CSS class 명을 줍니다..
왜 이렇게 하는 건지는... 잘모르겠네요.. ㅠ 나중에 더 찾아봐야겠습니다.
암튼 이것 때문에 헷갈려서 결국 테이블에 대해서 공부를 하게 되었네요.
암튼 이렇게 이상한 table 태그 때문에..
부트스트랩에서는 간편하게 테이블의 속성을 줄 수 있게 code가 있습니다.
http://bootstrapk.com/css/#tables
귀찮은 반응형 테이블 만들기도 <div class="table-responsive"> 를 사용해서 해결 할 수 있죠.
자세한 사항은 해당 부트스트랩 소개 사이트를 참조하세요.
