표를 만들어주는 테이블 태그를 배우다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<!-- 테이블 태그 <table>: 테이블을 만들겠다고 선언 -->
<table border="1px solid black">
<!-- table header <th>: 표의 헤더부분, Bold, 가운데 정렬 -->
<tr>
<th>메뉴</th>
<th colspan="2">가격과 장소</th>
</tr>
<!-- 테이블의 한 줄 (행)을 생성: tr 태그 -->
<tr>
<!-- 테이블의 한 칸 (열), 데이터를 넣어주는: td 태그 -->
<!-- alt + shift + 아래 방향키: 아래로 복사하기 -->
<td>아메리카노</td>
<td rowspan="2">2000</td>
<td>Take Out</td>
</tr>
<!-- 표 병합 기능:
1) 위, 아래를 병합: table row를 병합
-> rowspan="병합할 크기" 속성자리에 들어감
2) 좌, 우를 병합
-> colspan="병합할 크기" 속성자리에 들어감-->
<!-- tip! tr>td*3 -->
<tr>
<td>딸기 스무디</td>
<td>Here</td>
</tr>
</table>
<table border="2px solid black">
<tr bgcolor="yellow">
<td>이름</td>
<td colspan="2">성별/주소</td>
<td>비고</td>
</tr>
<tr>
<td>황해도</td>
<td>남자</td>
<td>전주</td>
<td rowspan="4"></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>
</table>
<h3>실습</h3>
</body>
</html>
table 태그 안에 tr 태그로 줄을 만들고 그 안에 td 태그로 1칸씩 나눈다.
병합하고 싶을 때는 rowspan 속성값으로 세로 병합, colspan 속성값으로 가로 병합할 수 있다.
'Front-End > HTML' 카테고리의 다른 글
| [HTML] Ex08_회원가입 실습.html (0) | 2023.06.10 |
|---|---|
| [HTML] Ex07_Form.html (0) | 2023.06.10 |
| [HTML] Ex05_앵커태그.html (0) | 2023.06.10 |
| [HTML] Ex04_이미지태그.html (0) | 2023.06.10 |
| [HTML] Ex03_글자태그.html (0) | 2023.06.10 |
