반응형
C#에서 데이터베이스에서 가져온 자료로 보고서를 만들 때, 이 테이블의 모양의 코드를 사용하기 위해서 남긴 글입니다.
테이블(table) 태그와 스타일을 사용하는 예
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse:collapse;
width:500px;
text-align:center;
}
table, td, th { border:solid 1px #cccccc; }
tr { height:40px; }
#table_title { height:30px; background-color: #F6F6F6; }
#col1, #col4 { width:90px; }
#col2, #col3 { width:60px; }
#col5 { width:80px; }
.center { text-align:center; }
</style>
</head>
<body>
<h2>KTX 열차 시간표</h2>
<table>
<tr id="table_title">
<th>열차번호</th>
<th>출발</th>
<th>도착</th>
<th>출발시간</th>
<th>소요시간</th>
</tr>
<tr>
<td id="col1" class="center">123</td>
<td id="col2">서울</td>
<td id="col3">부산</td>
<td id="col4">21:00</td>
<td id="col5">02:44</td>
</tr>
<tr>
<td class="center">125</td>
<td>서울</td>
<td>부산</td>
<td>21:30</td>
<td>02:38</td>
</tr>
<tr>
<td class="center">211</td>
<td>서울</td>
<td>부산</td>
<td>22:00</td>
<td>02:42</td>
</tr>
</table>
</body>
</html>
반응형
'HTML_CSS' 카테고리의 다른 글
| HTML5 최신 표준 태그 (0) | 2023.09.07 |
|---|---|
| (강의용) 텍스트 1 - 김소월 진달래꽃, 로렘입숨 (0) | 2023.09.06 |
| (HTML CSS) 버튼 만들기 (0) | 2023.06.09 |
| (HTML CSS) header footer 있는 3단 고정형 레이아웃 (0) | 2023.05.21 |
| (HTML CSS) 2단 레이아웃 예제 (0) | 2023.04.25 |