1. colspan 속성 - 열 합치기
기본형 : <td colspan="합칠 셀의 개수"> 내용 </td>
<th colspan="합칠 셀의 개수"> 내용 </th>
- colspan 속성의 col은 영어로 '열'을 뜻하는 column의 앞글자 col을 사용한 것입니다. 즉, 열을 합치고자할 때 colspan속성을 사용합니다.
다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다
<사진 1.1>
우선 <사진 1.1>의 좌측에 있는 표를 만드는 코드입니다.
|
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 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>colspan 속성 사용 방법</title>
</head>
<body>
<table border="1" width="250" height="100">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html> |
cs |
<사진 1.2>
<사진 1.2>의 table속성을 보면 width속성과 height속성이 있습니다. 이 속성을 설정해주어야 커다란 빈 공간으로 셀이 생성됩니다.
width속성과 height속성을 사용하지 않으면 아주 작은 셀로 표가 생성됩니다. 다음은 결과 화면입니다.
<사진 1.2 결과 화면>
이제 이 표의 2행2열 부분의 우측부분을 하나의 셀로 결합시켜보겠습니다.
|
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 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>colspan 속성 사용 방법</title>
</head>
<body>
<table border="1" width="250" height="100">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html> |
cs |
<사진 1.3>
<사진 1.3> 코드는 2행2열의 <td>코드 내부에 colspan 속성과 속성 값 3을 작성하였습니다. 열을 통합 시킬 것이므로 colspan 속성을 사용했으며
3개의 셀을 합칠 것이므로 속성 값을 3으로 설정했습니다. 다음은 결과 화면 입니다.
<사진 1.3 결과 화면>
2. rowspan 속성 - 행 합치기
기본형 : <td rowspan="합칠 셀의 개수"> 내용< /td>
기본형 : <th rowspan="합칠 셀의 개수"> 내용< /th>
- rowspan 속성의 row는 영어로 '행'을 뜻하는 row 입니다. 즉, 행을 합치고자할 때 rowspan속성을 사용합니다.
다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다
.
<사진 1.4>
<사진 1.4>의 좌측에 있는 표는 위에서 이미 작성하였으므로 바로 rowspan 속성을 사용하여 셀을 합치는 코드를 작성해보고 결과를 확인해보겠습니다.
|
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 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>rowspan 속성 사용 방법</title>
</head>
<body>
<table border="1" width="250" height="100">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html> |
cs |
<사진 1.5>
3개의 행을 합칠 것이므로 rowspan 속성을 사용하였으며, 속성 값으로 3을 설정했습니다. 만약 2개의 행을 합치고자 한다면 속성 값을 2로 주면 됩니다.
그리고 2행과 3행 부분을 보면 <td></td>속성이 4개에서 3개로 수정되어 있습니다. 이유는 셀을 합치고 결과적으로 표현되는 표는 <사진 1.4>의
우측 표와 같이 3개의 셀이므로 <td></td>속성을 3개를 작성합니다. 다음은 결과 화면입니다.
<사진 1.5 결과 화면>
'Web Basic > HTML5' 카테고리의 다른 글
| [HTML5] <button> 태그 이해하기 (0) | 2019.12.03 |
|---|---|
| [HTML5] <caption>, <figcaption>태그 사용 방법 (0) | 2018.03.20 |
| [HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0) | 2018.03.14 |
| [HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0) | 2018.03.14 |
| [HTML5] <ul>, <ol>, <li>태그 사용 방법 (0) | 2018.03.12 |