JunO3O
테이블 태그
테이블 태그
2023. 3. 21. 03:00ㆍHTML
테이블 태그
ㅁ 표를 만들 때는 테이블 태그를 사용합니다. 테이블 태그는 아래와 같습니다.
| 태그 | 설명 |
| table | 표 삽입 |
| tr | 표에 행(table row) 삽입 |
| th | 표의 제목 셀(table heading) 생성 |
| td | 표의 일반 셀(table data) 생성 |
# 표 만들기
ㅁ table 태그를 사용하여 표를 만듭니다.
<!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> 식단표 만들기 </title>
</head>
<body>
<table>
</table>
</body>
</html># 표에 셀 추가하기
ㅁ table 요소를 만드는 tr 태그, th 태그, td 태그를 추가하여 표를 만듭니다.
<!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> 식단표 만들기 </title>
</head>
<body>
<table border="1"> <!-- border은 표의 테두리 두께를 지정하는 속성입니다. -->
<thead>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<tbody>
<tr>
<td> 점심</td>
<td> 삼겹살 </td>
<td> 제육 </td>
<td> 한식 </td>
<td> 짬뽕</td>
<td> 냉면</td>
</tr>
<tr>
<td> 저녁 </td>
<td> 육개장 </td>
<td> 돈까스 </td>
<td> 치킨 </td>
<td> 생선구이</td>
<td> 감자탕 </td>
</tr>
</tbody>
</table>
</body>
</html>
# 테이블 태그의 속성
ㅁ th 태그와 td 태그는 colspan 속성과 rowspan 속성을 사용해 표에서 차지하는 영역을 조절할 수 있습니다.
ㅁ colspan 속성을 사용하면 영역이 가로 방향으로 늘어납니다.
ㅁ rowspan 속성을 사용하면 영역이 세로 방향으로 늘어납니다.
| 태그 | 속성 | 설명 |
| table | border | 표의 테두리 두께 지정 |
| th, td | colspan | 셀의 너비 지정 |
| rowspan | 셀의 높이 지정 |
<!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> span 속성 사용하기</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2"> 과일, 채소 </th>
</tr>
<tr>
<th rowspan="3"> 과일 </th>
<td> 사과 </td>
</tr>
<tr><td> 배 </td></tr>
<tr><td> 오렌지 </td></tr>
<tr>
<th rowspan="4"> 채소 </th>
<td> 배추</td>
</tr>
<tr><td> 상추 </td></tr>
<tr><td> 치커리 </td></tr>
<tr><td> 깻잎 </td></tr>
</table>
</body>
</html>
