공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

테이블샘플

serpiko 2014. 1. 16. 10:49

   테이블샘플


HTML 테이블 직접 코딩해서 만든 샘플. 


CSS를 보면 DIVision안에 코드는 명시적으로 직접 선언되었기 때문에, 미세하겠지만 빠른 퍼포먼스를 가진다.


css의 순서선택자 (first-child, last-child, nth-child(n)..) 을 사용하여 odd와 even 처리를 했다.


소스코드)


<html>
<head>
	<title>serpiko's 테이블 샘플</title>
	<meta charset="utf-8" />
	<style>
	/* first-child : 첫번째  */
	body #container {width:700px;background: #fff; overflow: hidden; border: 4px solid #006699; }
	body #container table { font-size:18px; border-collapse: collapse; width: 700px; } 
	body #container table thead tr th { padding: 15px 10px; }
	body #container table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F'); color:#FFFFFF; } 
	body #container table thead th:first-child { border: none; text-align:center; }

	/* nth-child(odd) : 홀수번째, nth-child(even) : 짝수번째, last-child : 마지막, nth-child(2) : 2번째 */
	body #container table tbody tr td{ padding: 15px 10px; color: #00557F; }
	body #container table tbody tr td:first-child { width:120px; border-left: none; text-align:right; }
	body #container table tbody tr:nth-child(odd) td { background: #FFF; }
	body #container table tbody tr:nth-child(odd) td:last-child {  border-left: 2px solid #E1EEF4; }
	body #container table tbody tr:nth-child(even) td { background: #E1EEf4; }
	body #container table tbody tr:last-child td { border-bottom: none; }
	</style>
</head>

<body>
	<!-- div -->
	<div id="container">

		<!-- table -->
		<table>

			<!--thead -->
			<thead>
				<tr><th colspan='2'>공연정보</th></tr>
			</thead>

			<!-- tbody -->
			<tbody>
				<tr>
					<td>공연/행사명</td>
					<td>2014년 새해맞이 국악한마당 “serpiko와 판소리”</td>
				</tr>
				<tr>
					<td>기간</td>
					<td>기간데이터</td>
				</tr>
				<tr>
					<td>시간</td>
					<td>시간데이터</td>
				</tr>
				<tr>
					<td>장소</td>
					<td>장소데이터</td>
				</tr>
				<tr>
					<td>가격</td>
					<td>관람료</td>
				</tr>
				<tr>
					<td>할인정보</td>
					<td>할인정보</td>
				</tr>
				<tr >
					<td>관람연령</td>
					<td>관람연령데이터</td>
				</tr>
				<tr>
					<td>제작</td>
					<td>제작데이터</td>
				</tr>
				<tr>
					<td>문의</td>
					<td>문의데이터</td>
				</tr>
				<tr>
					<td>공지사항</td>
					<td>공지사항</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

결과) 실제 iframe으로 삽입한 결과



실무) sql > php > javascript > html 로 데이터수신 표기


저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

SVG, HTML5, jQuery UI 데모페이지  (0) 2014.03.12
박스모델의 위치계산  (0) 2014.01.22
기본엘리먼트 작성하기 - nonCss  (0) 2013.11.26
Table  (0) 2013.11.20
HTML Escape Characters: Complete List  (0) 2013.11.15
댓글