100% 테이블에서 좌우처리 어떻게들 하시나요? > 자유게시판

자유게시판

출석체크 십년전오늘 포인트가위바위보 포인트야구게임

100% 테이블에서 좌우처리 어떻게들 하시나요? 정보

100% 테이블에서 좌우처리 어떻게들 하시나요?

본문

아~ 그림 수정하려다가 아래 소스가 깨졌네요 ㅡ,ㅡㅋ
다시 올립니다 ㅠㅠ




위 예제그림처럼 100%짜리 테이블에 가운데정렬로 내용을 넣을때 어떤 방식으로 처리하시나요?
양쪽의 이미지가 높이차이가 있어서 background를 통일시킬 수는 없고
이미지가 양쪽끝까지 이어지기 때문에 100%폭으로 제작해야합니다.

전 야매(?)인 방법으로

<TABLE cellSpacing=0 cellPadding=0 width="100%">  
  <TR>
    <TD background="왼쪽배경" width="40%"></TD>    
    <TD width="20%">      
       <TABLE><TR><TD>내용 또는 이미지</TD></TR></TABLE>
    </TD>    
    <TD background="오른쪽배경" width="100%"></TD>
  </TR>
</TABLE>

요런식으로 내용이 들어갈 가운데부분의 퍼센테이지를 줄여놓고
그 안에 테이블을 넣어 저절로 늘어나게 만들어버리거든요.
이렇게 하면 ie,크롬,파폭에서는 무리없이 출력되긴 하더라구요.

근데 왠지 이게 정상적인 방법이 아닐듯 싶어서요..
회원님들은 이런 100%테이블을 어떻게 만드시나요?
추천
0
  • 복사

댓글 19개

라엘 자기소개 아이디로 검색 회원게시물
(210.♡.♡.242)
10.11.19 10:55:59
야매1.
<center>
<table width="500">
...
</table>
</center>

야매2.
<table width="500" align="center">
...
</table>

야매3.
<table width="100%" height="100%"><tr><td align="center" valign="top">
      <table width="500">
      ...
      </table>
</td></tr></table>


야매 1은 <center> 가 폐기된 태그라고 하는데  잘 작동하고요
야매 2는 table 에서는 align="center" 속성이 없습니다만 잘 작동하고요 (doctype 넣으면 안될걸요)
야매 3은 table 에서는 height 속성이 없습니다만 잘 됩니다.
다이어리펜션 홈페이지 자기소개 아이디로 검색 회원게시물
(118.♡.♡.21)
10.11.19 11:02:57
500짜리 테이블 좌우에 배경이미지가 있고
그 이미지가 500짜리 테이블과 싱크되어야합니다.
라엘님 방법으로는 그냥 500짜리 테이블이 가운데정렬만 하게되지 않나요?
ganji 홈페이지 자기소개 아이디로 검색 회원게시물
(116.♡.♡.77)
10.11.19 11:12:26
요런것도

