반응형
| 서울 | 경기도 | 인천 |
|---|---|---|
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
| 2,000 | 1,000 | 800 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
<meta http-equiv="imagetoolbar" content="no">
<meta name="viewport" content="width=device-width, iniital-scale=1.0">
<title> HTML 5일차 5 HTML 5.0 TABLE </title>
<!-- <link rel="stylesheet" type="text/css" href="./indexXX.css?v=2022071302"> -->
<style>
.tablecss{
position: relative;
width: 450px;
}
.tablecss > span {
display : block;
width: inherit;
height: 120px;
overflow: auto;
}
.tablecss > span > table{
display: block;
width: 100%;
}
.tablecss > span > table > caption {
position: absolute;
width : 430px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: gray;
top : 0;
left : 0;
z-index : 1;
}
.tablecss > span > table > thead > tr {
width : 430px;
position: absolute;
top : 20px;
left: 0px;
height: 25px;
background-color: white;
z-index : 1;
}
.tablecss > span > table > tbody {
position: absolute;
}
.tablecss > span > table > tbody > tr > td{
width: 150px;
}
</style>
</head>
<body>
<div class="tablecss">
<span>
<table border="1" cellpadding="0" cellspacing="0" summary="각 지역별 창고 현황">
<caption>각 지역별 창고 현황</caption>
<thead> <!-- 테이블 목차 제목 -->
<tr>
<th style="width : 150px;">서울</th>
<th style="width : 150px;">경기도</th>
<th style="width : 150px;">인천</th>
</tr>
</thead>
<tbody> <!-- 목차에 대한 데이터 -->
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
<tr>
<td>2,000</td>
<td>1,000</td>
<td>800</td>
</tr>
</tbody>
</table>
</span>
</div>
</body>
<script>
</script>
</html>반응형
'Front > HTML' 카테고리의 다른 글
| HTML Step 32 (0) | 2022.07.14 |
|---|---|
| HTML Step 31 (0) | 2022.07.14 |
| HTML Step 30 (0) | 2022.07.14 |
| HTML Step 29 (0) | 2022.07.14 |
| HTML Step 28 (0) | 2022.07.14 |