7. 테이블요소

Info: 🗃️ 예제파일 :

1. table, tr, td 요소로 테이블 삽입하기

Info: 👁️‍🗨️ table

표를 만들때 사용하는 태그

• 문법 table>tr>td

<table>
  
  <tr>
    
    <td></td>
    
    <td></td>
  </tr>
</table>

“`html

교과목	점수
HTML	93
CSS	92
평균	92.5

“`

2. 테이블 구조화 하기

Info: 👁️‍🗨️ 테이블을 구조적으로 작성하는 요소

• 작성하지 않아도 웹브라우저에서 교정해줍니다.
• thead와 tfoot의 마크업 순서가 바뀌어도 화면출력 위치는 변하지 않습니다.

| thead | 테이블의 헤더영역을 의미하는 요소 | td 가 올수없음

th 사용 |
| — | — | — |
| tbody | 테이블의 바디영역을 의미하는 요소 | |
| tfoot | 테이블의 푸터영역을 의미하는 요소 | |

“`html

교과목	점수
HTML	93
CSS	92
평균	92.5

“`

3. colgroup

Info: 👁️‍🗨️ span 속성으로 영역확장

“`html

망고의 기말고사 점수

교과목	점수
HTML	93
CSS	92
평균	92.5

“`

4. 셀병합하기

속성	설명
colspan	열(가로)병합
rowspan	행(세로)병합

“`html

1
2	3	4

1	2	3
	4	5

“`

“`html

<table>
    <tr>
        <td colspan="2">컴퓨터 그래픽스 기능사</td>
    </tr>
    <tr>
        <td rowspan="3">프로그램</td>
        <td>일러스트</td>
    </tr>
    <tr>
        <td>포토샵</td>
    </tr>
    <tr>
        <td>인디자인</td>
    </tr>
</table>

“`

5. 표접근성

Info: 👁️‍🗨️ 스크린리더기에게 표의 방향을 알려줌

🔗잘 설명된 블로그

속성	설명
caption	표의 제목을 의미
scope	스크린리더기 에게 데이터의 방향을 알려줌

“`html

상품에 따른 상하반기 판매랑

구분	데스크탑 PC	스마트폰
상반기 판매수	2만대	5만대
하반기 판매수	3만대	7만대

“`