기초) HTML5 table tag 바뀐 점

 

 

 

 

1️⃣ <Table> 요소 안에

시각 장애인분들을 위해

필수로 넣어야 했던

summary '속성'이

사라짐

 

표현하고 싶다면

<caption>요소 안에

제목과 요약 글을 같이

넣는 방법이 있고

 

넣는 방법으로는

<details> 와

<summary> 요소를

사용하는 방법이 있다.

 

*detail 요소는 반드시

<summary>와 같이 다닌다.

 

---

 

2️⃣ <Table> 요소안에

가로 사이즈, width 속성이

사라졌고 css로 따로 작업해야 한다.

 

---

 

3️⃣ <colgroup> 열의 그룹의

각 <col>마다 width 사이즈를

설정할 수 있었는데 width라는

속성 자체가 사라졌다. 때문에

인라인 스타일로 제어를 해야 한다.

 

<colgroup>

<col style="width:50%;">

</colgroup>

 

---

 

 

4️⃣ colgroup을 사용하지 않고

직접적으로 '행' 라인인 <tr>에

인라인 스타일로 적용하여 쓸 수 있다.

 

<tr>

    <th style="width:50px;">

    1

    </th>

</tr>

 

---

 

위 바뀐 내용들을

총정리한 샘플 코드

 

 

<table>

    <caption>
        <details>
              <summary>공부벌레의 공부표</summary>
                     &nbsp;찐 공부 벌레 타쿠대디
        </details>
    </caption>
       
       
       <colgroup>   <!-- 인라인 스타일 속성을 넣을거면 콜그룹에만 넣던지 아래 각 행들에 따로 넣던지 하자 -->
            <col style="width: 50%;">
            <col style="width: 30%;">
            <col>
       </colgroup>

    
    <thead>
        <tr>
            <th style="width: 100px;">0호기</th>  <!--인라인 스타일 속성이 위랑 겹치니 두 곳 중 하나만 넣자   -->
            <th style="widh: 300px;">초호기</th>
            <th>7호기</th>
        </tr>
    </thead>
    
    <tbody>
          <tr>
            <td>대단해</td>
            <td>훌륭해</td>
            <td>멋있어</td>
          <tr>
      </tbody>

</table>