<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption>표제목</caption>
<colgroup>
<col style="width: 200px;">
<col>
<col>
<col style="background-color: blue;">
</colgroup>
<tbody>
<tr>
<th>1행1열</th>
<th>1행2열</th>
<td>1행3열</td>
<td>1행4열</td>
</tr>
<tr>
<th>2행1열</th>
<td>2행2열</td>
<td>2행3열</td>
<td>2행4열</td>
</tr>
<tr>
<th>3행1열</th>
<td>3행2열</td>
<td>3행3열</td>
<td>3행4열</td>
</tr>
<tbody>
</table>
</body>
</html>대부분 자식이 블록레벨이라면 부모도 블록레벨이다.
ul(or ol)안에 텍스트태그가 있으면 이것도 자식이다.
-필수 요소
- table
- 레벨 : 블록레벨
필요한 공간만 알아서 크기 조절함.
부모로만 사용 가능.
- 레벨 : 블록레벨
- thead
- tbody (안써도 알아서 인식됨. 오류도x. tbody만 사용해도 됨)
- tfoot
- tr
- table 또는 tbody시리즈의 자식으로만 사용 가능
- 가로 전체 한줄을 의미
- 사이즈를 줘도 적용이 안된다.
- th
- tr의 자식으로만 사용 가능
- 제목(글자 두껍게, 가운데정렬)
- td
- tr의 자식으로만 사용 가능
- 일반폰트, 왼쪽정렬
-옵셔널 요소 (없어도 상관없는 요소)
- caption : 표 제목
- table의 자식으로만 사용 가능
- 어디에 명시하던 표 상단 가운데 배치
- colgroup - 여러 열들을 묶어서 css 관리 가능 (세로 관리)
- tr과 구조가 같게 작성 (tr밑에 자식들이 4개면 col도 4개여야함)
- col : 각 th나 td를 의미
-속성 -
- border : 테두리(두께), 단위 정수(픽셀)
- 안쪽테두리는 조정이 안됨.
- table에 적용
- cellspacing : 칸과 칸 사이의 여백 (기본은 2px)
- table에 적용
- cellpadding : 칸 안쪽의 여백 (기본은 1px)
- table에 적용
- ★span : 칸을 늘린다. (늘리는건 css로 안됨.)
- 단위 정수
- colspan : 가로로 늘린다.
- rowspan : 세로로 늘린다.
- 병합이 아닌 늘리는거라 양옆과 아래 셀 상관없이 늘린다고 생각하면 된다.
그리고 셀들은 빈공간 찾아서 작성된다.
세로방향으로 높이 줄 때
height값은 먹고
padding값은 안먹고
line-height는 먹는다.
테이블태그는 css 적용 안되는 것이 꽤 있어서 테이블태그보다는 div태그를 더 선호한다.
계속 나아가기