2013-04-11 2 views
2

서식을 지정하기 위해 표를 사용하는 "페이지"의 코드를 HTML5 요소를 사용하여 요약 할 수 있습니까? 예를 들어 : 일반적으로HTML5 요소가있는 표 형식의 페이지?

<section id="posts"> 
    <tr id="posts-title-row"> 
    <header><td id="posts-title"> 
     <h2>Latest Posts</h2> 
    </td></header> 
    </tr> 
    <tr id="posts-row"> 
    <article><td> 
     <p>Maecenas faucibus mollis interdum.</p> 
    </td></article> 
    <article><td> 
     <p>Maecenas faucibus mollis interdum.</p> 
    </td></article> 
    <article><td> 
     <p>Maecenas faucibus mollis interdum.</p> 
    </td></article> 
    </tr> 
</section> 

,이 매우 빈약 한 형태이지만, HTML 형식을 테이블을 사용하는 것을 제외하고 이메일 클라이언트 (. ESP의 Gmail) 이메일 지원 CSS3 서식 때까지, 조금 다른 옵션이 있다는 것을 이해 이메일 (예 : 뉴스 레터). 그러나 내 마음의 자신의 의미 평화를 위해, 나는 물건을 정리 < 섹션>, < 기사> 및 < 헤더> 유형의 요소를 사용하고 싶습니다.

답변

1

당신이 방금 ARIA roles 기존 요소에 <section><article>에 대해 정의 사용할 수있는 소중한 의미의 경우

<table id="posts" aria-role="region"> 
    <tr id="posts-title-row"> 
     <td id="posts-title" aria-role="banner"> 
      <h2>Latest Posts</h2> 
     </td> 
    </tr> 
    <tr id="posts-row"> 
     <td aria-role="article"> 
      <p> 
       Maecenas faucibus mollis interdum. 
      </p> 
     </td> 
     <td aria-role="article"> 
      <p> 
       Maecenas faucibus mollis interdum. 
      </p> 
     </td> 
     <td aria-role="article"> 
      <p> 
       Maecenas faucibus mollis interdum. 
      </p> 
     </td> 
    </tr> 
</table> 
+0

이것은 가장 좋은 방법입니다. 이메일이 span, div 및 p와 같은 공통 태그와 일치하지 않습니다. 의미 론적 태그를 강제로 작동 시키려고하는 데 문제가 있는지 물어볼 것입니다. – John

0

당신은 할 수 있지만, 잘못된 장소의 요소를 가지고있다. 그들은 <td> 안에 있어야합니다. 당신은 또한 당신이 그것을 수용 한 전자 메일 서비스와 같은 테이블 형식으로 HTML5 태그를 사용할 수 있습니다하는 <table>

<section id="posts"> 
    <table> 
     <tr id="posts-title-row"> 
      <td id="posts-title"> 
      <header> 
       <h2>Latest Posts</h2> 
      </header></td> 
     </tr> 
     <tr id="posts-row"> 
      <td> 
      <article> 
       <p> 
        Maecenas faucibus mollis interdum. 
       </p> 
      </article></td> 
      <td> 
      <article> 
       <p> 
        Maecenas faucibus mollis interdum. 
       </p> 
      </article></td> 
      <td> 
      <article> 
       <p> 
        Maecenas faucibus mollis interdum. 
       </p> 
      </article></td> 
     </tr> 
    </table> 
</section> 
+0

그래, 테이블이 더 큰, 나는 < table > 태그를 가지고 있지만 난 단지 복사 그것의 덩어리를 붙여 넣었다. –

0

음에 전체 테이블을 포장해야합니다. 그러나 CSS3를 사용하여 페이지에 스타일을 부여 할 수 있습니다. 그리고 항상 기억 인라인 스타일! 2013 년 테이블 서식을 사용

이 작동하는 캐리지으로 가고 있지만, 전자 메일 서비스는 여전히 마을 보안관 것에 대해 이야기 할 때와 같습니다.

행운을 빈다.