MUMYEONG

[HTML] 테이블(Table)태그 본문

Development/HTML

[HTML] 테이블(Table)태그

MUMYEONG IMDA 2022. 3. 30. 23:10
반응형
테이블(Table)태그 
    • 데이터를 보기 좋게 정리하여 보여주는 표를 만들때 사용하는 태그이다.

1) table 속성

  • 테이블 표를 감싸는 태그

2) tr(table row) 속성

  • 테이블 표 내부의 행

3) th(table heading) 속성

  • 테이블 표 내부의 제목 열

4) td(table data) 속성

  • 테이블 표 내부의 내용 열

5) border 속성

  • 테이블 표 테두리 두께

6) colspan 속성

  • 가로 행 병합

7) rowspan 속성

  • 세로 열 병합

코드

<!DOCTYPE html>
<html lang="en">

<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>Table</title>
</head>

<body>
    <table border="1" style="text-align: center;">
        <tr>
            <th></th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
        </tr>
        <tr>
            <th>1교시</th>
            <td>과학</td>
            <td>국어</td>
            <td>영어</td>
            <td>수학</td>
            <td>과학</td>
        </tr>
        <tr>
            <th>2교시</th>
            <td colspan="2">국어</td>
            <td>수학</td>
            <td rowspan="2">미술</td>
            <td>국어</td>
        </tr>
        <tr>
            <th>3교시</th>
            <td>사회</td>
            <td>수학</td>
            <td>사회</td>
            <td>도덕</td>
        </tr>
        <tr>
            <th>4교시</th>
            <td>도덕</td>
            <td>과학</td>
            <td>음악</td>
            <td>영어</td>
            <td>수학</td>
        </tr>
    </table>
</body>

</html>

 

결과

반응형
LIST
저작자표시

'Development > HTML' 카테고리의 다른 글

[HTML] 오디오(Audio)태그  (1) 2022.03.10
[HTML] 비디오(Video)태그  (1) 2022.03.10
[HTML] 목록(List)태그 (ul, ol, li, type)  (1) 2022.03.09
[HTML] 이미지태그 (img, src, alt, width, height)  (1) 2022.03.09
[HTML] 앵커(anchor)태그 (a, href, target)  (1) 2022.03.09
'Development/HTML' Related Articles more