본문 바로가기
css

table 이미지 공백 없애기

by 지구별에 2014. 6. 24.

 

 

table 이미지 공백 없애기

 

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

 

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

 

[html/css] 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), 배경색은 빨간색으로 했습니다.

 

나머지는 이미지

 

table img space.htm

 

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

<body>

<table><tr><td><img src="cat.png"></td></tr></table>


</body>
</html>


 

 

 

STEP 2. margin과 padding 여백 없애기

 

<style>
table,td{
background: red;
border: 3px solid green;

margin:0px;

padding:0px;
}
</style>

 

 

 

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



 

<style>
table,td{
background: red;
border: 3px solid green; 

margin:0px;

padding:0px;

border-collapse: collapse;
}
</style>

 

 

STEP 4. 이미지 공백 없애기

 

<style>
table,td{
background: red;
border: 3px solid green; 

margin:0px;

padding:0px;

border-collapse: collapse;}

 

img{display: block;}

</style>

 

 

 

 

 

 

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

 

border: 3px solid green;을 지웠음

 

<style>
table,td{
background: red;

margin:0px;

padding:0px;

border-collapse: collapse;}

 

img{display: block;}  

</style>

 

 

 

 

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

 

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

 

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

 

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

 

display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이)

 

반응형

댓글