HTML
[HTML] 테이블 태그 표 만들기, 행과 열 합치기
도하루박
2022. 9. 17. 13:44
반응형
테이블 표 만들기
<table> 테이블 생성시 사용하는 태그로 행과 열을 구분해서 사용해야 한다.
<tr> 행
<td>, <th> 열 <th>는 두껍게 강조되는 태그이다.
또한 <caption> 으로 표의 제목을 표시할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption>고객 정보</caption>
<tr>
<td>이름</td>
<td>나이</td>
<td>주소</td>
</tr>
<tr>
<td>홍길동</td>
<td>20</td>
<td>중곡동</td>
</tr>
<tr>
<td>이순신</td>
<td>22</td>
<th>문정동</th>
</tr>
</table>
</body>
</html>
행, 열 합치기
colspan : "합칠 열 개수"
좌에서 우로 합쳐지고 현재 행에만 적용된다.
rowspan : "합칠 행 개수"
현재 행과 아래 행이 합쳐지고 다음 행이 없으면 적용이 안된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption>고객 정보</caption>
<tr>
<td colspan="2">이름</td>
<td>주소</td>
</tr>
<tr>
<td rowspan="2">홍길동</td>
<td>20</td>
<td>중곡동</td>
</tr>
<tr>
<td>22</td>
<th>문정동</th>
</tr>
</table>
</body>
</html>
반응형