css + html5 고수님들 꼭 부탁드립니다..
본문
<table cellpadding="0" cellspacing="1" width="100%" align="center" style="margin:0px auto" bgcolor="#e4eaec">
<tr bgcolor="#f6f9fb">
<td width="11%" rowspan="2" height="50" align="center">구분</td>
<td width="33%" colspan="3" height="25" align="center">대한민국</td>
<td width="33%" colspan="3" height="25" align="center">미국</td>
<td width="11%" rowspan="2" height="50" align="center">총계</td>
<td width="11%" rowspan="2" height="50" align="center">합계</td>
</tr>
<tr height="25" bgcolor="#ffffff">
<td width="11%" align="center">A</td>
<td width="11%" align="center">B</td>
<td width="11%" align="center">C</td>
<td width="11%" align="center">D</td>
<td width="11%" align="center">E</td>
<td width="11%" align="center">F</td>
</tr>
</table>
위 테이블을 div로 짜야하는데요...ㅠㅠㅠ
테이블이 편해서 출력할때 종종 테이블을 사용하는데요..
갑작이 div 코드로 테이블을 만들어야 할 일이 급하게 생겼습니다.
고수님들 도와주시기 바랍니다.
부탁드립니다..
답변 3
table을 div 코드로 바꿀려면
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS Reference | display: table</title>
<style>
div {
border: 1px solid #bcbcbc;
}
.jb-table {
display: table;
width: 100%;
}
.jb-table-row {
display: table-row;
}
.jb-table-cell {
display: table-cell;
padding: 0px 20px;
height: 150px;
}
.jb-top {
vertical-align: top;
}
.jb-middle {
vertical-align: middle;
}
.jb-bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="jb-table">
<div class="jb-table-row">
<div class="jb-table-cell">
<p>Lorem</p>
</div>
<div class="jb-table-cell">
<p>Ipsum</p>
</div>
<div class="jb-table-cell">
<p>Dolor</p>
</div>
</div>
<div class="jb-table-row">
<div class="jb-table-cell jb-top">
<p>Lorem</p>
</div>
<div class="jb-table-cell jb-middle">
<p>Ipsum</p>
</div>
<div class="jb-table-cell jb-bottom">
<p>Dolor</p>
</div>
</div>
</div>
</body>
</html>
흠 조금 어렵네요
근데 왜 이걸 div로 코딩하려고 하시는거죠?
해당부분은 그냥 테이블로 사용하셔도 될 것 같은데요??