위와 같은 아주 간단한 테이블 레이아웃을 짰고 내가 배워간 것을 정리해보려고 한다.
table-layout: fixed
는 성능상 중요하다.
이유는 나도 잘 모르겠다. 강사가 그렇다니 그런가보다 하고 받아들이는데 추측컨데 브라우저 렌더링 과정에서 컨텐츠를 넣기 전에 table-layout: fixed
로 되어있으면 컨텐츠에 상관없이 레이아웃을 정하는데 빠르게 결정 할 수 있기때문이 아닐까? 라고 생각한다.
colgroup
을 이용해서 width
를 조정하자
1번에서 table-layout: fixed
일 경우 colgroup
에 클래스를 지정하거나 직접 style
을 줘서 width
를 지정 할 수 있다.
2번과 같이 할 경우
colgroup
을 통해 스타일을 지정 할 경우 width
, background
, border
만 스타일을 지정 할 수 있다.
이 외에도 테이블 레이아웃의 border
우선순위들을 배웠는데 아직은 디테일한것에 집중 할 단계는 아닌것 같다.