-
[멋쟁이사자처럼] 실습 - 수능표 만들기 (table)Front-end 개발 2023. 7. 13. 15:52
목차
1. 주제
2. 사용된 주요 태그와 속성들
3. 코드
1. 주제: 수능표 만들기
html/css 의 <table> 를 활용해서 수능표 만들기를 해본다.
단순히 아래 수능성적표를 만들면 된다.
과제 수행 결과 2. 사용된 주요 태그와 속성들
(1) <table>
- border-collapse: clollapse;
- table-layout: fixed;
(2) <caption>
- caption-side: bottom;
(3) <thead>
(4) <tbody>
(5) <tr>, <th>
- rowspan="2"
- colspan="2"
(6) <tfoot>
과제 힌트 이미지 3. 코드
<!DOCTYPE html> <html lang="ko-KR"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>수능표 만들기</title> <style> table { width: 90%; margin: 30px auto; border-collapse: collapse; table-layout: fixed; border: 2px solid black; font-size: 15px; line-height: 160%; } caption { caption-side: bottom; margin-top: 30px; font-weight: bold; } th, td { border: 1px solid black; text-align: center; } th { background-color: #eee; } tfoot { font-weight: bold; } </style> </head> <body> <!-- <h2>수능표 만들기</h2> --> <table> <caption>2023 학년도 대학수능능력시험 성적통지표</caption> <thead> <tr> <th>구분</th> <th rowspan="2">한국사 영역</th> <th>국어 영역</th> <th>수학 영역</th> <th rowspan="2">영어 영역</th> <th colspan="2">탐구영역</th> <th style="width: 10%;">제 2 외국어<br>/한문 영역</th> </tr> <tr> <th>선택과목</th> <th>화문과 작문</th> <th>확률과 통계</th> <th>생활과 윤리</th> <th>지구과학1</th> <th>독일어</th> </tr> </thead> <tbody> <tr> <th>표준점수</th> <td rowspan="2"></td> <td>131</td> <td>137</td> <td rowspan="2"></td> <td>53</td> <td>64</td> <td rowspan="2"></td> </tr> <tr> <th>백분위</th> <td>93</td> <td>95</td> <td>75</td> <td>93</td> </tr> </tbody> <tfoot> <tr> <th>등급</th> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </tfoot> </table> </body> </html>Github 링크
'Front-end 개발' 카테고리의 다른 글
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 선배 특강 (오전) (0) 2023.07.14 [멋쟁이사자처럼] 실습 - 버튼 만들기 (0) 2023.07.13 [멋쟁이사자처럼] 실습 - Flexbox Froggy (0) 2023.07.13 [멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 8일차 기록 및 복습 (0) 2023.07.12 [멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 7일차 기록 및 복습 (0) 2023.07.11