표 관련 태그 : table > tr(줄,행)/ caption(table의 제목) > td(칸,열) , th(table의 head를 구분지을 떄 사용
= text-align center랑 font-weight bold 기본적용)
표의 병합
colspan = "합쳐지는 행의 개수" 가로의 병합
rowspan = "합쳐지는 열의 개수" 세로의 병합
병합되는 행,열 주석으로 처리하든지 지우기
표의 구조(의미)
| table머리 | table머리 |
|---|---|
| table내용 | table내용 |
| table하단 | table하단 |
표 관련 스타일
border-collapse:collapse;
table과 td사이의 선값의 결합 유무를 결정하는 속성
seperate(기본값 - 틈이 생긴상태)
collapse(선사이의 틈을 병합) table 표현시 기본값
border-spacing: 20px 40px;
테두리와 셀들의 간격을 지정하는 값
2자리 입력 : 수평, 수직
패딩, 마진이 있어서 거의 사용 x
empty-cells:show;
빈셀의 보여지는 유무를 결정
hide (사라지게) / show ( 보이게)
vertical-align:middle;
수직에 대한 정렬- td칸은 middle이 기본값 top -위족 bottom - 아래쪽
명령은 쉬운데 만드는거 쥬낸 어려움 일단 아래처럼 여러번 연습하기
!<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<meta http-equiv="X-UA-Compatible" content = "ie=edge">
<title> Keat </title>
<link href="style%EC%97%B0%EC%8A%B5.css" rel="stylesheet" />
</head>
<body>
<div class="title">
<h4>셀트리온헬스케어(091990)</h4>
<p>체결시간 2020.09.22 15:59 기준</p>
</div>
<div id= "top">
<table class ="left">
<tr>
<td><h1><span>▼</span>90,700</h1></td>
<td><h4>전일대비<br/>등락율(%)</h4></td>
<td><span>▼</span>3,500<br/>-3.72%</td>
</tr>
</table>
<table class ="right">
<tr>
<th class="lnon">시가</th>
<th>고가</th>
<th>저가 </th>
<th class="rnon">거래량</th>
</tr>
<tr>
<td class="lnon">93.300</td>
<td>96,000</td>
<td>90,400</td>
<td class="rnon">1,657,273</td>
</tr>
</table>
</div>
<table id="tab">
<tr>
<th>실적발표</th>
<th>감사보고서</th>
</tr>
</table>
<table id="bor">
<tr>
<th>번호</th>
<th>보고서</th>
<th>첨부파일</th>
</tr>
<tr>
<td>1</td>
<td>셀트리온헬스케어 2020년 2분기 IR자료</td>
<td><button>PDF</button></td>
</tr>
<tr>
<td>2</td>
<td>셀트리온헬스케어 2020년 2분기 IR자료</td>
<td><button>PDF</button></td>
</tr>
<tr>
<td>3</td>
<td>셀트리온헬스케어 2020년 2분기 IR자료</td>
<td><button>PDF</button></td>
</tr>
<tr>
<td>4</td>
<td>셀트리온헬스케어 2020년 2분기 IR자료</td>
<td><button>PDF</button></td>
</tr>
<tr>
<td>5</td>
<td>셀트리온헬스케어 2020년 2분기 IR자료</td>
<td><button>PDF</button></td>
</tr>
<tr>
<td>6</td>
<td>셀트리온헬스케어 2020년 2분기 IR자료</td>
<td><button>PDF</button></td>
</tr>
</table>
</body>
</html>[업로드중..](blob:https://velog.io/ed128ee2-f37d-46ba-a7eb-2d243d65a88c)
css
*{padding:0; margin:0;}
li{list-style:none;}
header{
width:1000px;
height:100px;
margin:10px auto;
border:2px solid #000;
margin-top:100px;
}
header h1{
float:left;
width:200px;
line-height:100px;
text-align:center;
border-right:2px solid #000;
}
nav{
float:right
}
li{
float:left;
padding-left:20px;
padding-right:20px;
line-height:30px;
border:2px solid #000;
font-size:13px;
}
#wrap{
width:1000px;
margin:10px auto;
overflow:hidden;
}
section{
width:700px;
float:left;
overflow:hidden;
}
aside{
float:right;
width:280px;
overflow:hidden;
}
article{
padding:10px;
box-sizing: border-box;
margin-bottom:20px;
}
footer{
width:1000px;
height:100px;
margin:0 auto;
text-align:center;
border:2px solid #000;
line-height:100px;
}
개발자 지망생