Web/Html
Html Table 구조
selfstarter
2019. 11. 1. 15:11
Html Table 구조 정리
<colgroup> : 열을 그룹화해서 속성을 적용시킨다. 각 열마다 너비나 배경 style 지정할 수 있다.
<thead> : 행을 그룹화시킨다. 테이블의 열의 제목을 선언할 때 사용. 한번만 선언 가능하다
<tbody> : 행을 그룹화시킨다. 여러번 선언이 가능하다.
<tfoot> : 행을 그룹화시킨다. 한번만 선언 가능하다
rowspan : 행을 합칠 개수(행끼리 합치므로 세로로 합친다)
colspan : 열을 합칠 개수(열끼리 합치므로 가로로 합친다)
<tr> : table row의 약자. 한 줄을 만든다
<th> : table head의 약자. <thead>태그 안에 <tr>안에서 사용된다. 즉 테이블 각 열의 제목이 된다.
<td> : table data의 약자.<tbody>태그 안에서 <tr>안에서 사용된다.
Code
<script>
$(function(){
$('#table input[type=checkbox]').on("click", function(){
var isChecked = $(this).is(":checked");
$("input:checkbox[name]").each(function(){
this.checked = isChecked;
});
});
});
</script>
<style type="text/css">
.table-style {
width: 70%;
margin:0 auto; /* center */
text-align:center;
border: 1px solid #44ff00;
border-collapse : collapse; /* 테이블 간격 없애기 */
}
th, td {
border: 1px solid #44ff00;
padding : 1%; /* 테두리와 안에 내용 사이의 간격 */
}
</style>
</head>
<body>
<div id="table">
<form></form>
<table class="table-style">
<colgroup>
<col width="10%">
<col width="40%" style="background-color:red">
<col width="30%">
<col width="20%">
</colgroup>
<thead>
<tr>
<th><input type="checkbox" name="checkbox-all"></th>
<th>name</th>
<th>price</th>
<th>discount</th>
</tr>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkbox"></td>
<td>pencli</td>
<td colspan="2">500</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"></td>
<td>eraser</td>
<td rowspan="2">1000</td>
<td>0%</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"></td>
<td>pen</td>
<td>10%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">result</td>
<td>2500원</td>
<td>10%</td>
</tr>
</tfoot>
</table>
</div>