728x90
반응형
[HTML&CSS 스터디] 12. 표 만들기 <table>,<tr>, <th>, <td>
1. 표를 만드는 데 필요한 태그
| 태그 | 설명 |
| <table> | 표를 나타내는 태그. 전체 표를 감싼다. |
| <tr> | Table row의 약자로, 한 행을 나타낸다. |
| <th> | Table header의 약자로, 제목 셀을 나타낸다. |
| <td> | Table data의 약자로, 표의 데이터 셀을 나타낸다. |
2. 표 만들어보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고양이의 일상</title>
<meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
</head>
<body>
<table border="1">
<tr>
<th>음식 명</th>
<th>가격</th>
</tr>
<tr>
<td>짜장면</td>
<td>5,000원</td>
</tr>
<tr>
<td>짬봉</td>
<td>6,000원</td>
</tr>
</table>
</body>
</html>
3. 가로 셀 병합하기 : <colspan>
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고양이의 일상</title>
<meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
</head>
<body>
<table border="1">
<tr>
<th colspan="2">북경반점 메뉴판</th>
</tr>
<tr>
<td>짜장면</td>
<td>5,000원</td>
</tr>
<tr>
<td>짬봉</td>
<td>6,000원</td>
</tr>
</table>
</body>
</html>
3. 세로 셀 병합하기 : <rowspan>
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고양이의 일상</title>
<meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
</head>
<body>
<table border="1">
<tr>
<th colspan="2">북경반점 메뉴판</th>
</tr>
<tr>
<td rowspan="2">짜장면/짬뽕+미니 탕수육 세트</td>
<td>7,000원</td>
</tr>
<tr>
<td>8,000원</td>
</tr>
</table>
</body>
</html>728x90
반응형
'HTML,CSS, JS > HTML' 카테고리의 다른 글
| [HTML] 7. HTML 파일명 작성 규칙 (0) | 2024.07.01 |
|---|---|
| [HTML] 6. 폼 관련 태그 (0) | 2024.04.22 |
| [HTML] 5. 표(테이블) 만들기 (0) | 2024.04.15 |
| [HTML] 4. 링크 삽입하기 (0) | 2024.04.15 |
| [HTML] 3. 이미지 출력하기 (0) | 2024.04.14 |