지금까지 보통 테이블을 생성할 때에
<table border="0" cellpadding="0" cellspacing="0">
을 주어가며 코딩을 했었다. 그러나 이와 같이 디자인 적인 요소를 태그 안에 넣는 것은 지양하자.
대신 CSS 로 조정해줄 수 있다.
table {
border-collapse: collapse;
}
table th,
table td {
padding: 0;
}
cellspacing은 border-collapse 속성으로 제어한다.
cellpadding은 th나 td의 padding 속성으로 제어한다.
테이블을 사용하다보면 아무리 width 값을 잘 넣어줘도 레이아웃이 엉키는 경우가 많다.
기본적인 테이블이 아니라 둥그런 테두리를 넣는다거나,
colspan, rowspan 같은 옵션을 주어 현란한(?) 테이블 레이아웃을 하다보면
의도치 않게 어떤 필드가 커지는 경우가 많다.
이를 고정하기 위해 빈필드에 <img>태그를 넣어 gif 투명이미지로 조정해본 경우도 많다.
그러나 이 역시 한 번에 해결!
table {이것을 사용할 때의 주의할 점은 첫 행에 주어진 너비로 고정된다는 것이다.
table-layout: fixed;
}
이럴 땐 간단히 <colgroup> <col>로 해결해 주면 된다!
