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 설정 방법)

 

지구별에
css 2014. 6. 26. 10:32

댓글을 달아 주세요

  1. 2014.07.29 18:14  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 지구별에 2014.07.29 21:14 신고  수정/삭제

      읽어주셔서 감사합니다 근데 블로그에 담아가다니 무슨뜻인지요ㅠ 블로그공지글 중 저작권 관련글 참조해주세요~

  2. beatsuni 2014.07.30 14:39  수정/삭제  댓글쓰기

    감사합니다
    잘 읽고 갑니다

  3. 류중근 2015.04.15 03:40 신고  수정/삭제  댓글쓰기

    테이블 태그에서 'cellpadding'과 'cellspacing' 자꾸만 헷갈립니다.
    그런 태그 쓸 일이 그다지 빈번하지 못해서 그런 탓도 있겠지만, 근본적으론 저의 실력 탓이 바탕이겠지요.
    어쨌든지 그대 강의 덕에 오늘 크게 배워가네요.

    또 이것 내용 너무도 그 뜻이 감명 깊기에 그림으로라도 떠서 제 컴퓨터에 넣어두고 싶습니다.
    괜찮겠지요?

    하여간 고맙습니다.

    • 지구별에 2015.04.15 15:23 신고  수정/삭제

      도움 되셨다니 기분 좋네요~ 인터넷에 공개로 올리시지만 않으면 자유롭게 이용 가능하세요^^

  4. 하이데어 2021.02.19 02:03  수정/삭제  댓글쓰기

    ㅜㅜ너무 친절하고 자세하게 설명해주셔서 도움 많이 받고갑니다 !!!!!!!!!!!!!!!!!!!!! 감사합니다 :)

Powerd by Tistory, designed by criuce