표를 만들 때는 테이블 태그를 사용한다.

 

태그 설명
table 표 삽입
tr 표에 행(table row) 삽입
th 표의 제목 셀(table heading) 생성
td 표의 일반 셀(table data) 생성

 

테이블 태그 예시

<!DOCTYPE html>
<html>
<head>
    <title>HTML List Basic Page</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <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>
</html>

테이블 태그의 속성

th와 td에 colspan과 rowspan 속성을 사용하여 표에서 셀이 차지하는 영역을 조절할 수 있다.

태그 속성 설명
table border 표의 테두리 두께 지정
td, th colspan 셀의 너비 지정
rowspan 셀의 높이 지정

테이블 태그 속성 예시

<!DOCTYPE html>
<html>
<head>
    <title>HTML List Basic Page</title>
</head>
<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>    
</html>

중국, 정산소종은 둘 다 두 번째 행이다. 그래서 같은 tr 태그 안에 있는 것이다.

인도 및 스리랑카, 아삼도 마찬가지로 둘 다 다섯 번째 행이기 때문에 같은 tr 태그 안에 있다.

 

[참고] HTML5 웹 프로그래밍 입문(3판)

반응형

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

[HTML] script 태그의 async, defer 차이  (0) 2024.04.14
HTML5 미디어 태그  (0) 2021.09.26
HTML5 목록 태그  (0) 2021.09.26
HTML5 글자 태그  (0) 2021.09.26

티스토리툴바