반응형
table 모델
- display: table;
- table의 레이아웃
- 외부 레이아웃은 블록과 유사
- width 설정 가능
- 적용하지 않은 내용물(table-cell)들의 너비만큼 영역을 가진다(Auto)
- height 설정 가능
- 적용하지 않은 내용물(table-row)들의 높이만큼 영역을 가진다(Auto)
- padding 설정 가능
- table의 테두리와 table-cell들의 테두리 사이 공간이 넓어짐
- margin 설정 가능
- table의 외부여백
- tr
- tr 태그는 padding, margin 둘 다 적용해도 변화가 없다
- tr 태그는 width는 적용 안되고 Height는 적용된다.
- td, th
- td, th 태그는 padding 적용 가능, margin은 적용 안된다.
- td, th 태그는 width, height 둘 다 적용된다.
- table
- table-cell(td, th)에 각각 테두리가 존재한다.
- tr 에는 테두리가 없다.
- border-collapse 속성을 설정할 수 있다.
- border-collapse: separate;
- border-collapse: collapse;
반응형
'FrontEnd > HTML' 카테고리의 다른 글
[HTML] HTML 의 Position 속성 (0) | 2020.09.29 |
---|---|
[HTML] HTML 의 Inline - Block 모델 (0) | 2020.09.29 |
[HTML] HTML의 시맨틱 레이아웃, Semantic Layout (0) | 2020.09.29 |
[HTML] HTML inline 모델 (0) | 2020.09.29 |
[HTML] id, class 속성 정리 (0) | 2020.09.29 |