table 기본구조 + 반응형 테이블 > html

바디안에

div를 넣고 (나중을 위해서)

안에 <table></table>을 넣는 것 부터 시작

그 다음에

 <colgroup></colgroup>

<colgroup> 안에 col 을 작성!

<col>태그의 수만큼 가로 칸 (열) 이 생성된다

col width의 값은 %도 px도 가능하다

px은 고정값이고 %는 화면에따라 바뀌니까

상황에 맞게 쓰면 되겠다

( * 는 나머지영역(?)이라고 생각하면 된다 

 100-(고정값 width들의 합) )

테이블 완전체

thead와 tbody, tfoot(스샷엔 없지만) 들은 웬만하면 쓰는것이 좋다

테이블 디자인을 할 때, 아이디나 클래스없이 디자인 변경이 가능하기 때문 (은근 꿀팁)

<tr></tr>은 가로 전체줄

그 안에는 <th>와 <td>가 둘 다 들어갈 수 있다

<th>는 그 줄의 제목 역할로 bold처리가 되고 , 가운데정렬이 됨!

위에 colgroup에 써준 col 의 개수만큼

<th> 나 <td>를 써주면 된다

이렇게만 마크업을 짜놓으면

요런 아이가 나온다

굵은 놈이 th

화면을 줄이면

각자의 값을 %로 두었기 때문에

줄어든 만큼 비율조정이 된다.

(화면 줄였을 때)

이제 저 div에 style을 줘야징

테이블의 부모인 .table_layout (div의 클래스)의

넓이값을 전체영역의 98퍼센트만 주었당

그럼 보이는 인터넷 창의 98퍼센트만 차지하게 됨.

.table_layout의 자식인 테이블에게 넓이값 100%를 주면

그 부모값을 고대로 받는다

아까보다 더 넓어지고 인터넷창마다 깨지지않고 살아있는 테이블이 됨!

(물론 이렇게 반응형을 작업하진 않는다ㅠㅠ 테이블만 있는 페이지는 없응께)

<div class="table_layout">
	<table>
		<colgroup>
		<col width="20%" />
		<col width="20%" />
		<col width="20%" />
		<col width="*" />
		<col width="20%" />
		</colgroup>
		<thead>
		<tr>
			<th>Num</th>
			<td>Name</td>
			<td>ID</td>
			<td>Mobile</td>
			<td>Etc</td>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th>1</th>
			<td>aaa</td>
			<td>aaa</td>
			<td>010-1234-5678</td>
			<td>Publisher</td>
		</tr>
		<tr>
			<th>2</th>
			<td>bbb</td>
			<td>bbb</td>
			<td>010-1324-3546</td>
			<td>Singer</td>
		</tr>
		<tr>
			<th>3</th>
			<td>ccc</td>
			<td>ccc</td>
			<td>010-1234-5678</td>
			<td>Publisher</td>
		</tr>
		</tbody>
	</table>
</div>