컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
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>





위의 코드의 결과:

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

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top