2009-05-12 5 views
1

div로 변환하고 싶은 매우 간단한 테이블이 있습니다. 나는 이것에 행운이 없다.테이블 태그에서 div 태그로 변환하는 방법

http://jsbin.com/equfo는 기본적으로 나는 내가 버튼을 손에서 테이블의 중앙에 표시 할 위치를 다음과 같은 테이블을 갖는 피곤하기 때문에 div에로 변환 할 :

여기 내 페이지입니다. 그러나 나는 태그를 사용하고 있기 때문에. 중간은 TABLE의 중간 부분이 아니라 TD 태그의 중간 부분입니다.

답변

1

div에 더 적합하지만 간단한 방법은 버튼을 테이블 밖으로 옮기고 text-align : center div를 중심으로 배치하는 것입니다.

+0

그런 식으로 단추가 빨간색 보어 바깥에있게됩니다. 아직도 국경 안에 있길 바래요. –

2

버튼에 대해 <TD colspan="2"> 만 있으면 테이블 중앙에 위치하게됩니다. 테이블에 더 많은 열이있는 경우 적절하게 colspan을 늘립니다.

DIV와 함께 표시하려면 다음을 입력하십시오.

<div class="searchTable"> 
    <span>Enter SSN</span> 
    <div class="odd"> 
    <span class="label">Enter Social Security <u>N</u>umber</b></span> 
    <input type="text" id="SearchFormerTenant_ssn1"/>- 
    <input type="text" id="SearchFormerTenant_ssn1"/>- 
    <input type="text" id="SearchFormerTenant_ssn1"/> 
    </div> 
    <div class="even" style="width: 100%; text-align:center;"> 
    <input type="submit" id="SearchFormerTenant_0" value="Get Information"/> 
    </div> 
</div> 
2

이 특정 문제를 해결 하시겠습니까? 아니면 CSS 포지셔닝을 배우고 싶습니까?

빠른 해결책을 원한다면 Dave는 머리에 못을 박았다. 당신이 더 배우고 싶다면, 당신은이 튜토리얼로 시작보다 더 할 수있는 :

http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://www.brainjar.com/css/positioning/

는 intertubes에 많은 더 그들처럼 그들에있다. 그리고 특히 레이아웃을 형성하기 위해 기어드 사람들이 있습니다 :

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

http://designshack.co.uk/articles/10-css-form-examples

그것은 그 복잡하지,하지만 쉽게 여기에 설명 할 수있는 것보다 그것이 더.

희망이 도움이됩니다.

+0

링크를 가져 주셔서 감사합니다. –

관련 문제