* 이전 글 보기 - 블로그에 유용한 태그 4 - table 태그로 간단한 표 만들기 - 블로그에 유용한 태그 5 - table 태그에 스타일 적용하기 이 글은 표 만들기에 관한 이전 글을 읽었다는 전제하에 작성되었습니다. 본문에 나오는 CSS 각 항목에 대한 설명은 이전 글을 참고하세요. 이전 글에서 table 태그로 표를 만드는 법, table 태그 속성 대신 CSS로 표 속성을 지정하는 방법에 대해 알아보았다. 이번엔 스타일을 적용해서 표 내용을 더 보기 쉽게 꾸며보자. 한눈에 알아보기 쉽고 외관상으로도 예쁜 표를 꾸미려면 CSS를 어떻게 작성해야 좋을까? 가장 간단한 방법은 배경색을 사용하는 것이다. 예를 들어 표의 홀수 행(tr class="odd")과 짝수 행을 다른 색으로 지정하면 색 차이 ..

* 이전 글 보기 - 블로그에 유용한 태그 4 - table 태그로 간단한 표 만들기 table 태그는 다양한 속성을 제공하지만, 속성으로 해결할 수 없는 것들이 있다. 또 font 태그와 CSS의 font 속성 비교에서 확인한 것처럼 같은 스타일을 일괄 적용하려면 CSS를 사용하는 편이 경제적이다. table 태그와 스타일을 함께 사용하는 것에 대해 살펴보자. 1. 표 전체 테두리와 각 셀 테두리 합치기 (border-collapse:collapse) 개인적으로 table에 적용하는 스타일 중 가장 자주 사용하는 속성이 border-collapse다. 블로그에 유용한 태그 4 - table 태그로 간단한 표 만들기의 예제를 살펴보면 표 전체의 외곽선과 각 셀(작은 칸)의 외곽선이 따로 표시되는 것을 확..

글을 작성하다 보면 간단한 표를 만들어야 할 때가 있다. 간단하게 div 태그를 사용해서 글 상자를 만들고 내용을 주욱 나열하듯 입력해도 되지만, 그것보다는 세부 셀이 나뉜 표를 만드는 편이 한눈에 알아보기 쉽다. table 태그를 사용하면 간단한 표는 어렵지 않게 만들 수 있다. table 태그의 기본 구조는 아래와 같다. 표 제목 첫째 줄 첫째 칸 첫째 줄 둘째 칸 둘째 줄 첫째 칸 둘째 줄 둘째 칸 은 표를 만드는 것이다. 과 사이의 내용이 표를 구성하는 내용이다. caption, thead, tbody, tfoot은 간단히 이야기하면 표 제목, 머리글, 본문, 꼬리글이다. 그러나 보통의 표에선 caption, thead, tbody, tfoot을 생략하고 단순히 tr, th, td 요소만 사용할 ..