이번에는 <table>태그에 대해서 정리해보도록 하겠습니다.
<table>태그는 일반적으로 표를 만들 때 사용하는 태그 입니다.
table
row : 행
column : 열
| tr | 테이블의 행을 만드는 태그 |
| th | 테이블의 헤더부분 |
| td | 테이블의 열을 만드는 태그(본문) |
1. coluspan (열을 병합)
2. rowspan (행을 병합)
위와 같은 태그들을 이용하여 간단한 표를 만들어 보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table>
<table border="1">
<th>과일</th>
<th>음료</th>
<!-- 첫 번째 행 -->
<tr>
<td>사과</td>
<td>사이다</td>
</tr>
<!-- 두 번째 행 -->
<tr>
<td>복숭아</td>
<td>콜라</td>
</tr>
</table>
</table>
</body>
</html>
이렇게 만든 표에다가 디자인을 줄 수 있는데요!
그럼 디자인 속성에 대해 봅시다
# 디자인 속성
| width | 가로 |
| height | 세로 |
| border | 테두리 |
| bordercolor | 테두리 색 |
| bgcolor | 배경색 |
| align | 정렬 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" bordercolor="black" align="center">
<tr bgcolor="pink">
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
<!-- 1교시 -->
<tr width="100px" height="50px" align="center" bgcolor="gold">
<td>국어</td>
<td>JAVA</td>
<td>WSM</td>
<td>영어</td>
<td>AI</td>
</tr>
<!-- 2교시 -->
<tr align="center" bgcolor="yellow">
<td>AI</td>
<td>JAVA</td>
<td>수학</td>
<td>체육</td>
<td>영어</td>
</tr>
<!-- 3교시 -->
<tr align="center" bgcolor="skyblue">
<td>과학</td>
<td>영어</td>
<td>체육</td>
<td>도덕</td>
<td>한자</td>
</tr>
<!-- 4교시 -->
<tr align="center" bgcolor="orange">
<td>수학</td>
<td>음악</td>
<td>국어</td>
<td>사회</td>
<td>한국사</td>
</tr>
</table>
</body>
</html>
디자인 속성을 바탕으로 색조합을 하였는데.음..디자인 감각을 더 키워야겠다는 생각이 들게만드는 시간표인 것 같습니다ㅎㅎ
마지막으로 랭킹 테이블도 만들어보았습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OO 랭킹</title>
<style>
td, th{
border: 1px solid black;
}
</style>
</head>
<body>
<table align="center" border="2">
<tr align="center">
<th>순위</th>
<th>이름</th>
<th>포인트</th>
</tr>
<tr align="center">
<td>1</td>
<td>JYB</td>
<td>420</td>
</tr>
<tr align="center">
<td>2</td>
<td>자바칩</td>
<td>254</td>
</tr>
<tr align="center">
<td rowspan="2">3</td>
<td>김가을</td>
<td rowspan="2">30</td>
</tr>
<tr align="center">
<td>이종연</td>
</tr>
<tr align="center">
<td colspan="3">자료제공000</td>
</tr>
</table>
</body>
</html>
4번째 줄을 보시면 rowspan="2"를 사용한 것을 보실 수 있습니다.
오늘은 table까지 복습을 해봤다.
사실 1학기동안 배웠던 개념들이 뒤죽박죽인 터라 아직까지도 헷갈리는 것들이 많았다. 그치만 한번 보고 정리를 하니 내 것으로 만든 기분이다. 수업시간에 태그들을 따라치기만하는 것은 의미가 없다고 생각한다. 태그들을 이해하고 직접 자신만의 작품을 만들어보는 것이 중요하다. HTML 수업 후 거기에서 끝내는 것이 아니라 다시 한번보고 배운 것을 토대로 다양한 사이트나 작품들을 구상해보고싶다. 더 창의적이고 실력있는 개발자가 되기위해 이런 학습방법으로 이어저 나가고자 한다! 내일은 CSS에 대해서 공부하고 다시 정리해보는 시간을 가져야겠다!
'WEB' 카테고리의 다른 글
| CSS와 박스 모델 (0) | 2024.02.22 |
|---|---|
| 로그인 페이지 만들기 (0) | 2023.08.08 |
| form태그 (0) | 2023.07.31 |
| HTML 정리(1) (0) | 2023.07.24 |
| HTML로 시간표& 로그인 페이지 접속하기 페이지 만들기 (0) | 2022.02.17 |
