211215 TIL - table, ie7크로스브라우징

IE 크로스브라우징 관련 내용은 이곳을 클릭해주세요!

Table 태그의 scope 속성

• scope은 스크린리더가 table의 읽는 방향을 결정해 준다.
• 읽는 방향을 결정해주기 때문에 해당 속성은 th에만 작성 가능 (th를 기준으로 column, row방식을 읽는 지 결정되기 때문)
• scope="col" : column, 즉 세로 방향
• scope="row" : row, 즉 가로 방향
  
  [출처] https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
  해당 이미지를 예로 들면, Name → name 리스트 → Location → location리스트 등의 순으로 가도 상관은 없지만 사실 논리적으로 해당 테이블을 읽으려면 Name을 읽고 Logan Henderson → Chicago, IL → logan@company.com → 938-283-9277로 읽는게 한 사람에 대한 정보를 모두 읽어주기 때문에 훨씬 논리적인 구성이라고 생각된다.

그러면 해당 테이블은 어떻게 마크업해야할까?

  <table>
    <thead>
      <th scope="col">Name</th>
      <th>Location</th>
      <th>Email</th>
      <th>Phone number</th>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Logan Henderson</th>
        <td>Chicago, IL</td>
        <td>logan@company.com</td>
        <td>938-283-9277</td>
      </tr>
      <tr>
        <th scope="row">Susie Carlson</th>
        <td>New York, NY</td>
        <td>susie@company.com</td>
        <td>394-938-9223</td>
      </tr>
      ...
    </tbody>
  </table>

• location, email, phone number의 경우 스크린 리더가 훑지 않기 때문에 해당 제목의 데이터는 무엇을 뜻하는지 알려주는게 좋을 거 같다.

Table 태그의 colgroup

• HTML 요소는 표의 열을 묶는 그룹을 정의합니다.
  각 tr에 클래스를 주기보다는 이렇게 주면 훨씬 알아보기 쉬울거 같기도 하다

    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/colgroup