HTML／CSS／JS

[HTML5] 03.테이블 태그 (table,tr,th,td,colspan,rowspan)

DEV장화 2022. 10. 13. 12:09
728x90
반응형

 

 

 

태그 설명
table 표 삽입
tr 행
th 제목 셀
td 내용 셀



ㄱ.테이블 생성

<body>
    <table>
        <thead>
            <tr>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1교시</td>
                <td>영어</td>
                <td>국어</td>
                <td>과학</td>
                <td>미술</td>
                <td>기술</td>
            </tr>
            <tr>
                <td>2교시</td>
                <td>도덕</td>
                <td>체육</td>
                <td>영어</td>
                <td>수학</td>
                <td>사회</td>
            </tr>
        </tbody>
    </table>    
</body>

 

월 화 수 목 금
1교시 영어 국어 과학 미술 기술
2교시 도덕 체육 영어 수학 사회

 

 

 

ㄴ.행·열 병합

 

<body>
    <table border="1">
        <tr>
            <th colspan="2">지역별 홍차</th>
        </tr>
        <tr>
            <th rowspan="3">중국</th>
            <td>정산소종</td>
        </tr>
        <tr><td>기문</td></tr>
        <tr><td>운남</td></tr>
        <tr> 
            <th rowspan="4">인도 및 스리랑카</th>
            <td>아삼</td>
        </tr>
        <tr><td>실론</td></tr>
        <tr><td>다질링</td></tr>
        <tr><td>닐기리</td></tr>
    </table>
</body>

 

지역별 홍차
중국 정산소종
기문
운남
인도 및 스리랑카 아삼
실론
다질링
닐기리

 

 

 

728x90
반응형