잘못된 테이블 소스 보정 하기
페이지 정보
작성자 서방님 댓글 0건 조회 74회 작성일 08-08-20 13:48본문
잘못된 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 language="javascript">
function setContents()
{
contentsLayer.innerHTML=sourceLayer.innerHTML
}
</script>
<!--삽입할 내용-->
<div id="sourceLayer" style="display:none">
<table border=1 cellpadding=10>
<tr>
<td>A내용</td>
</div>
<body>
contentsLayer는 잘못된 테이블 소스가 들어갈 공간입니다.
이곳에 들어갈 내용을 sourceLayer에 정의 해 놓고 body가 로딩되면 setContents를 호출하여 sourceLayer의 잘못된 테이블 소스를 contentsLayer에 넣어 줍니다.
이때 반드시 sourceLayer는 문서의 가장 끝에 위치하여 다른 테이블에 영향을 주지 않도록 하거나 히든프레임을 사용하여 처리해주는 것이 좋을 것 같네요...
재미있는 점은 innerHTML을 사용하면서 잘못된 테이블 소스는 깔끔하게 다시 코딩 됩니다...
아래와 같이 말이죠...
<TABLE cellPadding=10 border=1>
<TBODY>
<TR>
<TD>A내용</TD>
<DIV></DIV>
</TR>
</TBODY>
</TABLE>
위의 방법대로라면 잘못된 테이블 소스가 좀더 복잡한 구성일 경우에도...
실질적으로 전체 레이아웃은 변형시키지 않는 것 같습니다.
지금까지의 소스를 바꾸어 생각해보면 아래와 같은 소스로 이용 될 수 있겠죠...
테스트는 첨부한 HTML파일을 실행시켜서 하세요.
[소스보기]
<form name="form1">
잘못된 HTML코드 입력<br>
<textarea cols=60 rows=10 name=A>
<table border=1 cellpadding=10>
<tr>
<td>A</td>
</textarea>
<br>
<input type=button value=재코딩 onclick=reCoding()>
<br>
<br>
재 코딩 결과
<br>
<textarea cols=60 rows=10 name=B readonly></textarea>
<br>
</form>
<script language="javascript">
function reCoding()
{
tempLayer.innerHTML=document.form1.A.value;
document.form1.B.value=tempLayer.innerHTML;
}
</script>
<div id=tempLayer style=display:none></div>
첨부파일
- 잘못된_HTML코드_재보정.html (975byte) 1회 다운로드 | DATE : 2008-09-08 11:39:07
댓글목록
등록된 댓글이 없습니다.
