table 이미지 공백 없애기

table 이미지 공백 없애기

지난 글 div 이미지 공백 없애기에 이어지는 글입니다.

이미지 공백이 생기는 이유와, 공백 없애는 방법은 아래 링크 참조해주시고요~

테이블 공백 역시 div 안의 이미지 공백 없애기와 다르지 않습니다.

단, table에서 유의해야 할 점은 셀과 셀 사이의 공백입니다.

html에서 테이블 셀 사이의 공백을 없애려면 cellspacing:0px;을 이용했습니다.

하지만 cellspacing은 html5에서 지원하지 않으므로 css로 공백을 제거해야 합니다

css에서 테이블 셀 간격 없애기

border-collapse: collapse;로 설정

브라우저 지원 정보: Chrome1.0+, IE5+, FF1.0(1.7 or earlier)+, Opera 4.0+, Safari 1.2(125)+

그럼 예문을 통해 table 이미지 공백 없애는 법과 셀 간격 없애는 법 알아 볼게요

STEP 1. table에 이미지 넣기.

이해를 돕기 위해 외곽선은 초록색(3px), 배경색은 빨간색으로 했습니다.

나머지는 이미지

<!DOCTYPE html>
<html>
<style>
table,td{
background: red;
border: 3px solid green;
}
</style>

<body>

</body>
</html>

STEP 2. margin과 padding 여백 없애기

margin:0px;

padding:0px;
}
</style>

STEP 3. 테이블 셀 간격 없애기

margin:0px;

padding:0px;

border-collapse: collapse;
}
</style>

STEP 4. 이미지 공백 없애기

margin:0px;

padding:0px;

border-collapse: collapse;}

img{display: block;}

</style>

STEP 5. 선이 필요하지 않을 경우 border 없애기

border: 3px solid green;을 지웠음

margin:0px;

padding:0px;

border-collapse: collapse;}

img{display: block;}

</style>

「참고해서 읽으면 좋아요」

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

css로 table 속성 지정 2(cellpadding, cellspacing 을 css로) (7)	2014.06.26
css로 table 속성 지정(너비,높이,글자색,배경색,선그리기) (1)	2014.06.25
[html/css] div 이미지 공백 없애기 (8)	2014.06.24
word-break 줄바꿈 속성(break-all, keep-all) (0)	2014.06.19
word-wrap 줄바꿈 속성(normal, break-word) (1)	2014.06.18