Front-End/HTML

[HTML] 테이블 태그

09009 2023. 3. 29. 09:03

테이블 태그

- table : 표 생성

- tr : 표의 행 삽입

- th : 표의 제목 셀 생성

- td: 내용이 들어가는 셀 생성

- border: 표의 테두리 두께 지정

- <table border = "1"> : 표의 테두리를 지정하는 속성

- thead: 머리글

- tbody: 본문글

표를 만들고 셀 추가하기

위와 같은 시간표를 웹에 출력하려면 아래와 같이 html 코드를 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</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>

표의 행이 총 3개이므로 3개의 tr 태그 (표의 행 삽입)가 필요하다는 것을 우선적으로 생각해야 한다.

 

colspan, rowspan

colspan : 셀의 너비를 지정한다. 정보를 세로로 읽고 싶은 경우 사용

rowspan : 셀의 높이를 지정한다.  정보를 가로로 읽고 싶은 경우 사용

 

💻 출력 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</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>

실습 예제

💻 출력

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <th> 따뜻한 음료</th>
            <ol>
                <li>커피</li>
                <li>녹차</li>
                <li>둥글레차</li>
            </ol>
        </li>
        <li>
            <th>차가운 음료</th>
            <ol>
                <li>커피</li>
                <li>스무디</li>
                <li>식혜</li>
            </ol>
        </li>
    </ul>  
</body>
</html>

 

💻 출력

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr><th colspan="6">한국의 차</th></tr>
        <tr>
            <th rowspan="6">뿌리차</th>
            <td>인삼차</td>
            <th rowspan="9">과일차</th>
            <td>수정과</td>
            <th rowspan="5">잎차</th>
            <td>뽕잎차</td>
        </tr>
        <tr>
            <td>당귀차</td>
            <td>유자차</td>
            <td>감잎차</td>
        </tr>
        <tr>
            <td>생강차</td>
            <td>구기자차</td>
            <td>솔잎차</td>
        </tr>
        <tr>
            <td>칡차</td>
            <td>대추차</td>
            <td>국화차</td>
        </tr>
        <tr>
            <td>둥글레차</td>
            <td>오마자차</td>
            <td>이슬차</td>
        </tr>
        <tr>
            <td>마차</td>
            <td>매실차</td>
            <th rowspan="4">기타</th>
            <td>두충차</td>
        </tr>

        <tr>
            <th rowspan="3">곡물차</th>
            <td>보리차</td>
            <td>모과차</td>
            <td>영지버섯차</td>
        </tr>
        <tr>
            <td>옥수수차</td>
            <td>산수유차</td>
            <td>귤강차</td>
        </tr>
        <tr>
            <td>현미차</td>
            <td>탱자차</td>
            <td>쌍화차</td>
        </tr>
    </table>
</body>
</html>

행 하나를 삽입할 때마다 tr 태그를 작성해야 하고, 행에 내용을 작성할 때 td 태그를 꼭 작성해야함에 유의한다. 행 하나하나씩 삽입한다 가정하고 코드를 작성하면 더 쉽게 작성할 수 있다.