<style type="text/css" media="all">
body {width:100%; height:100%; padding:0; margin:0;}
.gTb {width:100%; table-layout:fixed;}
.gTb_L{background-color:#eee;}
.gTb_C{background-color:#fff; font-size:12px; vertical-align:top; padding:10px;}
.gTb_R{background-color:#ccc;}
</style>


<table class="gTb" cellSpacing="0" cellpadding="0" border="0">
<colgroup><col /><col width="980px" /><col /></colgroup>
<tbody>
<tr>
<td class="gTb_L">&nbsp;</td>
<td class="gTb_C">
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
</td>
<td class="gTb_R">&nbsp;</td>
</tr>
</tbody>
</table>


참고로 올리신 이미지를 토대로 한다면
좌, 우 td에 들어갈 배경 이미지는 가로 1px 로 해서 repeat-x 하고
중간 배경은 width를 잡아서(예제 : 980px) 내용이나 이미지,, 부분의 배경으로 깔아줍니다
ganji 홈페이지 자기소개 아이디로 검색 회원게시물
(116.♡.♡.77)
10.11.19 11:22:27
아래 리즈컴님의 예제 이미지를 참고 ^^ 한다면 이렇게

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title> 문서 </title>

<style type="text/css" media="all">
body {width:100%; height:100%; padding:0; margin:0;}
.gTb {width:100%; table-layout:fixed;}
.gTb_L{background:url('http://shapys.hosting.paran.com/page/bg_left.gif') repeat-x;}
.gTb_C{background:url('http://shapys.hosting.paran.com/page/gnb.gif') no-repeat; font-size:12px; vertical-align:top; padding:280px 0 0 0;}
.gTb_R{background:url('http://shapys.hosting.paran.com/page/bg_right.gif') repeat-x;}
</style>

</head>

<body>

<table class="gTb" cellSpacing="0" cellpadding="0" border="0">
<colgroup><col /><col width="980px" /><col /></colgroup>
<tbody>
<tr>
<td class="gTb_L">&nbsp;</td>
<td class="gTb_C">
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
<p>늘어나버려~</p>
</td>
<td class="gTb_R">&nbsp;</td>
</tr>
</tbody>
</table>

</body>
</html>
다이어리펜션 홈페이지 자기소개 아이디로 검색 회원게시물
(118.♡.♡.21)
10.11.19 11:26:25
colgroup은 물론 css부분도 아직 미숙해서 이런 방법을 생각을 못했네요.
이미지까지 들어간 예제 감사드립니다 ^^
다이어리펜션 홈페이지 자기소개 아이디로 검색 회원게시물
(118.♡.♡.21)
10.11.19 11:21:10
아~ 저와 비슷하게 잡으셨네요.
어차피 가운데 td 부분이 늘어나는 것을 염두하시고
아예 좌우를 50%으로 주시는군요..
40,20,40 이것보다는 50,0,50이 조금더 와닿네요..
DreamT 자기소개 아이디로 검색 회원게시물
(118.♡.♡.208)
10.11.19 15:03:33
근데 지금 굳이 테이블레이아웃으로 하시느라 편법이다 뭐다 고민이신거같은데요
doctype 지정해주시고 div로 코딩하면... 참 간단하고 쉬운데..

50%짜리 div를  position: absolute 속성으로 백그라운드 각각 지정해서 left와 right로 띄워주고.
doctype 지정됐으니 위의 행님께서 말씀하신 margin:0 auto; 이게 먹히거든요.
그거 사용한 div 하나 띄워주시면... 가운데정렬되니까...

 css 공부하시려면 일단 table 부터 버려보세요 ^^
몇번 레이아웃 실습하시다보면 거의 완전히 이해하게될겁니다. 저도 그랬거든요 ㅋ
다이어리펜션 홈페이지 자기소개 아이디로 검색 회원게시물
(118.♡.♡.21)
10.11.19 15:16:26
안그래도 css3을 접하면서 이제는 css없이 안되겠구나 싶습니다.
사람의 습관이라는게 무서워서 div 입히고 그 안에 테이블을 다시 짜넣는...
경매에 css관련책 올라오기를 기다려야겠습니다 흐흐
우유맨 자기소개 아이디로 검색 회원게시물
(58.♡.♡.60)
10.11.25 15:12:57
테이블보다는 div웹표준으로 가는 추세지만..
저같은 경우에 테이블을 좋아해서..ㅠㅠ;;;;


저런경우에는요
table의 전체너비를 100%로 두고.
본문(가운데부분의 사이즈가 900 이라고 가정할때)
각각 셀의 너비를

왼쪽 l 가운데 l 오른쪽
50% l  900    l  50%

로 주는데요.
그러면 가운데 정렬도 되고..왼쪽50% 오른쪽50% 너비 먹습니다.
단.. 이렇게 할경우 가운데 900이 무시되고 왼쪽과 오른쪽이 각각50%씩 먹어버리게 되는데..
그렇기 때문에 가운데 부분에 BLANK.gif 이미지(투명한1px짜리..)를 두고
이미지의 너비를 강제로 900 * 1 로 지정해서 넣어버리면
왼쪽 오른쪽 %에 상관없이 가운데 부분은 강제로 900사이즈가 지정됩니다.


매우 무식한 야매죠.......
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로