게시판 및 기타 프로그래밍에서...
잘못된 TABLE사용으로 인해 전체적인 레이아웃을 망가뜨리는 경우가 종종 있습니다...
예를 들면 아래와 같은 경우겠죠...
<table border=1 cellpadding=10>
<tr>
<td>
<table border=1 cellpadding=10>
<tr>
<td>A</td>
</td>
<td>B</td>
</tr>
</table>
위와 같은 소스는 가장 바깥의 테이블 모양을 완전히 다른 것으로 변형시켜 버리게 됩니다..
|
B |
우리가 얻고자 하는 테이블은 이런 모양이지만...
위의 소스대로라면 아래와 같이 해석되어 버립니다.
|
어떻게 하면 이런 문제점을 해결 할 수 있을까 하고...
PHP를 이용하여 보정 함수도 만들어 보고 했지만...
결국은 아래와 같은 간단한 방법으로 해결을 봤네요...
<body onload=setContents()>
<table border=1 cellpadding=10>
<tr>
<td>
<div id=contentsLayer>
</div>
</td>
<td>B</td>
</tr>
</table>
<script>
function setContents()
{
contentsLayer.innerHTML=sourceLayer.innerHTML
}
</script>
<div id=sourceLayer style=display:none>
<table border=1 cellpadding=10>
<tr>
<td>A</td>
</div>
contentsLayer는 잘못된 테이블 소스가 들어갈 공간입니다.
이곳에 들어갈 내용을 sourceLayer에 정의 해 놓고...
body가 로딩되면 setContents를 호출하여 sourceLayer의 잘못된 테이블 소스를 contentsLayer에 넣어 줍니다.
이때 반드시 sourceLayer는 문서의 가장 끝에 위치하여 다른 테이블에 영향을 주지 않도록 하거나...
히든프레임을 사용하여 처리해주는 것이 좋을 것 같네요...
재미있는점은 innerHTML을 사용하면서 잘못된 테이블 소스는 깔끔하게 다시 코딩 됩니다...
아래와 같이 말이죠...
<TABLE cellPadding=10 border=1>
<TBODY>
<TR>
<TD>A</TD>
<DIV></DIV></TR>
</TBODY>
</TABLE>
위의 방법대로라면 잘못된 테이블 소스가 좀더 복잡한 구성일 경우에도...
실질적으로 전체 레이아웃은 변형시키지 않는 것 같습니다.
지금까지의 소스를 바꾸어 생각해보면...
아래와 같은 폼으로 이용 될 수 있겠죠...
결국 글 입력시 이용되면 좀더 유연해지겠죠...
반응형
'인터넷정보' 카테고리의 다른 글
| cut - 문자열 자르기 (0) | 2007.10.13 |
|---|---|
| cut - 문자열 자르기 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2007.10.13 |
| 잘못된 테이블 소스 보정 하기 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| 이미지 크롭 (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| CSS text-indent (0) | 2007.10.13 |
| image mapping 프로그램, 이미지맵, 이미지매핑 (0) | 2007.10.13 |