HTML_[body] 테이블 태그

 <!-- 정렬 : ctl +shif +f -->
    <!-- 테이블 태그 -->
    <!-- 표를 만들거야 >> 공간을 선언 : table -->
    <table border="1px solid black" >
        <!-- 표의 한 줄을 만들는 방법: tr (table row) -->
        <tr>
            <!-- 표의 한 칸 데이터를 넣어주는 공간 : td(table data) -->
            <td>1번칸</td>
            <td>2번칸</td>
        </tr>

        <tr>
            <td>3번칸</td>
            <td>4번칸</td>
        </tr>

        <tr>
            <td>5번칸</td>
            <td>6번칸</td>
        </tr>

    </table>

    <!-- 기본 연습 표 시작 -->
    <!-- 표의 병합기능 -->
    <!-- 위/아래 병합 : rowspan = "병합할 개수"-->
    <!-- 좌/우 병합: colspan = "병합할 개수" -->

    <h3>카페 메뉴 선택</h3>
    <table border="1px solid black" >   
        <!--자동완성 방법: tr >td *3 -->
        <tr>
            <td>메뉴</td>
            <td>가격</td>
            <td>특이사항</td>
        </tr>

        <tr>
            <td>아메리카노</td>
            <td>3000원</td>
        <!-- 처음 시작해주는 칸에서 병합해주기 
        - colspan : 가로병합
        - rowspan : 세로병합 -->
            <td rowspan ="3">사계절가능</td> 
        </tr>

        <tr>
            <td>카페라떼</td>
            <td>3500원</td>
            <!-- 병합후 삭제 <td>사계절가능</td> -->
        </tr>

        <tr>
            <td>자바칩프라푸치노</td>
            <td>4500원</td>
            <!-- 병합 후 삭제 <td>사계절가능</td> -->
        </tr>
        <tr>
            <td>청귤에이드</td>
            <td>4000원</td>
            <td>여름한정</td>
        </tr>
    </table>

    <h3>수정된 메뉴</h3>
    <table border="1px solid black" >   
        <!--자동완성 방법: tr >td *3 -->
        <tr>
            <td>메뉴</td>
            <td>가격</td>
            <td>특이사항</td>
        </tr>

        <tr>
            <td>아메리카노</td>
            <td>3000원</td>
        <!-- 처음 시작해주는 칸에서 병합해주기 
        - colspan : 가로병합
        - rowspan : 세로병합 -->
            <td rowspan ="3">사계절가능</td> 
        </tr>

        <tr>
            <td>카페라떼</td>
            <td>3500원</td>
            <!-- 병합후 삭제 <td>사계절가능</td> -->
        </tr>

        <tr>
            <td>자바칩프라푸치노</td>
            <td>4500원</td>
            <!-- 병합 후 삭제 <td>사계절가능</td> -->
        </tr>
        <tr>
            <td colspan ='3'>청귤에이드는 조금만 기다려 주세요</td>
        </tr>
    </table>

    <h3>항목으로 정해주기 </h3>
    <!-- th(table header): 표의 헤더 부분을 작성할 때 사용 -->
    <!-- 글자가 두꺼워지고, 자동 가운데 정렬 -->

    <table border="1px solid black" width="300px">   
        <tr bgcolor = 'pink'>
            <!-- td를 th로 변경해주기 : 글자 두꺼워짐 -->
            <!-- th쪽에서 정렬 변경해주면 해당 열 같이 변경이 됨 -->
            <th align = 'right'>메뉴</th>
            <th>가격</th>
            <th>특이사항</th>
        </tr>

        <tr>
            <td>아메리카노</td>
            <td align = 'right'>3000원</td>      
            <td rowspan ="3">사계절가능</td> 
        </tr>

        <tr>
            <td>카페라떼</td>
            <td>3500원</td>
        </tr>

        <tr>
            <td>자바칩프라푸치노</td>
            <td>4500원</td>
        </tr>
        <tr>
            <td colspan ='3'>청귤에이드는 조금만 기다려 주세요</td>
        </tr>
    </table>



    <table  width='400px'>
        <tr bgcolor = 'gray'  align = 'left'>
            <th colspan='2' height ='50px'>Step1. 아이디/비번입력</th>         
        </tr>
        <tr bgcolor = 'whitesmoke' > 
            <td align = 'right'>아이디</td>
            <td>
                <form action=#>
                    <input type="text">
                </form>
            </td>
        </tr>

        <tr bgcolor = 'whitesmoke'>
            <td align = 'right' height ='35px'>비밀번호</td>
            <td>
                <form action=#>
                    <input type="text">
                </form>
            </td>
        </tr>

        <tr bgcolor = 'whitesmoke'>
            <td align = 'right' height ='35px'>비밀번호 확인</td>
            <td>
                <form action=#>
                    <input type="text">
                </form>
            </td>
        </tr>
    </table>

출처: 스마트인재개발원