Table
- thead, tbody, tr, th, td
table 의 기본 width : 내용물 크기만큼 잡힌다.
th 의 기본값 : 가운데 정렬, 글자 크기가 굵게 나온다.
td 의 기본값 : 왼쪽 정렬
border-collapse
- 표의 경계를 허뭄
table{
border-collapse: collapse;
}caption
- 테이블 제목
<caption><테이블제목></caption>text-align, vertical-align
- text-align : 가로 정렬
- vertical-align : 세로 정렬
colgroup, col
- 가로로 묶기
- 주의. colgroup, col 모두 사용가능하지만, 이어서 사용할경우 하나만 골라서 사용해야한다. 그렇지 않을 경우 덮어쓰기가 될 수 있다!!
<colgroup span="숫자" id="firstcolgroup"/>
<!-- span="숫자" 숫자는 묶어줄 열의 개수를 뜻한다.-->colspan
- 열 병합
<td colspan="숫자">열병합</td>
<!-- 이때 숫자는 병합할 개수를 뜻한다. -->rowspan
- 행 병합
<td rowspan="숫자">열병합</td>
<!-- 이때 숫자는 병합할 개수를 뜻한다. -->rowspan 을 하기 위해서는 thead 와 tbody 가 없어야 한다.
없애도 내부적으로 tbody 는 존재한다. -> css 작성할때 tbody 작성해야한다.
=> html에 없더라도 tbody 아래 tr 로 표시하기!!
~ 태그
~은 해당 엘리먼트 다음에 나오는 모든 형제 태그이다.
~ * => 형제 태그 모든 것
~ th => 형제 태그 중 th 태그 전부
+ 태그
+는 해당 엘리먼트 다음에 나오는 형제태그 중 바로 밑동생 1개 태그 ( 형제 중 바로 아래동생 )
정리
- ch06_table
-> 01_table.html, 01_table.css, 02_table.html, 02_table.css, 03_table.html, 03_table.css, 04_table.html, 04_table.css, 05_table.html, 05_table.css, 06_table.html, 06_table.css
