테이블 구조좀 손봐주세요~!
본문
<div class="resized">
<table cellspacing="0" cellpadding="0" class="append3 drag3" id="salesTable">
<colgroup>
<col width="5%"> <!-- 순위 -->
<col width="20%"> <!-- 상품명 -->
<col width="10%"> <!-- 상품금액 PC -->
<col width="10%"> <!-- 상품금액 모바일 -->
<col width="10%"> <!-- 상품금액 수기주문 -->
<col width="10%"> <!-- 상품금액 합계 -->
<col width="7%"> <!-- 구매건수 PC -->
<col width="7%"> <!-- 구매건수 모바일 -->
<col width="7%"> <!-- 구매건수 수기주문 -->
<col width="9%"> <!-- 구매건수 합계 -->
<col width="5%"> <!-- 관리 -->
</colgroup>
<thead>
<tr>
<th rowspan="2" class="text-center bg_tr">순위</th>
<th rowspan="2" class="text-center bg_tr">상품명</th>
<th colspan="3" class="text-center bg_tr">상품금액</th>
<th rowspan="2" class="text-center bg_tr">합계</th>
<th colspan="2" class="text-center bg_tr">구매건수</th>
<th rowspan="2" class="text-center bg_tr">합계</th>
<th rowspan="2" class="text-center bg_tr">관리</th>
</tr>
<tr>
<th class="text-center bg_tr">PC</th>
<th class="text-center bg_tr">모바일</th>
<th class="text-center bg_tr">수기주문</th>
<th class="text-center bg_tr"></th>
<th class="text-center bg_tr">PC</th>
<th class="text-center bg_tr">모바일</th>
<th class="text-center bg_tr">수기주문</th>
</tr>
</thead>
<tbody>
<!-- 여기에 동적으로 행이 추가됨 -->
</tbody>
<tfoot>
<tr class="total_row">
<td colspan="2" class="text-center bg_tr">합계</td>
<td id="total_pc" class="text-right">0</td>
<td id="total_mobile" class="text-right">0</td>
<td id="total_manual" class="text-right">0</td>
<td id="total_sales" class="text-right">0</td>
<td id="total_quantity_pc" class="text-right">0</td>
<td id="total_quantity_mobile" class="text-right">0</td>
<td id="total_quantity_manual" class="text-right">0</td>
<td id="total_quantity" class="text-right">0</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
안녕하세요. 위 엑셀 보시고, html 2중 테이블 구조로 코드좀 만들어 주세요.. ㅠㅠ
답변 2
외부 테이블(<table>)을 사용하여
"상품금액"과 "구매건수"와 같은 그룹 헤더를 병합된 셀로 표시하고,
내부 테이블(별도의 <table> 태그)을 이용하여
"PC, 모바일, 수기주문"과 같은 세부 항목을 각각 표현.
외부 테이블은 헤더 분류를 나타내고, 실제 데이터는 내부 테이블에서 관리하시면
동적 데이터 처리나 JavaScript 등으로 추후 확장도 용이.
CSS로 셀 스타일을 일관되게 관리하고,
JavaScript에서 각 셀 ID를 통해 동적 합산처리를 간편하게 구현할 수 있는 구조가 요구됨.
<div class="resized">
<table cellspacing="0" cellpadding="0" class="append3 drag3" id="salesTable">
<colgroup>
<col width="5%"> <!-- 순위 -->
<col width="20%"> <!-- 상품명 -->
<col width="10%"> <!-- 상품금액 PC -->
<col width="10%"> <!-- 상품금액 모바일 -->
<col width="10%"> <!-- 상품금액 수기주문 -->
<col width="10%"> <!-- 상품금액 합계 -->
<col width="7%"> <!-- 구매건수 PC -->
<col width="7%"> <!-- 구매건수 모바일 -->
<col width="7%"> <!-- 구매건수 수기주문 -->
<col width="9%"> <!-- 구매건수 합계 -->
<col width="5%"> <!-- 관리 -->
</colgroup>
<thead>
<tr>
<th rowspan="2" class="text-center bg_tr">순위</th>
<th rowspan="2" class="text-center bg_tr">상품명</th>
<!-- 상품금액 그룹 -->
<th colspan="3" class="text-center bg_tr">상품금액</th>
<th rowspan="2" class="text-center bg_tr">합계</th>
<!-- 구매건수 그룹 -->
<th colspan="3" class="text-center bg_tr">구매건수</th>
<th rowspan="2" class="text-center bg_tr">합계</th>
<th rowspan="2" class="text-center bg_tr">관리</th>
</tr>
<tr>
<th class="text-center bg_tr">PC</th>
<th class="text-center bg_tr">모바일</th>
<th class="text-center bg_tr">수기주문</th>
<th class="text-center bg_tr">PC</th>
<th class="text-center bg_tr">모바일</th>
<th class="text-center bg_tr">수기주문</th>
</tr>
</thead>
<tbody>
<!-- 예시 행 (동적으로 반복 생성 가능) -->
<tr>
<td class="text-center">1</td>
<td>개인결제 추가금</td>
<!-- 상품금액: PC, 모바일, 수기주문 세 칸을 중첩 테이블로 묶음 -->
<td colspan="3" class="no-padding">
<table width="100%" class="inner-table" cellspacing="0" cellpadding="0">
<tr>
<td class="text-right">505,270</td>
<td class="text-right">898,666</td>
<td class="text-right">1,343,650</td>
</tr>
</table>
</td>
<td class="text-right">2,747,586</td>
<!-- 구매건수: PC, 모바일, 수기주문 세 칸을 중첩 테이블로 묶음 -->
<td colspan="3" class="no-padding">
<table width="100%" class="inner-table" cellspacing="0" cellpadding="0">
<tr>
<td class="text-right">18</td>
<td class="text-right">41</td>
<td class="text-right">25</td>
</tr>
</table>
</td>
<td class="text-right">84</td>
<td class="text-center">-</td>
</tr>
<!-- 반복 행 끝 -->
</tbody>
<tfoot>
<tr class="total_row">
<td colspan="2" class="text-center bg_tr">합계</td>
<!-- 상품금액 합계 -->
<td colspan="3" class="no-padding">
<table width="100%" class="inner-table" cellspacing="0" cellpadding="0">
<tr>
<td id="total_pc" class="text-right">0</td>
<td id="total_mobile" class="text-right">0</td>
<td id="total_manual" class="text-right">0</td>
</tr>
</table>
</td>
<td id="total_sales" class="text-right">0</td>
<!-- 구매건수 합계 -->
<td colspan="3" class="no-padding">
<table width="100%" class="inner-table" cellspacing="0" cellpadding="0">
<tr>
<td id="total_quantity_pc" class="text-right">0</td>
<td id="total_quantity_mobile" class="text-right">0</td>
<td id="total_quantity_manual" class="text-right">0</td>
</tr>
</table>
</td>
<td id="total_quantity" class="text-right">0</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
엑셀과 유사한 시각적 효과와 레이아웃을 구현하시려면 CSS를 활용한 스타일 작업이 필수적입니다.
각 열의 정렬, 셀 경계선, 배경 색상, 폰트 크기 및 간격 등을 세밀하게 조정하시여
최종 출력물이 깔끔하고 직관적으로 보일 수 있도록 잘 꾸며 보시기 바랍니다. (●'◡'●)
헤더의 colspan과 rowspan이 잘못 설정되어 있네요. 첫 번째 줄에서 "구매건수" 부분이 3개 컬럼을 차지해야 하는데, 2개로 되어있어서 정렬이 안 맞는 것 같습니다. 해결했습니다.
