테이블에서 tr 사이에 여백이 생깁니다... 정보
테이블에서 tr 사이에 여백이 생깁니다...본문
이 여백은 왜 생기는 걸까요?
웹에디터를 사용하지 않고 프레임을 만들다 보니... 가끔 어렵습니다.
간단한 테이블 구조는 이렇습니다.
<table><tr>
<td></td> <td></td> <td rowspan=2></td>
<td colspan=2></td>
</tr></table>
...
...
아래는 소스입니다...
<TABLE border=0 cellSpacing=0 cellPadding=0 width=755>
<TR>
<TD vAlign=top width=302 align=left>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD vAlign=top>
<TABLE border=0 cellSpacing=0 cellPadding=0 width=296>
<TBODY>
<TR>
<TD><A href="http://wooshin4.or.kr/g4/bbs/board.php?bo_table=photo"><IMG
src="http://wooshin4.or.kr/g_img/m_21_title.jpg" border=0></A></TD></TR>
<TR>
<TD><A href="http://wooshin4.or.kr/g4/bbs/board.php?bo_table=photo&wr_id=2173"><IMG
class=pscroll
src="http://wooshin4.or.kr/g4/data/file/photo/thumb/120x90_70/data_photo_2009_11_28_수락산에서_191.jpg"
width=88 height=68 border=0></A><A
href="http://wooshin4.or.kr/g4/bbs/board.php?bo_table=photo&wr_id=2172"><IMG class=pscroll
src="http://wooshin4.or.kr/g4/data/file/photo/thumb/120x90_70/data_photo_2009_11_28_수락산에서_186.jpg"
width=88 height=68 border=0></A><A
href="http://wooshin4.or.kr/g4/bbs/board.php?bo_table=photo&wr_id=2171"><IMG class=pscroll
src="http://wooshin4.or.kr/g4/data/file/photo/thumb/120x90_70/data_photo_2009_11_28_수락산에서_141.jpg"
width=88 height=68 border=0></A></TD></TR></TBODY></TABLE>
</TD></TR>
<TR><TD height=4></TD></TR>
<TR>
<TD width=296><IMG title="국민은행 037-21-1193-706	강요찬" border=0
src="http://wooshin4.or.kr/g_img/bank1s.gif" width=150 height=49><IMG title="농협 042-02-004097 강요찬"
border=0 src="http://wooshin4.or.kr/g_img/bank2s.gif" width=146 height=49><IMG
title="외환은행 144-18-32460-1 강요찬" border=0 src="http://wooshin4.or.kr/g_img/bank3s.gif" width=150
height=45><IMG title="우리은행 551-200778-02-001 강요찬" border=0
src="http://wooshin4.or.kr/g_img/bank4s.gif" width=146 height=45> </TD>
</TR></TBODY></TABLE>
</TD>
<TD vAlign=top width=301 align=right><IMG border=0 src="g_img/m_22_title.jpg"
width=296 height=31>
<DIV style="MARGIN-TOP: 3px; WIDTH: 296px; HEIGHT: 176px; OVERFLOW: auto">
<TABLE style="LINE-HEIGHT: 16px" border=0 cellSpacing=0 cellPadding=1 width=278>
<TBODY>
<TR style="CURSOR: hand" onmouseover='this.style.backgroundColor="#D6DEEF"'
onmouseout='this.style.backgroundColor="#F7FBFF"'
onclick="location.href="javascript:win_memo('./g4/bbs/memo.php?kind=write&me_recv_mb_id=ghksghd')"">
<TD align=middle>생일축하해 </TD>
<TD><FONT color=#22618a>07-10</FONT></TD>
<TD>황진하 (06 반)</TD></TR>
</TBODY></TABLE></DIV></TD>
<TD vAlign=top rowSpan=2 width=152 align=right><IMG src="g_img/m_23.jpg"></TD></TR>
<TR>
<TD vAlign=top width=603 colSpan=2><A href="http://wooshin4.or.kr/g4/bbs/new.php"><IMG
src="http://wooshin4.or.kr/g_img/latest60_title.jpg" width=290 height=31 border=0></A>
</TD></TR></TABLE>
댓글 전체
제 모니터에서는 첨부된 사진처럼 여백이 넓지 않구요.. 17px 정도의 여백으로 보입니다.
이경우 생일축하 게시판 최신글 높이인 '176px'보다 왼쪽 테이블 높이가 낮기때문에 생기는
여백입니다.
코딩 프로그램에 따라 </td>앞 여백이나 엔터때문에 여백이 생기기도 합니다.
다시한번 오른쪽 최신글의 높이조절을 해 보시면 좋겠습니다.
이경우 생일축하 게시판 최신글 높이인 '176px'보다 왼쪽 테이블 높이가 낮기때문에 생기는
여백입니다.
코딩 프로그램에 따라 </td>앞 여백이나 엔터때문에 여백이 생기기도 합니다.
다시한번 오른쪽 최신글의 높이조절을 해 보시면 좋겠습니다.
크롬으로 해당 페이지 여신 후에
공백에서 마우스 오른쪽 버튼 누르시고
"요소 검사"
선택해서 어떤 태그, css인지 살펴 보세요.
공백에서 마우스 오른쪽 버튼 누르시고
"요소 검사"
선택해서 어떤 태그, css인지 살펴 보세요.
먼저 답변 감사드립니다.
하지만 그 문제는 아닌 듯 보여집니다.
생일축하 게시판 최신글 높이인 '176px'
- 실제 왼쪽 사진앨범 높이를 재 보시면 아시겠지만, 왼쪽 아랫부분과 대충 맞아 떨어집니다.
소스 중 일부분만 추출해서 실행할 경우엔 윗 이미지처럼 여백이 더 많구요,
실제 소스 상에서는 약 30px 정도 여백이 남는 것 같습니다.
하지만 그 문제는 아닌 듯 보여집니다.
생일축하 게시판 최신글 높이인 '176px'
- 실제 왼쪽 사진앨범 높이를 재 보시면 아시겠지만, 왼쪽 아랫부분과 대충 맞아 떨어집니다.
소스 중 일부분만 추출해서 실행할 경우엔 윗 이미지처럼 여백이 더 많구요,
실제 소스 상에서는 약 30px 정도 여백이 남는 것 같습니다.
우리은행 이미지와 TD종료태그간에 공백도 문제가 되보이는군요.
176px보다 왼쪽 부분이 작은건 확실하네요.
176px보다 왼쪽 부분이 작은건 확실하네요.
답변 주신 모든 분들 정말 감사드립니다.
엉뚱한 데 문제가 있었던 듯 싶습니다.
테스트 페이지이다 보니 오른쪽 광고 주르륵 달려있는 것을 전체 다 이미지 하나로 붙여 놓았었는데,
오늘 그 부분을 이미지 대신 이미지 하나 하나 붙이는 소스로 대체하고나니 문제가 되던 여유공간이 사라져 버렸습니다.
왜 그런 지는 모르겠습니다. html 어렵군요...
감사합니다...
엉뚱한 데 문제가 있었던 듯 싶습니다.
테스트 페이지이다 보니 오른쪽 광고 주르륵 달려있는 것을 전체 다 이미지 하나로 붙여 놓았었는데,
오늘 그 부분을 이미지 대신 이미지 하나 하나 붙이는 소스로 대체하고나니 문제가 되던 여유공간이 사라져 버렸습니다.
왜 그런 지는 모르겠습니다. html 어렵군요...
감사합니다...
