묻고답하기
테이블 가운데 정렬
2009.10.06 13:03
안녕하세요.
홈페이지를 만드는 도중...
이것저것 웹 상에서 소스를 퍼서 사용하고 있었습니다.
최근게시물과 최근 이미지를 넣기 위하여 DIV 안에 테이블을 만들어서 사용하고 있었는데요...
테이블크기가 너무 커서...조금 줄일려고 하니까
가운데 정렬이 안되고 왼쪽 정렬이 되어 버리네요..
소스입니다. 보시구 판단해 주셨으면 합니다...
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::Mabilis Home Stay::</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-family: 맑은 고딕;
background-repeat : repeat-x;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
#container {width:1004px; margin: 0 auto}
#header {width:1004px; height:300px;}
#content {width:1000px; float:right;}
#sidebar {
text-align:left;
width:230px;
float:left;
width: 169px;
background: #EBEBEB;
padding: 0px 5px 15px 20px;
}
#footer {width:1004px; height:50px; clear:both; background:#DDDDDD}
p {
font-family:맑은 고딕;
}
A:link {text-decoration:none; color:#024d82}
A:visited {text-decoration:none; color:#024d82}
A:hover {text-decoration:none; color:#148de3}
-->
</style>
<script>
function roundTable(objID) {
var obj = document.getElementById(objID);
var Parent, objTmp, Table, TBody, TR, TD;
var bdcolor, bgcolor, Space;
var trIDX, tdIDX, MAX;
var styleWidth, styleHeight;
// get parent node
Parent = obj.parentNode;
objTmp = document.createElement('SPAN');
Parent.insertBefore(objTmp, obj);
Parent.removeChild(obj);
// get attribute
bdcolor = obj.getAttribute('rborder');
bgcolor = obj.getAttribute('rbgcolor');
radius = parseInt(obj.getAttribute('radius'));
if (radius == null || radius < 1) radius = 1;
else if (radius > 6) radius = 6;
MAX = radius * 2 + 1;
/*
create table {{
*/
Table = document.createElement('TABLE');
TBody = document.createElement('TBODY');
Table.cellSpacing = 0;
Table.cellPadding = 0;
for (trIDX=0; trIDX < MAX; trIDX++) {
TR = document.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
TD = document.createElement('TD');
styleWidth = '1px'; styleHeight = '1px';
if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
else if (radius > 2) {
if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
}
if (styleWidth != null) TD.style.width = styleWidth;
if (styleHeight != null) TD.style.height = styleHeight;
if (Space == tdIDX || Space == MAX - tdIDX - 1)
TD.style.backgroundColor = bdcolor;
else if (tdIDX > Space && Space < MAX - tdIDX - 1)
TD.style.backgroundColor = bgcolor;
if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
TR.appendChild(TD);
}
TBody.appendChild(TR);
}
/*
}}
*/
Table.appendChild(TBody);
// insert table and remove original table
Parent.insertBefore(Table, objTmp);
}
</script>
</head>
<body background="/images/back.png">
<div id="container"><!--블로그 전체 몸통을 감싸는 레이어입니다.-->
<div id="header"><img src="images/title.png" alt="title" width="1004 height="300" border="0" usemap="#map" />
<map name="map" id="map">
<area shape="rect" coords="625,70,757,104" href="http://philstay.codex.kr/xe/freeboard" target="_parent" onfocus='this.blur()' />
<area shape="rect" coords="0,0,358,64" href="http://philstay.codex.kr/xe/outpage" target="_parent" onfocus='this.blur()' />
<area shape="rect" coords="186,70,318,104" href="/program/camp.html" target="_parent" onfocus='this.blur()' />
<area shape="rect" coords="43,70,175,104" href="int/int.html" target="_parent" onfocus='this.blur()' />
</map></div>
<div id="content">
<p></p>
<table id="ta" width="990px" height="306" border="0" radius="3" rborder="#999999" rbgcolor="#ffffff" align="center">
<tr>
<td width="447px" height="20" align="center" style="background:#f6f6f6; font-size:12px;"><b>최근 게시물</b></td>
<td width="10px"> </td>
<td colspan="2" width="515px" align="center" style="background:#f6f6f6; font-size: 12px;"><b>저희 Mabilis 홈스테이는...</b>
</td>
</tr>
<tr>
<td align="left" witdh="447px" style="padding-left:10px; padding-right:10px"><span style="border-top-width:1; border-right-width:1; border-bottom-width:1; border-top-style:dotted; border-right-style:none; border-bottom-style:dotted;"><img class="zbxe_widget_output" widget="newest_document" skin="default" colorset="normal" order_target="list_order" order_type="desc" list_count="8" duration_new="24" subject_cut_size="30" display_regdate="Y" module_srls="120" /></td>
<td width="10px"> </td>
<td width="269px" style="background:#FFFFFF; padding-left:10px; padding-right:10px"><p>저희 홈스테이는 BlaBla</p>
<p>동해물과 백두산이 마르고 닳도록</p>
<p>하느님이 보우하사 우리나라 만세</p>
<p>무궁화 삼천리 화려강산</p>
<p>대한사람 대한으로 길이 보전하세</p></td>
<td width="246px" align="center" ><img src="http://philstay.codex.kr/images/scuba.jpg" width="225" height="291" /></td>
</tr>
</table>
<script>roundTable("ta");</script>
<p> </p>
<table id="ta2" width="990" border="0" radius="3" rborder="#999999" align="center">
<tr>
<td height="20" align="center" style="background:#f6f6f6; font-size: 11px;"><b>최근 이미지</b></td>
</tr>
<tr>
<td><span style="border-top-width:1; border-bottom-width:1; border-top-style:dotted; border-bottom-style:dotted;"><img class="zbxe_widget_output" widget="newest_images" skin="default" colorset="normal" title_length="6" thumbnail_type="ratio" thumbnail_width="60" thumbnail_height="60" cols_list_count="6" display_author="Y" display_regdate="Y" display_readed_count="N" display_voted_count="N" module_srls="167" /></span></td>
</tr>
</table>
<script>roundTable("ta2");</script>
</div>
<img src="/images/index.png" />
<div id="footer">
<p>여기에 연락처</p>
</div>
</div>
</body>
</html>
뭘 가운데 정렬 하고 싶으신 건가요?
'저희 홈스테이는 blabla' 라는 글자인가요?
그림이나 위젯 인가요?
아무튼 <td> 태그 안에 align="center'를 넣으면 될 것 같네요..
예를 들면
<td width="269px" style="background:#FFFFFF; padding-left:10px; padding-right:10px"><p>저희 홈스테이는 BlaBla</p>
이것을,
<td width="269px" style="background:#FFFFFF; padding-left:10px; padding-right:10px" align="center"><p>저희 홈스테이는 BlaBla</p>
이렇게..
그러면 셀 안에 모든 내용이 가운데 정렬하죠.. :)