Colspan, Rowspan
HTML5 Colspan, Rowspan
HTML5 Table의 colspan과 rowspan으로 위의 이미지처럼 코딩할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Table Example</title>
<style>
.type-table {
width: 50%;
border-collapse: collapse; /* 표와 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 처리 */
}
.type-table-head {
background-color: #a4a4a4;
height: 29px;
text-align: center;
font-size: 9px;
color: #fff;
line-height: 1.2;
font-weight: 300;
}
.border {
border: 2px solid #fff;
}
.vertical-text {
word-wrap: break-word;
background-color: #a4a4a4;
font-size: 11px;
color: #fff;
line-height: 1.45;
text-align: center;
font-weight: 300;
}
.td-type {
background-color: #ddd;
height: 40px;
font-size: 9px;
line-height: 1.33;
color: black;
text-align: center;
}
.active {
background-color: #ddd;
}
.no-border {
border: none;
}
.gray {
background-color: rgba(164, 164, 164, 0.1);
}
.nFit {
float: right;
color: #000;
margin-right: 40px;
font-size: 12px;
line-height: 1.33;
font-weight: 300;
}
.fit {
color: #333;
line-height: 1.33;
font-size: 12px;
margin-left: 60px;
font-weight: 300;
}
</style>
</head>
<body>
<!-- colspan: 열 합치기 -->
<!-- rowspan: 행 합치기 -->
<table class="type-table">
<tbody>
<tr class="type-table-head">
<td colspan="3" rowspan="2" width="30%" class="border">구분</td>
<td colspan="6" class="border">투자자성향</td
</tr>
<tr class="type-table-head">
<td class="border">Column<br />1</td>
<td class="border">Column<br />2</td>
<td class="border">Column<br />3</td>
<td class="border">Column<br />4</td>
<td class="border">Column<br />5</td>
<td class="border">Column<br />6</td>
</tr>
<tr>
<td width="10%" rowspan="6" class="vertical-text border">
H<br />T<br />M<br />L<br /> <br />T<br />E<br />S<br />T<br />
</td>
<td colspan="2" class="td-type border">Row<br />1</td>
<td class="active"></td>
<td colspan="5" class="gray"></td>
</tr>
<tr>
<td colSpan="2" class="td-type border">Row<br />2</td>
<td colspan="2" class="active no-border"></td>
<td colspan="4" class="gray">
<span class="nFit">NO</span>
</td>
</tr>
<tr>
<td colspan="2" class="td-type border">Row<br />3
</td>
<td colspan="3" class="active"></td>
<td colspan="3" class="gray"></td>
</tr>
<tr>
<td colspan="2" class="td-type border">Row<br />4</td>
<td colspan="4" class="active">
<span class="fit">YES</span>
</td>
<td colspan="2" class="gray"></td>
</tr>
<tr>
<td colspan="2" class="td-type border">Row<br />5
</td>
<td colspan="5" class="active"></td>
<td colspan="1" class="gray"></td>
</tr>
<tr>
<td colspan="2" class="td-type border">Row<br />6</td>
<td colspan="6" class="active"></td>
</tr>
</tbody>
</table>
</body>
</html>
댓글
댓글 쓰기