티스토리 뷰

[개발]프로그래밍/html5

[html5] colspan , rowspan - 표에서 열,행 합치기

좋은 블로그 2021. 1. 22. 13:08
1. 개념
colspan,rowspan - 표에서 열,행 합치기
colspan : 한 행에 여러 개의 열을 합쳐서 사용하고자 할 경우에 적용
rowspan : 한 열에 여러 개의 행을 합쳐서 사용하고자 할 경우에 적용
2. 태그
colspan,rowspan
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
td
{
border : 1px solid #000 ;
}
</style>
</head>
<body>
<table style =' border : 1px solid #000 ; width : 100% ' >
<tr>
1
<td colspan = "3" style =' background : yellow ' > 1행 1~3열 <td>
<td> 1행 4열 </td>
</tr>
<tr>
2
<td rowspan = "2" style =' background : green ' > 2~3행 1열 <td>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
<td> 2행 4열 </td>
</tr>
<tr>
3
<td> 3행 2열 </td>
<td> 3행 3열 </td>
<td> 3행 4열 </td>
</tr>
<tr>
<td> 4행 1열 </td>
<td> 4행 2열 </td>
<td> 4행 3열 </td>
<td> 4행 4열 </td>
</tr>
</table>
</body>
</html>
결과 화면
코드 설명
1
<td colspan = "3" > ....... </td>
표는 총 4행 4열을 만듭니다.
여기서는 colspan을 사용하여 열을 합치고 있습니다.
즉 3이라고 해서 3개의 열을 합쳐서 하나로 표시해 주고 있습니다.
따라서 4열을 채우기 위해 총 4번의 td 태그를 써야 하지만 여기서는 3개를 합치기 때문에 2개의 td 태그를 사용하게 됩니다.
2
<td rowspan = "2" > ....... </td>
rowspan은 행을 합치는 것을 말합니다.
행을 합치기 때문에 tr에 이 옵션을 쓰는가 싶을 수도 있지만 td에서 사용을 합니다.
여기서 보시면 rowspan 을 2로 설정했습니다. 그리고 4개의 열을 표시 하기 때문에 4번의 td 태그를 사용합니다.
3
<td > ....... </td>
위에서 rowspan으로 2를 설정하였습니다.
그러하기 때문에 여기는 td 하나가 빠지게 됩니다.
왜냐하면 위에서 2개의 행을 합친다고 했기 때문에 원래는 4개의 td 태그를 사용해서 내용을 채워야 하지만 rowspan 때문에 3번만 사용합니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] a - 링크와 앵커 사용하기  (0) 2021.01.28
[html5] img - 웹 브라우저에 이미지 표시  (0) 2021.01.25
[html5] <colgroup>,<col> - 표에서 열(col) 스타일 적용  (0) 2021.01.21
[html5] <thead>,<tbody>,<tfoot> - 표에서 제목,본문,요약 구분  (0) 2021.01.20
[html5] <caption>,<figcaption> - 표에다가 제목 만들어 표시  (0) 2021.01.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday