테이블(표)을 만드는 table, tr, td 태그에 대한 간단 사용법 설명

12/12/2021
2 minutes to read

강의

코드: html-table-demo.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>테이블(표)</title>
</head>
<body>
    <h1>테이블 태그</h1>

    <table border="1">
        <tr>
            <td>
                1행 1열
            </td>
        </tr>
    </table>

    <table border="1">
        <tr>
            <td>
                1행 1열
            </td>
            <td>
                1행 2열
            </td>
        </tr>
    </table>

    <table border="1">
        <tr>
            <td>
                1행 1열
            </td>
            <td>
                1행 2열
            </td>
        </tr>
        <tr>
            <td>
                2행 1열
            </td>
            <td>
                2행 2열
            </td>
        </tr>
    </table>

    <table border="1" width="300" height="300">
        <tr>
            <td rowspan="2">테이블01</td>
            <td colspan="2">테이블02</td>
            <!--<td>테이블03</td>-->
        </tr>
        <tr>
            <!--<td>테이블01</td>-->
            <td>테이블02</td>
            <td>테이블03</td>
        </tr>
        <tr>
            <td colspan="3">테이블01</td>
            <!--<td>테이블02</td>
            <td>테이블03</td>-->
        </tr>
    </table>

</body>
</html>

실행

HTML 테이블 태그

추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!