selfstarter

Html Table 구조 본문

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>

 

'Web > Html' 카테고리의 다른 글

리베하얀님 HTML4, CSS1,2, 전체 초기화 CSS파일 정리  (0) 2019.12.29
line-height 줄의 높이를 지정하는 속성  (0) 2019.11.26
WEB GET, POST 차이  (0) 2019.10.28
dataTable 데이터 삭제 후 기존 페이지 유지  (0) 2019.07.12
IE의 caching이슈  (0) 2019.07.02
'Web/Html' Related Articles more
Comments