간단하게 HTML <table> 태그를 활용한 표 만들기 실습을 해봤다.
1. HTML 표 만들기 (기본편)
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Basic Page</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="6">한국의 차</th>
</tr>
<tr>
<th rowspan="6">뿌리차</th>
<td>인삼차</td>
<th rowspan="9">과일차</th>
<td>수정과</td>
<th rowspan="5">잎차</th>
<td>뽕잎차</td>
</tr>
<tr>
<td>당귀차</td>
<td>유자차</td>
<td>감잎차</td>
</tr>
<tr>
<td>생강차</td>
<td>구기자차</td>
<td>솔잎차</td>
</tr>
<tr>
<td>칡차</td>
<td>대추차</td>
<td>국화차</td>
</tr>
<tr>
<td>둥글레차</td>
<td>오미자차</td>
<td>이슬차</td>
</tr>
<tr>
<td>마차</td>
<td>매실차</td>
<th rowspan="4">기타</th>
<td>두충차</td>
</tr>
<tr>
<th rowspan="3">곡물차</th>
<td>보리차</td>
<td>모과차</td>
<td>영지버섯차</td>
</tr>
<tr>
<td>옥수수차</td>
<td>산수유차</td>
<td>귤강차</td>
</tr>
<tr>
<td>현미차</td>
<td>탱자차</td>
<td>쌍화차</td>
</tr>
</table>
</body>
</html>2. 결과물 🎨
3. HTML 이력서 만들기 (활용편)
<!DOCTYPE html>
<html>
<head>
<title>이력서</title>
<style>
table {
padding: 5px 5px;
}
td {
border: 1.5px solid #000000;
text-align: center;
}
.td1 {
padding: 10px 10px;
}
.td2 {
padding: 1px 30px;
}
.td3 {
padding: 7px 10px;
}
.td4 {
padding: 1px 35px;
}
</style>
</head>
<body>
<table border="4">
<tr>
<th class="td1" rowspan="4" colspan="3">
<img
src="/Step02/Chun.png"
alt="춘식쓰"
width="180"
height="180"
align="center"
border="0"
/>
</th>
<th colspan="4">이력서</th>
</tr>
<tr>
<th class="td2">성명</th>
<td class="td4">춘식이</td>
<th class="td2">성별</th>
<td class="td4">여</td>
</tr>
<tr>
<th class="td2">생년월일</th>
<td class="td4">2015년 01월 10일</td>
<th class="td2">전화번호</th>
<td class="td4">010-1234-5678</td>
</tr>
<tr>
<th class="td2">주소</th>
<td colspan="3">서울시 춘식구 춘식동 춘식빌라 206호</td>
</tr>
<tr>
<th class="td3">년</th>
<th>월</th>
<th>일</th>
<th class="td3" colspan="3">학력 및 경력사항</th>
<th class="td3" colspan="3">직급</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="td3" colspan="3">카카오 입사</td>
<td class="td3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="td3" colspan="3">네이버 입사</td>
<td class="td3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="td3" colspan="3">라인 입사</td>
<td class="td3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="td3" colspan="3">카뱅 입사</td>
<td class="td3"></td>
</tr>
</table>
</body>
</html>
4. 결과물 🎨
5. 마치며 📜
대학교 1학년 때 웹 개발 관련 수업에서 홈페이지 만들기 과제를 해본 이래로, 정말 오랜만에 HTML, CSS, JS 코딩을 해봤다. (그때도 제대로 배우진 않았지만)
이력서 모양을 예쁘게 해보겠다고 디자인을 한땀 한땀 수정하면서 맞추다 보니, 어느새 몇 시간이 금방 흘렀다. 표 하나 만드는데 이렇게 많은 시간과 노력이 필요한데, 평소에 자주 이용하는 웹페이지들을 만드는 데는 대체 얼마나 많은 인력의 시간과 노력이 들어갈지 상상도 안 된다...
그래도 이렇게 한번 만들어 봤으니, 분명 나중에 크롤링하는 데 도움이 많이 될 것 같다 😊
더불어 난 디자인과 안 맞다는 걸 확실히 느꼈다... 😥😥 웹 퍼블리셔분들 존경합니다!!!
ImOk👌