오늘은 테이블에 대해 자세히 배우게 되었다.
테이블 경계선 넣기와 배경서식하는 방법등을 알게 되었다
1. KTX 열차표 예매 페이지 만들기
1-1) 결과
1-2) 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>테이블의 경계선</title>
<style>
table {
border-collapse: collapse;
width: 610px;/*표의 폭 넓이*/
}
table, td, th{
/*border-collapse: collapse;*/
border: solid 1px #ef9a9a;
}
tr {
height: 40px;
text-align: center;
}
#col1 {
width: 90px;
}
#col2, #col3 {
width: 80px;
}
#col4, #col5 {
width: 100px;
}
#jemok {
background-color: #ffedd2;
}
.trainnum{
background-color: pink;
color: #f1477b;
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<h2>KTX열차표 예매</h2>
<table>
<tr id="jemok">
<th>열차번호</th>
<th>출발</th>
<th>도착</th>
<th>특실</th>
<th>일반실</th>
<th>소요시간</th>
</tr>
<tr>
<td class="trainnum">175</td>
<td>서울<br>21:00</td>
<td>부산<br>23:44</td>
<td><img src="full.png"></td>
<td><img src="full.png"></td>
<td>02:44</td>
</tr>
<tr>
<td id="col1" class="trainnum">177</td>
<td id="col2">서울<br>21:30</td>
<td id="col3">부산<br>00:08</td>
<td id="col4"><img src="empty.png"></td>
<td id="col5"><img src="empty.png"></td>
<td>02:38</td>
</tr>
<tr>
<td class="trainnum">179</td>
<td>서울<br>22:00</td>
<td>부산<br>00:42</td>
<td><img src="empty.png"></td>
<td><img src="empty.png"></td>
<td>02:42</td>
</tr>
</table>
</body>
</html>
2. 영어 교재 안내 페이지 만들기
2-1) 결과
2-2) 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table {
width: 800px;
font-family: "돋움";
}
table, td, th{
/*border-collapse: collapse;*/
height: 50px;
border: solid 1px greenyellow;
font-weight: bold;
}
tr {
text-align: center;
}
#title{
height: 40px;
background-color: #eeeeee;
}
.col1 {
width: 80px;
}
.col2 {
width : 150px;
}
.col3 {
width: 150px;
}
.col4 {
width: 120px;
}
.col5 {
width: 100px;
}
</style>
</head>
<body>
<h3><img src="dd.png"> 영어 교재 안내</h3>
<table>
<tr id="title">
<th class="col1">수강레벨</td>
<th class="col2">코스 A</td>
<th class="col3">코스 B</td>
<th class="col4">수강기간</td>
<th class="col5">세부내용 보기</td>
</tr>
<tr>
<td>레벨1</td>
<td>Side by Side 1</td>
<td>American Headway 1</td>
<td>1개월</td>
<td><a href="#"><img src="img.png"></a></td>
</tr>
<tr>
<td>레벨2</td>
<td>Side by Side 2</td>
<td>American Headway 2</td>
<td>1개월</td>
<td><a href="#"><img src="img.png"></a></td>
</tr>
<tr>
<td>레벨3</td>
<td colspan="2">Exploring English 1</td>
<td>2개월</td>
<td><a href="#"><img src="img.png"></a></td>
</tr>
<tr>
<td>레벨4</td>
<td colspan="2">Exploring English 2</td>
<td>2개월</td>
<td><a href="#"><img src="img.png"></a></td>
</tr>
</table>
</body>
</html>'AfterSchool > html 방과후' 카테고리의 다른 글
| CSS: 버스표 예매 페이지와 회원가입 양식 만들기(0510) (0) | 2022.05.12 |
|---|---|
| CSS: 로그인폼 만들기(0421) (0) | 2022.05.10 |
| CSS: 박스와 경계선(0414) (0) | 2022.04.14 |
| CSS: 배경 색상&이미지 삽입(0412) (0) | 2022.04.12 |
| CSS : 클래스 선택자와 아이디 선택자(0407) (0) | 2022.04.07 |
