HTML - 표 만들기, 열의 크기 조정하기

김정원·2022년 1월 18일
0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
</head>
    <body>
        <h1> 상품 구성 </h1>
    
        <table border="1px"> 
            <caption> 선물용과 가정용 상품 구성 </caption>
            <colgroup>
            <col style="background-color:#eee;">       <!-- 열을 묶어서 하나씩 지정하는 것 -->
            <col>       <!-- 아무런 속성이 들어가지 않아도 선언은 해주어야함 -->
            <col span="2" style="width:150px;"> <!--3,4열 폭을 넓혀줘-->
        </colgroup>
            <thead> 
            <tr>
                    <th>용도</th>
                    <th>중량</th>
                    <th>개수</th>
                    <th>가격</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">선물용</td>
                    <td>3kg</td>
                    <td>11~16과</td>
                    <td>35,000원</td>
                    </tr>
                    <tr>
                       
                        <td> 5kg</td>
                        <td>18~26과</td>
                        <td>52,000원</td>
                   </tr>
                 <tr>
                    <td rowspan="2">가정용</td>
                    <td> 3kg</td>
                    <td>11~16과</td>
                    <td>30,000원</td>
               </tr>
               <tr>
                
                <td> 5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
           </tr>
            </tbody>
        </table>

        <h2> 먹거리 </h2>
        <table border="1" >
          
            <tr>
                <td>입춘 천냥 국수</td>
                <td>11:00~16:00</td>
                <td>목관아 주차장</td>
            </tr>
            <tr>
                <td>제주 향토음식</td>
                <td>11:00~16:00</td>
                <td>관덕정 마당</td>
            </tr>
            <tr>
                <td>입춘 주전부리</td>
                <td>11:00~16:00</td>
                <td>관덕정마당</td>
            </tr>
            <tr>
                <td>입춘 천냥 국수</td>
                <td>11:00~16:00</td>
                <td>목관아 주차장</td>
            </tr>

        </table>
        </body>
</html>
Document

상품 구성

선물용과 가정용 상품 구성
용도 중량 개수 가격
선물용 3kg 11~16과 35,000원
5kg 18~26과 52,000원
가정용 3kg 11~16과 30,000원
5kg 18~26과 47,000원

먹거리

입춘 천냥 국수 11:00~16:00 목관아 주차장
제주 향토음식 11:00~16:00 관덕정 마당
입춘 주전부리 11:00~16:00 관덕정마당
입춘 천냥 국수 11:00~16:00 목관아 주차장
profile
김정원
garden
이전 포스트

HTML - 목록으로 독서 목차 만들기

0개의 댓글