TABLE 태그 완전 정복

2016. 10. 30. 00:27 html과css공부

오늘은 웹 문서를 꾸밀때 필수적 이라 할 만큼 빈번하게 들어가는 도표 또는 박스등을 구현해 주는 table태그에 대해 공부 하는 시간을 갖도록 하겠습니다.

TABLE 태그로 도표 만들기

table태그 하나 만으로는 원하는 박스를 만들수 없습니다.

반드시 하위 태그들이 함께 있어야 합니다.

문서의 제목등을 기재 해주고 머리부를 꾸며 주는 Thead <th>태그 테이블의 본체를 구성 해 주는 Tbody태그 세로 칸을 형성해주는 tr 태그 가로줄을 형성 해주는 td 태그 테이블 하단에 보충 설명이나 추신을 기록 하는 tfoot태그로이루어 집니다.

TABLE 태그의 기본 구성

Table의 기본 구성은 <table><thead></thead><tbody><tr><td> </td></tr></tbody><tfoot></tfoot></table> 이렇게 각태그의 열림태그와 쌍을 이루는 닫힘 태그로 구성 됩니다.

thead와 tbody태그 tfoot태그는 상황에 따라 생략 해도 별 문제는 없습니다.

그러나 이렇게 태그 요소 만으로는 테이블의 형상이 나타 나지 않죠

각 태그에 속성과 속성값을 주어야 만 비로소 원하는 모양이 구현 됩니다.

예를 들어

<tbody>

<tr>

</tr>

</tbody>

</table>

위 처럼 이렇게 속성과 속성값을 주어 꾸며 주었을때 아래 와 같은 모양이 됩니다.

테이블

아쉬운 것은 table테그와 td태그에 cellspacing 이 적용되지 않는 다는 것입니다.

그러다보니 뷰에 나타날때는 td태그에 주어진 스타일이 table태그에 주어진 스타일을 덮어서 녹색선은 보이지 않습니다.
겔럭시 노트3 에디터에는 기본적으로 border에 인접한 선끼리 하나로 겹치도록 하는 collapse기능이 기본적으로 탑재 된듯 합니다.

이렇게 테이블에 속성과 값을 주어야만 테이블이 구현 된다는 걸 알수 있습니다.
그리고 thead태그나 tbody태그 tr태그는 생략 해도 기본 테이블 구현이 가능 하지만 td태그는 필수로 들어가지 않으면 안됩니다.

태그의 속성과 속성값이란?

그럼 여기서 태그의 속성과 값이란 무엇인지 알아야 하겠죠
<table style="width:200px; height:100px; border:1px solid green; cellspacing:5px; cellpadding:5px;">

위에 예로 든 table코딩을 해석 해 가며 알아 보겠습니다.

<table 여기 끼지는 테이블의 기본적 성질을 말하는 요소만을 가지게 됩니다.
style= 스타일은 태그에 속성과 속성값을 선언해 테이블을 꾸며 주라고 명령 할때 쓰는 태그의 명령어 입니다
"width: 넓이를 지칭하는 태그 속성 입니다.
200px; 속성값으로 200픽셀의 넓이 만큼 공간을 주라는 값입니다.
height:높이를 지칭하는 속성 입니다.
100px;역시 높이 속성값입니다.
border: 선을 결정 짓는 속성 입니다.
1px solid green; 속성 값으로 1픽셀의 굵기에 실선 이며 녹색 을 정해 주는 값입니다.
cellspacing:5px; 셀간의 간격을 정의 하는 속성과 값입니다.
cellpadding:5px;"> 셀과 텍스트 간의 최종 간격 또는 셀의 여백을 지정해주는 속성과 값입니다.

지금 까지는 가로칸 하나만을 구현 했을때의 코딩 방법 이였습니다.

가로셀의 갯수를 결정 하는 <td>태그

이제는 가로칸을 두칸으로 구현 해 보겠습니다.

<tbody>

<tr>

</tr>

</tbody>

</table>

결과

테이블

위의 결과에서 보시는 바와 같이 두칸을 만들때의 코딩에는 <td>태그가 두개가 필요 한것을 알수 있습니다.
만약 4칸을 만들고 싶다면 <td> 태그를 4개를 코딩 해주면 되겠죠

<tbody>

<tr>

</tr>

</tbody>

</table>

결과

테이블

세로셀의 갯수를 결정 하는 <tr>태그

그럼 이번에는 가로 4셀을 가진 두줄의 테이블을 만들어 보도록 하겠습니다.

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

결과

테이블	테이블	테이블	테이블
테이블	테이블	테이블	테이블

위 결과 에서 알수 있듯 <tr>태그 로 세로칸을 만든다는 것을 알수 있습니다.

복잡한 문서를 정리 해주 는 <style> 시트

위의 코딩에서 알수 있겠지만 셀의 갯수가 단순 할때는 별 복잡 한것을 느낄수 없었지만 셀의 수가 많이 늘어 나게 되면 코딩이 상당히 복잡해 지게 됩니다.
이때 스타일 시트를 만들어 스타일을 원격으로 선언 해 주면 간단하게 정리가 가능 합니다.
이번에는 스타일 시트로 간단히 코딩 하는 방법에 대해 알아 보겠습니다.
스타일 시트를 만드는 태그는 <style>선택자{속성+속성값}</style> 이렇습니다.
이 태그를 스타일을 넣고자 하는 바디에 넣고 스타일 선언을 태그 안 중괄호에 해주면 됩니다.
보통은 에디트의 상단에 해줍니다만 바디부 어디에든 상관 없습니다.

위 직접 주입방식으로 준 스타일 값 그대로 스타일 태그를 이용해 원격입력방식을 이용해 만들어 보겠습니다.

<style>

#tab{width:200px; height:100px; border:1px solid green; cellspacing:5px; cellpadding:5px;}

#tab tr .tda{border-top:1px solid red; border-left:1px solid red; border-right:1px solid red; border-bottom:1px solid red; width:auto; height:auto; text-align:center;}

</style>

이런식으로 스타일 선언을 했다면 이번엔 코딩을 해보도록 하겠습니다.

<tr>

</tr>

<tr>

</tr>

</table>

결과

테이블	테이블	테이블	테이블
테이블	테이블	테이블	테이블

위 결과 에서 원하는 테이블을 똑같이 구현 하면서도 아주 간단한 모습으로 코딩을 할수 있다는걸 알수 있습니다.
이번엔 위스타일 시트에서 원격주입 방식으로 좀더 복잡한 구조의 테이블을 만들어 보도록 하겠습니다.

간단 하게 위 스타일 시트에 두줄만 더 선언 해 주면 되는 것입니다.

<style>

#tab{width:200px; height:100px; border:1px solid green; cellspacing:5px; cellpadding:5px;}

#tab tr .tda{border-top:1px solid red; border-left:1px solid red; border-right:1px solid red; border-bottom:1px solid red; width:auto; height:auto; text-align:center;}

#tat{width:100%; height:50%px; border:1px solid green; cellspacing:5px; cellpadding:5px;}

#tat tr .tda{border-top:1px solid red; border-left:1px solid red; border-right:1px solid red; border-bottom:1px solid red; width:auto; height:auto; text-align:center;}

.tab{width:100%; border-bottom:3px solid green; cellspacing:5px; margin-bottom:10px; font-size:18pt; text-algin:center;}

</style> .

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

결과

테이블 만들기
테이블	테이블	테이블	테이블
테이블	테이블	테이블	테이블
테이블	테이블	테이블	테이블
테이블	테이블	테이블	테이블