Jade_o.o
[html] 04 - table 만들기 본문
HTML Table 만들기: 기초부터 심화까지
HTML에서 표(table)를 만들고 스타일을 적용하는 것은 웹 개발의 기본 중 하나이다.
간단한 표부터 복잡한 표까지 코드를 통해 HTML 테이블 작성 방법을 알아보자.
1. 간단한 테이블 만들기
가장 기초적인 테이블은 <table>, <tr>, <td> 태그를 사용하여 만들 수 있습니다. 아래는 3x3 크기의 간단한 표이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table 만들기</title>
</head>
<body>
<table border="1" width="150" height="150" align="center" bgcolor="blue" bordercolor="red">
<caption>
<h3>table</h3>
</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
=> html 코드 실행 시 결과창
2. 가격표 만들기
가격표처럼 정보를 표현하는 테이블도 자주 사용됩니다. 아래는 메뉴와 가격을 표시하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가격표 만들기</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20">
<caption><h3>가격표</h3></caption>
<tr>
<th>메뉴</th>
<th>가격</th>
<th>비고</th>
</tr>
<tr>
<td>국물떡볶이</td>
<td>50000</td>
<td>2인 이상 주문 가능</td>
</tr>
<tr>
<td>참치김밥</td>
<td rowspan="2">4000</td>
<td></td>
</tr>
<tr>
<td>치즈김밥</td>
<td></td>
</tr>
<tr>
<td colspan="3">순대 (품절)</td>
</tr>
</table>
</body>
</html>
| 메뉴 | 가격 | 비고 |
|---|---|---|
| 국물떡볶이 | 50000 | 2인 이상 주문 가능 |
| 참치김밥 | 4000 | |
| 치즈김밥 | ||
| 순대 (품절) | ||
=> html 코드 실행 시 결과창
결론
HTML을 사용하여 간단한 표부터 가격표까지 다양한 테이블을 만드는 방법을 이행해보았습니다.
표를 효과적으로 활용하면 웹 페이지의 레이아웃을 구성하고 정보를 시각적으로 전달하는 데 도움이 되어,
계속해서 HTML과 CSS를 공부하여 더 다양하고 멋진 표를 만들어보아야겠다!
'HTML' 카테고리의 다른 글
| [html] 06 - 기본 태그 사용하기 실습-카페 음료 문서 작성 (0) | 2024.01.10 |
|---|---|
| [html] 05 - tag 사용하기 (1) | 2024.01.10 |
| [html] 03 - form 구성 태그 (0) | 2024.01.10 |
| [html] 02 - semantic 태그 사용 (0) | 2024.01.10 |
| [html] 01 - div style, span style (0) | 2024.01.10 |