일반적인 HTML 태그인 TABLE 태그를 이용해서 표를 만들지만, 이렇게 만들경우 표의 모양이 그렇게 이쁘진 않다. 더군다나, 표에 테두리 색깔이나 음영같은 효과를 줄수가 없는데, 간단한 CSS를 추가하면 원하는 모양의 표를 만들수 있다.
우선, <table> 태그만을 가지고 표를 만들경우 아래와 같은 모습이 된다.
일반적인 table
위의 모양을 보면, 셀과 셀사이에 선이 굵어 그렇게 이쁘게 보이진 않는다. 이 테이블에 border-collapse:collapse속성을 추가하면, 테이블 셀간의 간격을 합쳐서 표시하기 때문에 모양이 좋아진다.
테이블 속성에 아래와 같은 CSS를 추가해보자. 선의 굵기가 1px인 검정색 셀 테두리가 합쳐서 표시가 되게 된다.
border-collapse:collapse
border: 1px solid #000000
background-color: #f4a460
CSS는 HTML 상단에 먼저 선언을 해주어서 사용을 하는 것이 가장 좋지만, 블로그처럼 하나하나 포스팅을 작성해야 하는 경우는 위와 같은 방법으로, HTML 태그에 직접 선언해서 사용하는 방법이 가장 사용 하기가 쉽다.
