html로 테이블을 짜서 화면을 만들었는대요.
본문
아래 코드를 사용하여 테이블을 짜보았는대요. pc에선 여백없이 잘보이는데요.
모바일로 접속하면!
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="/newmain/main_01.jpg" /></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="/newmain/main_02.jpg" /></td>
<td><img src="/newmain/main_03.jpg" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="/newmain/main_04.jpg" /></td>
<td><img src="/newmain/main_05.jpg" /></td>
</tr>
<tr>
<td><img src="/newmain/main_06.jpg" /></td>
<td><img src="/newmain/main_07.jpg" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="/newmain/main_08.jpg" width="275" /></td>
<td><img src="/newmain/main_09.jpg" width="265" /></td>
<td><img src="/newmain/main_10.jpg" width="261" /></td>
<td><img src="/newmain/main_11.jpg" width="279" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="/newmain/main_12.jpg" /></td>
<td><img src="/newmain/main_13.jpg" /></td>
</tr>
<tr>
<td><img src="/newmain/main_14.jpg" /></td>
<td><img src="/newmain/main_15.jpg" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="/newmain/main_16.jpg" /></td>
<td><img src="/newmain/main_17.jpg" /></td>
<td><img src="/newmain/main_18.jpg" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
모바일로 접속하면 이렇게 상하 여백이 줄바뀐듯이 나오는대 어떻해야할가요? ㅜㅜ
답변 5
모바일에서 보여지는 브라우저가 다르기 때문에 html5 표준코딩을 해주셔야 합니다.
일반 테이블로 코딩되어지면 사이트가 틀어지는 현상이 생깁니다.
표준코딩 html5로 하시길 권장합니다.
table 관련 css를 확인해보셔야 할거같습니다.
td의 margin 또는 padding 값이 있는지.
0으로 지정도 해보세여
<table> 태그에
<table cellpadding="0" cellspacing="0"> 으로 변경해보세여~
<style>
table {border-spacing:0}
</style>
<style>
#hz * {margin:0; padding:0; border:none; }
</style>
<table id="hz">
답변을 작성하시기 전에 로그인 해주세요.
