복잡한 테이블 기반 레이아웃 (몇 년 전에 코딩 된)으로 웹 페이지 작업을 시작하려고합니다.테이블 레이아웃을 CSS 레이아웃으로 변환하는 가장 좋은 방법은 무엇입니까?
divs와 span을 사용하여 레이아웃을 적절한 CSS 레이아웃으로 변환하고 싶습니다.
이와 같은 문제를 해결하기위한 좋은 방법을 제안 할 수 있습니까? 청사진과 같은 CSS 프레임 워크를 사용해야합니까? 올바르게 보이기까지 거기에 들어가서 해킹하세요. 이미 파이어 버그와 IE 개발자 툴바를 많이 사용하고 있습니다.
일반적으로 테이블과 CSS를 변환 할 때는 별표가 없습니다. 모든 사이트는 서로 다르며 요구 사항이 다릅니다. 유일한 진정한 대답은 처음부터 마크 업을 시작하는 것입니다.
최고의 조언은 마크 업을 전체적으로 작성하는 것입니다. 마크 업이 정확하고 의미가 있으며 데이터를 완전히 나타내야합니다. 아직 스타일 시트를 작성하지 마십시오. 마크 업을 마친 후 CSS를 만듭니다. 이렇게하면 의미 론적 마크 업과 CSS가 완전히 프리젠 테이션을 제어합니다.
CSS 프레임 워크는 의미 론적 마크 업에 대한 접근 방식을지지하지 않습니다. 왜냐하면 사용자가 접근 방식을 준수하기 위해 태그를 추가해야하기 때문입니다. 결과적으로 CSS 프레임 워크는 때로는 가치보다는 문제가됩니다.
마크 업을 수행 한 다음 CSS를 수행하십시오.
변환 과정은 고통스런 두통이 될 것입니다! 나는 당신이 전체적인 재 설계를 시작할 것을 제안한다.
반복적 인 방법도 효과적입니다. 작은 블록부터 CSS로 변환하십시오. 이렇게하면 테이블 구조가 단순 해져서 테이블에 "기본 그리드"만 남기고 나머지는 CSS에 남겨두기를 바랍니다.
단순한 레이아웃 인 경우 기존의 테스트 된 솔루션을 선택하십시오 (1 ~ 3 개 열에는 수많은 테스트 솔루션이 있습니다). 더 복잡한 경우 청사진으로 이동하십시오.
시작하기 전에 CSS 재설정을 사용하고 있는지 확인하십시오. Eric Meyer 및 Yahoo YUI 모두 우수합니다. 이렇게하면 모든 브라우저를 똑같이 보이게 할 수 있습니다.
또한 HTML validator도 설치하십시오. 이렇게하면 HTML이 제대로 보이고 CSS를 추가 할 수 있습니다.
그런 다음 Firebug 사본을 잡고 파이어 폭스에 설치하십시오. 이것은 어떤 CSS 규칙이 무엇을하는지 보는 데 탁월합니다. 각 규칙별로 s 십자 기호를 클릭하여 개별 규칙을 비활성화 할 수 있습니다.
이제 올바르게 검증하고 스타일 시트에서 사용한 규칙을 확인하는 웹 페이지를 방문하십시오. 시도
웹 사이트는 www.alistapart.com, CSS Zen Garden, SimpleBits 등
모르겠어요내가 Emastic (지원 유체 및 고정 열)라는 CSS 프레임 워크를 구축,이 어떤 도움이 될 수 있고 당신이 시뮬레이션 할 수 있습니다 테이블이 원한다면 여기에 예제가 있습니다. Emastic Table
저는 처음부터 모든 것을 다시 디자인해야한다고 말하는 사람입니다. HTML을 정리 한 다음 CSS를 만드십시오.
나는 이유를 추가하고 싶습니다.일반적으로 테이블 기반 디자인은 적어도 몇 년 전이므로 상당히 어려워 보입니다. 이 기회를 활용하여 디자인을 개선하십시오. 귀하의 취향과 필요에 따라 약간 새로 고침하거나 완전히 분해하십시오.
프레임 워크를 사용하지 않겠습니다. 새로운 프레임 워크를 배우는 것은 다시 &을 사용하는 경우에만 유용합니다. 각 프레임 워크에는 고유 한 버그와 약점이 있습니다.
display: table-cell;
을 사용하여 열을 만드십시오. 이들은 float: left;과 같이 정렬됩니다. http://quirksmode.org/css/css2/display.html
일부 경우 정규 표현식을 사용하면 처리 속도가 빨라질 수 있습니다. 이 같은
예를 들어, 뭔가 :
<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>
테이블의 시작과 일치 $ 1의 첫 번째 셀의 내용을 제공 할 것 교체 : 물론 당신의
<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>
' 특정 사용 사례에 맞게 사용자 정의해야합니다. 비슷한 페이지가 여러 개있는 경우 먼저 손으로 코딩 한 다음이 코드를 사용하여 다른 코드로 쉽게 변환 할 수 있습니다.
또 다른 방법이 jQuery 플러그인 같은 것을 사용하는 것입니다 : https://github.com/ryandoom/jquery-plugin-table-to-div
렌더링을 다음 수정하기위한 것입니다,하지만 주어진 테이블을 가지고 그것의 간단한 DIV 기반 양식을 제공하기 위해 개발 과정에서 사용될 수 있습니다.
이론상으로는 문제가 없지만 때때로 마크 업을 변경 (순서 변경, 클래스 추가, div 또는 span의 일부 요소 감싸기)해야합니다. 괜찮아! Div, span 및 class는 의미 상 올바르지 않으며 악용하지 마십시오. –