테이블요소

테이블요소

유형
실습문서
주제

웹개발첫걸음

순번
6
태그
설명

날짜
🗃️
예제파일 :
images.zip18.4KB

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

👁️‍🗨️
table

표를 만들때 사용하는 태그

  • 문법 table>tr>td
<table>
  <!-- table Row -->
  <tr>
    <!-- table Data -->
    <td></td>
    <!-- table Data -->
    <td></td>
  </tr>
</table>
image
image
ex1-19.html

02. 테이블 구조화 하기

👁️‍🗨️
테이블을 구조적으로 작성하는 요소
  • 작성하지 않아도 웹브라우저에서 교정해줍니다.
  • thead와 tfoot의 마크업 순서가 바뀌어도 화면출력 위치는 변하지 않습니다.
thead
테이블의 헤더영역을 의미하는 요소
td 가 올수없음 th 사용
tbody
테이블의 바디영역을 의미하는 요소
tfoot
테이블의 푸터영역을 의미하는 요소
image
ex1-20.html

03. colgroup

👁️‍🗨️
span 속성으로 영역확장
image
image
ex1-21.html

04. 셀병합하기

속성
설명
colspan
열(가로)병합
rowspan
행(세로)병합
image
ex1-22.html
image
image
퀴즈1

05. 표접근성

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

🔗잘 설명된 블로그

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