css로 table 속성 지정 2(cellpadding, cellspacing 을 css로)

 

 

css로 table 속성 지정 2(cellpadding, cellspacing 을 css로)

 

 

어제는 css로 table 너비, 높이, 글자색, 배경색, 선그리는 방법을 알아 보았습니다.

 

css로 table 속성 지정(너비,높이,글자색,배경색,선그리기)

 

 

오늘은 셀 여백(cellpadding과 셀 간격(cellspacing)을 css로 지정하는 방법입니다.

 

 

▶css로 셀 여백 지정하기

 

셀 여백은, 내용과 border 사이의 공간을 말합니다.

 

html에서는 table에 cellpadding을 지정하면 td와 th셀에 여백이 생겼습니다.

 

<table border="1px" cellpadding="20px"><tr><th>월요일</th><th>화요일</th><th>수요일</th></tr> <tr><td>음악</td><td>미술</td><td>체육</td></tr></table>

 

 

                   

  (1) cellpadding 적용하지 않은 table                   (2)cellpadding="20px" 지정

 

 

 

css에서는 셀 여백을 지정할 때 padding 속성을 사용합니다.

 

 th, td 에 직접 지정합니다. table에 지정하면 table 외곽선과 셀 사이의 여백이 생깁니다.

 

<style>   table{ border:1px solid black; } th,td{ border:1px solid black; padding: 20px;}    </style>

 

 

  

(1) th,td 에 padding:20px를 적용했을 때                       (2) table에 padding:20px를 적용했을 때

 

 

 

▶css로 셀 간격 지정하기

 

 셀 간격은 border와 border 사이의 공간임

 

html에서는 이런 식으로 했지요 

 

<table border="1px" cellspacing="20px"><tr><th>월요일</th><th>화요일</th><th>수요일</th></tr> <tr><td>음악</td><td>미술</td><td>체육</td></tr></table>

 

 

css에서 셀 간격을 지정할 때는 border-spacing 속성을 사용합니다.

 

broder-spacing은 가로 세로 두 가지를 지정합니다.(예: border-spacing: 20px 20px)

 

속성값이 하나만 있으면 그 수가 가로 세로값에 적용됩니다.

 

브라우저 지원 정보:   Chrome1.0+,  FF1.0(1.7 or earlier)+, IE8+, Opera 4.0+, Safari 1.0(85)+

IE8는 DOCTYPE 선언할 때만 적용 됨.

 

 

 

<style>    table,th,td {border:1px solid black; border-spacing: 20px 20px;}   </style>

 

실행화면입니다.

 

 

그런데 기본 테이블은 아래와 같이 선이 두 개인 형태인데요, 선을 하나로 하고 싶을 때가 있습니다.

 

 

이때 broder-spacing: 0px 0px;을 쓰면 됩니다.

 

 

 

그런데 선이 굵게 표시가 되네요.

 

두 선을 합치려면 원래 border-collapse 속성을 사용합니다.

 

 

▶border-collapse 속성으로 선 합치기

 

border-collapse 속성값은 두 가지가 있습니다.

separate는 기본값으로 분리해서 선을 표시하고

collapse는 선 하나로 합침

 

브라우저 지원 정보: IE5+, Chrome1.0+, FF1.0+, Opera 4.0+, Safari 1.2+

 

<style>    table,th,td {border:1px solid black; border-collapse: collapse;}   </style>

 

 

 

 

오늘은 cellpadding, cellspacing을 css로 적용하는 방법을 알아 보았어요.

 

다음 시간엔 table을 css로 정렬하는 방법을 알아 볼게요~ 

 

 

 

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)

 

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)