HTML 테이블(Table)- 표의 구조 지정하기

💻Coding/📓 HTML

HTML 테이블(Table)- 표의 구조 지정하기 - <thead>, <tbody><tfoot>

음은응 2021. 8. 19. 20:15

728x90

HTML 테이블(Table) 표의 구조 지정해주기

→ <thead>, <tbody>, <tfoot> 태그 사용

HTML <thead>, <tbody>, <tfoot>

- 표<table>만들었을 때, 테이블에 제목, 본문, 요약의 구조를 지정할 때 사용합니다.

- Q : 왜 사용해야할까요?
ㄴ 1. 표의 구조를 지정하면 시각장애인분들도 화면 낭독기를 통해 표를 쉽게 이해할 수 있기 때문입니다.
ㄴ 2. 표의 영역을 지정해주면 나중에 CSS로 각각 다른 스타일을 줄 수 있습니다.
ㄴ 3. 자바스크립트를 활용해 제목은 고정하고 스크롤하는 동작도 구현할 수 있습니다.

[ 태그의 뜻 ]

<thead> : 제목
<tbody> : 본문
<tfoot> : 요약

↓↓↓✅그림으로 쉽게 영역을 이해해보세요↓↓↓

😍 이제 위의 표를 실제로 만들어볼까요?😍

[ 표의 구조 기본 형태 ]

<table>
   <caption>표 제목</caption>
   <thead>
     <tr>
       <th>제목</th>
       <th>제목</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>내용</td>
       <td>내용</td>
   	 </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>내용</td>
       <td>내용</td>
   	 </tr>
    </tfoot>
</table>

[ 실행시 화면 ]

ㄴ "색깔이 안들어가 있어서 테이블의 형태가 구분이 잘 안가시죠?"
아래에 css 요소를 잠깐 넣어 테이블 구분만 해볼께요~😀

(↓↓↓css는 나중에 배울테니 지금은 코드를 복사해서 테이블의 영역만 확인하기!🤩↓↓↓)

[ table에 꾸밈추가 code ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 구조 지정하기</title>
    <style>
        table, th, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>테이블 구조 지정하기</h2>
    <table style="width: 100%;">
        <caption>회원등급 기준 및 혜택</caption>
        <thead>
            <tr>
                <th style="background-color:lightskyblue;">SILVER</th>
                <th style="background-color:lightyellow;">GOLD</th>
                <th style="background-color:lightpink;">VIP</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>회원가입시</td>
                <td>구매 20만원이상</td>
                <td>구매 50만원이상</td>
            </tr>
            <tr>
                <td>구매시 5% 할인</td>
                <td>구매시 10% 할인</td>
                <td>구매시 20% 할인</td>
            </tr>
            <tr>
                <td colspan="3">신규 회원가입시 한달 무료배송</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="background-color:lightskyblue;">
                <td colspan="3">vip등급 8월 한달동안 온라인 최저가 구매가능</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

[ 실행시 화면 ]

🟠 궁금하신 내용이 있다면 언제든지 물어봐주세요~! 🟠

728x90

저작자표시 비영리 변경금지

'💻Coding > 📓 HTML' 카테고리의 다른 글

서버의 종류 (0)	2021.11.03
HTML semantic tag_ 시맨틱태그 : 웹 문서 구조 만들기 (2)	2021.09.14
HTML 테이블(Table) 만들기 - <table> <caption> (0)	2021.08.18
HTML 테이블(Table) 만들기 - <table> <tr> <th> <td> (2)	2021.08.17
(VS Code)HTML 준비과정 - 02. 파일 저장하기 & 폴더 구성방법_비주얼 스튜디오 코드(Visual Studio Code) (0)	2021.08.09

현재글HTML 테이블(Table)- 표의 구조 지정하기 - <thead>, <tbody><tfoot>

250x250

쭈랜드입니다:)

Spring, 포토샵단축키, 드로우마이브랜드, PSD, adobe, HTML, eclipse, photoshop, 오라클, oracle, javascript, sqldeveloper, 포토샵, 오라클오류, SQL, 어도비, drawandrew, 드로우앤드류, css, 자바스크립트,

Today :
Yesterday :