[ 4강 ] 테이블 심화

1. 회원정보 테이블 <div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 31.5259%; height: 48px;" border="1"><tbody><tr style="height: 10px;"><td style="width: 99.5614%; height: 10px; text-align: center;" colspan="2">회원정보</td></tr><tr style="height: 10px;"><td style="width: 28.123%; height: 10px; text-align: center;">이름</td><td style="width: 71.4384%; height: 10px;">홍길동</td></tr><tr style="height: 18px;"><td style="width: 28.123%; height: 18px; text-align: center;">성별</td><td style="width: 71.4384%; height: 18px;">남자</td></tr><tr style="height: 10px;"><td style="width: 99.5614%; height: 10px; text-align: right;" colspan="2">정보 정확률 90% 이상</td></tr></tbody></table></div>  2. 달력화면 테이블<div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 44.1362%; height: 180px;" border="1"><tbody><tr style="height: 22px;"><td style="width: 99.2938%; height: 22px; text-align: center;" colspan="7" rowspan="1">2023년 06월 달력</td></tr><tr style="height: 10px;"><td style="width: 14.1176%; height: 10px; text-align: center;">일</td><td style="width: 14.1176%; height: 10px; text-align: center;">월</td><td style="width: 14.1176%; height: 10px; text-align: center;">화</td><td style="width: 14.1176%; height: 10px; text-align: center;">수</td><td style="width: 14.1176%; height: 10px; text-align: center;">목</td><td style="width: 14.3529%; height: 10px; text-align: center;">금</td><td style="width: 14.3529%; height: 10px; text-align: center;">토</td></tr><tr style="height: 10px;"><td style="width: 14.1176%; height: 10px; text-align: center;"></td><td style="width: 14.1176%; height: 10px; text-align: center;"></td><td style="width: 14.1176%; height: 10px; text-align: center;"></td><td style="width: 14.1176%; height: 10px; text-align: center;"></td><td style="width: 14.1176%; height: 10px; text-align: center;">1</td><td style="width: 14.3529%; height: 10px; text-align: center;">2</td><td style="width: 14.3529%; height: 10px; text-align: center;">3</td></tr><tr style="height: 10px;"><td style="width: 14.1176%; height: 10px; text-align: center;">4</td><td style="width: 14.1176%; height: 10px; text-align: center;">5</td><td style="width: 14.1176%; height: 10px; text-align: center;">6</td><td style="width: 14.1176%; height: 10px; text-align: center;">7</td><td style="width: 14.1176%; height: 10px; text-align: center;">8</td><td style="width: 14.3529%; height: 10px; text-align: center;">9</td><td style="width: 14.3529%; height: 10px; text-align: center;">10</td></tr><tr style="height: 10px;"><td style="width: 14.1176%; height: 10px; text-align: center;">11</td><td style="width: 14.1176%; height: 10px; text-align: center;">12</td><td style="width: 14.1176%; height: 10px; text-align: center;">13</td><td style="width: 14.1176%; height: 10px; text-align: center;">14</td><td style="width: 14.1176%; height: 10px; text-align: center;">15</td><td style="width: 14.3529%; height: 10px; text-align: center;">16</td><td style="width: 14.3529%; height: 10px; text-align: center;">17</td></tr></tbody></table></div> ※  가로/세로 합침의 예제<div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 20.0504%; height: 54px;" border="1"><tbody><tr style="height: 18px;"><td style="width: 99.371%; height: 18px; text-align: center;" colspan="2">모집개발</td></tr><tr style="height: 18px;"><td style="width: 29.5597%; height: 36px; text-align: center;" rowspan="2">본사</td><td style="width: 69.8113%; height: 18px; text-align: center;">IP관리</td></tr><tr style="height: 18px;"><td style="width: 69.8113%; height: 18px; text-align: center;">디지털마케팅</td></tr></tbody></table></div> <table border="1" width="300">     <tr>           <td colspan="2">모집개발</td>     </tr>     <tr>            <td rowspan="2">본사</td>            <td>IP관리</td>     </tr>     <tr>            <td>디지털마케팅</td>     </tr></table> 4. 쇼핑몰 목록                          【 상품목록 】<div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 39.7226%; height: 100px;" border="1"><tbody><tr style="height: 10px;"><td style="height: 28px; text-align: center;" colspan="1" rowspan="2">상품 이미지</td><td style="height: 10px;"> 상품명 : 자바이야기</td></tr><tr style="height: 18px;"><td style="height: 18px;"> 가   격 : 30,000원</td></tr><tr style="height: 18px;"><td style="height: 36px; text-align: center;" colspan="1" rowspan="2">상품 이미지</td><td style="height: 18px;"> 상품명 : 오라클기초</td></tr><tr style="height: 18px;"><td style="height: 18px;"> 가  격 : 25,000원</td></tr><tr style="height: 18px;"><td style="height: 36px; text-align: center;" colspan="1" rowspan="2">상품 이미지</td><td style="height: 18px;"> 상품명 : JSP 마스터</td></tr><tr style="height: 18px;"><td style="height: 18px;"> 가  격 : 28,000원</td></tr></tbody></table></div> 5. 쇼핑몰 상세보기 화면 제작<div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 53.6836%; height: 185px;" border="1"><tbody><tr style="height: 18px;"><td style="width: 110.135%; height: 18px; text-align: center;" colspan="3">상품상세보기</td></tr><tr style="height: 10px;"><td style="width: 29.1068%; height: 30px; text-align: center;" rowspan="3">상품 이미지 </td><td style="width: 17.926%; text-align: center;">상품명</td><td style="width: 63.1024%; height: 10px;">자바이야기</td></tr><tr style="height: 10px;"><td style="width: 17.926%; text-align: center;">가격</td><td style="width: 63.1024%; height: 10px;">25,000원</td></tr><tr style="height: 10px;"><td style="width: 17.926%; text-align: center;">출판사</td><td style="width: 63.1024%; height: 10px;"> 영진출판사</td></tr></tbody></table></div> 6. 계산기<div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 31.8182%; height: 173px;" border="1"><tbody><tr><td style="width: 100%; text-align: center;" colspan="4">                                                0</td></tr><tr><td style="width: 25%; text-align: center;">1</td><td style="width: 25%; text-align: center;">2</td><td style="width: 25%; text-align: center;">3</td><td style="width: 25%; text-align: center;">+</td></tr><tr><td style="width: 25%; text-align: center;">4</td><td style="width: 25%; text-align: center;">5</td><td style="width: 25%; text-align: center;">6</td><td style="width: 25%; text-align: center;">-</td></tr><tr><td style="width: 25%; text-align: center;">7</td><td style="width: 25%; text-align: center;">8</td><td style="width: 25%; text-align: center;">9</td><td style="width: 25%; text-align: center;">x</td></tr><tr><td style="width: 50%; text-align: center;" colspan="2">=</td><td style="width: 25%; text-align: center;">0</td><td style="width: 25%; text-align: center;">÷</td></tr></tbody></table></div>    <div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZYqu/8c7aff0f0f519ca6f520371f433f8fbe76b0ec62" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZYqu/8c7aff0f0f519ca6f520371f433f8fbe76b0ec62" data-origin-width="897" data-origin-height="680"></div>