보통 스프레드시트나 워드프로세서에서 표를 만들던가 등등
문서를 다루는 프로그램에서 표를 다루게 되면 셀 합치기가 있습니다.
그것을 구현하는 방법에 대해서 다뤄보도록 하겠습니다.
셀을 합치기 위에서는 colspan, rowspan 두 가지의 속성을 이용합니다.
이 속성은 td 또는 th태그에 이용하면 됩니다.
예제를 통해서 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>테이블 태그</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="2">음식별 종류</th>
</tr>
</thead>
<tbody>
<tr>
<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>
</tbody>
</table>
</body>
</html>
이에 대한 출력 결과 입니다.
| 음식별 종류 | |
|---|---|
| 과일 | 복숭아 |
| 사과 | |
| 포도 | |
| 육류 | 닭고기 |
| 돼지고기 | |
다음과 같이 출력이 됩니다.
td태그에 colspan 태그에 값 만큼 오른쪽으로 칸을 더 차지하고,
td태그에 rowspan 태그에 값 만큼 아래쪽으로 칸을 더 차지하는 것 입니다.
셀 합치기를 통해서 표를 작성하게 되면 조금 더 복잡해져서 우선 표를 그려놓고 이를 차근차근히 소스로 구현을 해야할 것 입니다.
생각나는 표를 그대로 바로 옮기려고 하면 당장은 힘들 수 있으니,
여기선 어떤 속성을 넣고 여기는 어떤 속성을 넣어서 하면 되겠다~ 라는 것을 미리 짜놓으신 다음에
소스로 옮겨가면서 연습하시는 편이 좋습니다!
'프로그래밍 > HTML5' 카테고리의 다른 글
| [HTML5] 오디오 태그 (0) | 2016.08.05 |
|---|---|
| [HTML5] 공간 분할 태그 (0) | 2016.07.26 |
| [HTML5] 테이블 태그 (1) - 기본 (0) | 2016.07.22 |
| [HTML5] 주석 달기 (3) | 2016.07.20 |
| [HTML5] 목록 태그 (0) | 2016.07.20 |