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%테이블을 어떻게 만드시나요?
다시 올립니다 ㅠㅠ
위 예제그림처럼 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
0
댓글 19개
전 전체를 잡는 테이블 안에 align="center" valign="middle" 로..;;
이렇게 잡으시면 그냥 테이블 자체가 좌우상하 가운데정렬이 되지 않나요?
야매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 속성이 없습니다만 잘 됩니다.
<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 속성이 없습니다만 잘 됩니다.
500짜리 테이블 좌우에 배경이미지가 있고
그 이미지가 500짜리 테이블과 싱크되어야합니다.
라엘님 방법으로는 그냥 500짜리 테이블이 가운데정렬만 하게되지 않나요?
그 이미지가 500짜리 테이블과 싱크되어야합니다.
라엘님 방법으로는 그냥 500짜리 테이블이 가운데정렬만 하게되지 않나요?
요런것도
<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"> </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"> </td>
</tr>
</tbody>
</table>
참고로 올리신 이미지를 토대로 한다면
좌, 우 td에 들어갈 배경 이미지는 가로 1px 로 해서 repeat-x 하고
중간 배경은 width를 잡아서(예제 : 980px) 내용이나 이미지,, 부분의 배경으로 깔아줍니다
<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"> </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"> </td>
</tr>
</tbody>
</table>
참고로 올리신 이미지를 토대로 한다면
좌, 우 td에 들어갈 배경 이미지는 가로 1px 로 해서 repeat-x 하고
중간 배경은 width를 잡아서(예제 : 980px) 내용이나 이미지,, 부분의 배경으로 깔아줍니다
오~ 이런 방법도 있군요..
colgroup으로 묶는거네요.. 신기합니다 ㅎㅎ
colgroup으로 묶는거네요.. 신기합니다 ㅎㅎ
아래 리즈컴님의 예제 이미지를 참고 ^^ 한다면 이렇게
<!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"> </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"> </td>
</tr>
</tbody>
</table>
</body>
</html>
<!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"> </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"> </td>
</tr>
</tbody>
</table>
</body>
</html>
colgroup은 물론 css부분도 아직 미숙해서 이런 방법을 생각을 못했네요.
이미지까지 들어간 예제 감사드립니다 ^^
이미지까지 들어간 예제 감사드립니다 ^^
편법이지만 IE, FF, 크롬, 오페라, 사파리 에서 잘보이네요
http://shapys.hosting.paran.com/page/test01.php
http://shapys.hosting.paran.com/page/test01.php
아~ 저와 비슷하게 잡으셨네요.
어차피 가운데 td 부분이 늘어나는 것을 염두하시고
아예 좌우를 50%으로 주시는군요..
40,20,40 이것보다는 50,0,50이 조금더 와닿네요..
어차피 가운데 td 부분이 늘어나는 것을 염두하시고
아예 좌우를 50%으로 주시는군요..
40,20,40 이것보다는 50,0,50이 조금더 와닿네요..
예제 이미지(슬라이스 하신거) 참고 좀 했습니다 ^^;;
아~ 표준은 이런거군요..
역시 표준은 어렵습니다 ㅠㅠ
역시 표준은 어렵습니다 ㅠㅠ
아싸~ 이미지 잘팔린다 ㅎㅎ
ㅎㅎ 리즈컴님 이미지 덕분에 제가 공부 제대로 잘하고 있습니다 (__)
제가 css를 잘 못다룹니다..
라엘님의 css를 보면서 그래서 공부좀 하고 있습니다 ^^
라엘님의 css를 보면서 그래서 공부좀 하고 있습니다 ^^
근데 지금 굳이 테이블레이아웃으로 하시느라 편법이다 뭐다 고민이신거같은데요
doctype 지정해주시고 div로 코딩하면... 참 간단하고 쉬운데..
50%짜리 div를 position: absolute 속성으로 백그라운드 각각 지정해서 left와 right로 띄워주고.
doctype 지정됐으니 위의 행님께서 말씀하신 margin:0 auto; 이게 먹히거든요.
그거 사용한 div 하나 띄워주시면... 가운데정렬되니까...
css 공부하시려면 일단 table 부터 버려보세요 ^^
몇번 레이아웃 실습하시다보면 거의 완전히 이해하게될겁니다. 저도 그랬거든요 ㅋ
doctype 지정해주시고 div로 코딩하면... 참 간단하고 쉬운데..
50%짜리 div를 position: absolute 속성으로 백그라운드 각각 지정해서 left와 right로 띄워주고.
doctype 지정됐으니 위의 행님께서 말씀하신 margin:0 auto; 이게 먹히거든요.
그거 사용한 div 하나 띄워주시면... 가운데정렬되니까...
css 공부하시려면 일단 table 부터 버려보세요 ^^
몇번 레이아웃 실습하시다보면 거의 완전히 이해하게될겁니다. 저도 그랬거든요 ㅋ
안그래도 css3을 접하면서 이제는 css없이 안되겠구나 싶습니다.
사람의 습관이라는게 무서워서 div 입히고 그 안에 테이블을 다시 짜넣는...
경매에 css관련책 올라오기를 기다려야겠습니다 흐흐
사람의 습관이라는게 무서워서 div 입히고 그 안에 테이블을 다시 짜넣는...
경매에 css관련책 올라오기를 기다려야겠습니다 흐흐
테이블보다는 div웹표준으로 가는 추세지만..
저같은 경우에 테이블을 좋아해서..ㅠㅠ;;;;
저런경우에는요
table의 전체너비를 100%로 두고.
본문(가운데부분의 사이즈가 900 이라고 가정할때)
각각 셀의 너비를
왼쪽 l 가운데 l 오른쪽
50% l 900 l 50%
로 주는데요.
그러면 가운데 정렬도 되고..왼쪽50% 오른쪽50% 너비 먹습니다.
단.. 이렇게 할경우 가운데 900이 무시되고 왼쪽과 오른쪽이 각각50%씩 먹어버리게 되는데..
그렇기 때문에 가운데 부분에 BLANK.gif 이미지(투명한1px짜리..)를 두고
이미지의 너비를 강제로 900 * 1 로 지정해서 넣어버리면
왼쪽 오른쪽 %에 상관없이 가운데 부분은 강제로 900사이즈가 지정됩니다.
매우 무식한 야매죠.......
저같은 경우에 테이블을 좋아해서..ㅠㅠ;;;;
저런경우에는요
table의 전체너비를 100%로 두고.
본문(가운데부분의 사이즈가 900 이라고 가정할때)
각각 셀의 너비를
왼쪽 l 가운데 l 오른쪽
50% l 900 l 50%
로 주는데요.
그러면 가운데 정렬도 되고..왼쪽50% 오른쪽50% 너비 먹습니다.
단.. 이렇게 할경우 가운데 900이 무시되고 왼쪽과 오른쪽이 각각50%씩 먹어버리게 되는데..
그렇기 때문에 가운데 부분에 BLANK.gif 이미지(투명한1px짜리..)를 두고
이미지의 너비를 강제로 900 * 1 로 지정해서 넣어버리면
왼쪽 오른쪽 %에 상관없이 가운데 부분은 강제로 900사이즈가 지정됩니다.
매우 무식한 야매죠.......
