Tuesday, June 13, 2006
HTML-CSS] 테이블 td 태그의 바탕색 한꺼번에 변경/ 테두리 색 지정 / 테두리 빈틈 없애기
모든 셀에 한꺼번에 바탕색 지정
원래는 <td> 태그마다, 즉 각 칸(셀)마다 스타일을 지정해 주어야 하더군요. 그러나 이러면 너무 번거로웠습니다.
또는
td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }
이렇게 하면 한꺼번에 셀의 스타일을 지정할 수 있긴 하지만, 이러면 그 페이지에 있는 모든 테이블의 셀이 획일적으로 지정되어 버리기에 문제가 있습니다. 특히 페이지에 광고가 있다면, 그 광고의 테이블 셀도 여기서 지정한 대로 변하기 때문에, 광고의 레이아웃이 이상하게 됩니다.
id 를 이용하면, 그 id에 해당되는 범위 내에서만, 셀의 배경색을 일괄적으로 지정할 수 있습니다.
우선 테이블 태그에 <table id="foo"> 이렇게 적당한 아이디(id)를 부여합니다. 단 아이디가 숫자로 시작하면 안되고, 한글이나 특수 기호가 포함되면 안되고, 중복되어서도 안됩니다. 한 HTML 페이지에 그 아이디는 단 하나뿐이어야 합니다. 즉 id="foo" 라는 아이디 정의가 다른 태그에도 있으면 안 됩니다. 무슨 아이디든 아이디는 고유해야 합니다.
#foo td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }
이 스타일 정의는, foo 라는 아이디를 가진 태그의 범위 내에 있는 모든 td 태그에 색을 지정하는 것입니다.
테이블 태그의 테두리 빈틈 없애기
<table> 태그에 style="border-collapse:collapse" 를 지정해 주면, td(셀)들 사이의 빈틈이 말끔히 없어집니다.
예제 코드:
<html>
<head>
<style type="text/css">
#foo td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }
</style>
</head>
<body>
<table id="foo" style="border-collapse:collapse">
<tr><td>1번째 행의 1번째 칸</td> <td>1번째 행의 2번째 칸</td></tr>
<tr><td>2번째 행의 1번째 칸</td> <td>2번째 행의 2번째 칸</td></tr>
<tr><td>3번째 행의 1번째 칸</td> <td>3번째 행의 2번째 칸</td></tr>
</table>
</body>
</html>
<head>
<style type="text/css">
#foo td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }
</style>
</head>
<body>
<table id="foo" style="border-collapse:collapse">
<tr><td>1번째 행의 1번째 칸</td> <td>1번째 행의 2번째 칸</td></tr>
<tr><td>2번째 행의 1번째 칸</td> <td>2번째 행의 2번째 칸</td></tr>
<tr><td>3번째 행의 1번째 칸</td> <td>3번째 행의 2번째 칸</td></tr>
</table>
</body>
</html>
위의 코드의 결과:
| 1번째 행의 1번째 칸 | 1번째 행의 2번째 칸 |
| 2번째 행의 1번째 칸 | 2번째 행의 2번째 칸 |
| 3번째 행의 1번째 칸 | 3번째 행의 2번째 칸 |
▶▶ HTML-CSS] DIV 태그/테이블(TABLE, TD)태그에, 점선 테두리 만들기
▶▶ HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home