<!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>
<!-- 1) 테이블을 만들겠다고 선언하는 공간 : table -->
<table border = "1px solid black">
<!-- 2) 테이블의 한 줄을 생성 : tr (table row) -->
<tr bgcolor="lightgreen">
<!-- 3) 테이블의 한 칸 데이터를 넣어주는 공간 td (table date)
3-1) th (table header) : 표의 헤더 부분을 작성
글자가 굵어지고 자동 가운데 정렬
-->
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<!-- td태그 세개 한 번에 적기 : td*3
tr 안에 td가 세 개 있는 걸 한 번에 적기 : tr>td*3
-->
<tr>
<td>수모킹</td>
<td>32</td>
<td rowspan="2">숙녀🦧</td>
</tr>
<tr bgcolor="pink">
<td>하원쨩</td>
<td>32</td>
</tr>
<tr bgcolor="lightblue">
<td colspan="2" align="center">강태우</td>
<td>남자</td>
</tr>
<!-- 병합이 가능하다 -->
<!-- 위/아래를 병합 => rowspan -->
<!-- 좌/우를 병합 => colspan -->
<!-- colspan = "병합하고 싶은 셀의 갯수" -->
</table>
</body>
</html>
<!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>
<!-- 팀원 소개하기 -->
<!-- 팀원 이름/성별/좋아하는 카페음료 -->
<!-- 조건1. 여자끼리 성별 칸을 합쳐주기 -->
<table border="1px solid purple">
<tr>
<th>이름</th>
<th>성별</th>
<th>음료</th>
</tr>
<tr>
<td>수모킹</td>
<td rowspan="2" align="center">여성</td>
<td bgcolor="brown">아아</td>
</tr>
<tr>
<td>현주현듀</td>
<td bgcolor="pink">요거트</td>
</tr>
<tr>
<td>안명</td>
<td rowspan="3" align="center">남성</td>
<td bgcolor="skyblue">물</td>
</tr>
<tr>
<td>승제</td>
<td bgcolor="yellow">환타</td>
</tr>
<tr>
<td>승광</td>
<td bgcolor="red">콜라</td>
</tr>
</table>
<table border="1px solid black">
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
<tr>
<td>주미리</td>
<td rowspan="2" colspan="2">모름</td>
</tr>
<tr>
<td>강미리</td>
</tr>
<tr>
<td colspan="2">강태우</td>
<td>남자</td>
</tr>
</table>
</body>
</html>
댓글