table-1.html

<body>
    <!-- <table></table>: 표 구성  -->
    <!-- border="1" : 테이블 선  -->
    <table border="1">
        <!-- <tr></tr> : 행 추가 -->
        <tr>
            <!-- <td></td> : 열 추가 -->
            <!-- <th></th> : 제목 셀, 진하게 표시 -->
            <th>제목 셀</th>
            <th>1행 2열</th>
            <th>1행 3열</th>
        </tr>
        <tr>
            <!-- <td></td> : 열 추가 -->
            <!-- <th></th> : 제목 셀, 진하게 표시 -->
            <td>제목 셀</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
    </table>
</body>

20230302114707.png

table-2.html

<body>
    <table border="1">
        <tr>
            <th>이름</th>
            <!-- style="width:120px" : 스타일을 줘서 너비를 늘림 -->
            <td style="width: 120px;"></td>
            <th>연락처</th>
            <td style="width: 120px;"></td>
             
        </tr>
        <tr>
            <th>주소</th>
            <!-- colspan = "3" : 3개의 열을 병합 -->
            <td colspan="3"></td>
        </tr>
        <tr>
            <th>자기 소개</th>
            <td colspan="3"></td>
        </tr>
    </table>
</body>

20230302114955.png

table-3.html

<body>
    
    <!-- <table></table>: 표 구성  -->
    <!-- border="1" : 테이블 선  -->
    <table border="1">
        <!-- caption: 표의 제목으로 가운데 정렬 -->
        <caption>
            <strong>Browser</strong>
            <p>국내에서 자주 사용하는 모던 브라우저</p>
        </caption>
        <!-- <tr></tr> : 행 추가 -->
        <tr>
            <!-- <td></td> : 열 추가 -->
            <!-- <th></th> : 제목 셀, 진하게 표시 -->
            <th>제목 셀</th>
            <th>1행 2열</th>
            <th>1행 3열</th>
        </tr>
        <tr>
            <!-- <td></td> : 열 추가 -->
            <!-- <th></th> : 제목 셀, 진하게 표시 -->
            <td>제목 셀</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
    </table>
</body>

20230302114858.png

table-4.html

<body>
    <!-- figure,figcaption 으로 표의 제목 -->
    <!-- <b></b> : 강조해서 진하게 표시 -->
    <figure>
    <!-- <table></table>: 표 구성  -->
    <!-- border="1" : 테이블 선  -->
    <table border="1">
    
        <!-- <tr></tr> : 행 추가 -->
        <tr>
            <!-- <td></td> : 열 추가 -->
            <!-- <th></th> : 제목 셀, 진하게 표시 -->
            <th>제목 셀</th>
            <th>1행 2열</th>
            <th>1행 3열</th>
        </tr>
        <tr>
            <!-- <td></td> : 열 추가 -->
            <!-- <th></th> : 제목 셀, 진하게 표시 -->
            <td>제목 셀</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
    </table>
    <figcaption>
        <p>국내에서 자주 사용하는 <b>모던 브라우저</b></p>
    </figcaption>
</figure>
</body>

20230302120712.png

table - 5.html