목차
접기
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
table tr {
text-align: center;
}
table {
/* 표의 테두리와 셀의 테두리 간격을 어떻게 처리할지 지정하는 방법 */
/* collapse : 표의 테두리와 간격을 없애는 설정 */
/* seperated : 표의 테두리와 간격을 두는 설정 */
border-collapse: collapse;
}
th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>분류</th>
<th>항목</th>
</tr>
<tr>
<!-- rowspan은 열병합이 일어난다. -->
<td rowspan="3">과일</td>
<td>바나나</td>
</tr>
<tr><td>딸기</td></tr>
<tr><td>파인애플</td></tr>
<tr>
<td rowspan="2">채소</td>
<td>양파</td>
</tr>
<tr><td>배추</td></tr>
</table>
<br>
<table>
<tr>
<th>분류</th>
<th>항목</th>
</tr>
<tr>
<!-- rowspan은 열병합이 일어난다. -->
<td rowspan="3">과일</td>
<td>바나나</td>
</tr>
<tr><td>딸기</td></tr>
<tr><td>파인애플</td></tr>
<tr>
<td rowspan="2">채소</td>
<td>양파</td>
</tr>
<tr><td>배추</td></tr>
</table>
</body>
</html>border-collapse: collapse; 속성값을 주게 되면th, td에 border를 주어야 한다.
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| form 데이터 전달을 위한 기초 개념 (0) | 2021.06.01 |
|---|---|
| 테이블 병합 연습 두 번째 (0) | 2021.05.31 |
| 중첩 태그 사용 예시 (0) | 2021.05.31 |
| video 태그 재생 전 이미지 삽입하는 방법(썸네일 만드는 방법) (0) | 2021.05.31 |
| 태그 종류, video, img, source, audio 등 (0) | 2021.05.31 |