지난 두번째 시간에 이어서 오늘도 역시 테이블(표)에 대해 소개를 할까 합니다.
이미지출처: 다음쇼핑
되도록이면 많은 내용을 한꺼번에 쭉~~~ 늘어놓지 않고 쉽게 살펴볼 수 있도록 간단한 포스팅으로 이어가고 있구요.
지난 글을 살펴보시려면 아래의 링크를 따라가시면 됩니다.
인터넷, 블로그활용팁:테이블에 대해 알아볼까요? - 2. 테이블태그의 구성
[블로그팁]테이블(표)을 티스토리에서 활용하자! - 1. 행과 열이란?
문서작성에서도 표를 사용할 때 행과 열이 일정한 갯수로 작성되는 경우가 있는 반면
행, 또는 열을 합쳐야 하는 경우도 많이 생기게 되죠? 마찬가지로 웹페이지에서도 테이블을 만들면서 행이나 열을 합쳐야 하는 경우가 자주 생기곤 합니다. 이럴 때 사용하는 테이블태그에 대해 설명 드릴게요.
복습편: 2x2 테이블 만들기
지난번에도 설명을 드렸지만 테이블에서 흔히 얘기하는 한칸이라는 것을 셀이라는 단어로 표현합니다.
그럼 복습먼저 해볼게요... 지난번에 설명드렸던 테이블태그의 기본 3요소를 이용해서 2x2(2행, 2열)의 테이블을 만들려면
어떻게 해야할까요?
| 1행1열 | 1행2열 |
| 2행1열 | 2행2열 |
직접 확인하면서 테스트 하실 수 있도록 아래의 태그연습장 링크를 클릭하시구요.
태그연습장으로 이동~~!!!
어때요? 맞게 작성하셨나요?
그럼 이 2x2 테이블을 기본으로하는 가로셀을 합치는 태그와 세로셀을 합치는 태그를 알아볼게요.
같은 행의 셀을 합치는 태그
우선 말로 하는 것보다 그림으로 설명드리는게 빠르겠죠?
이런 모양을 가능하게 하는 태그는 다음과 같습니다.
네모로 표시된 부분이 중요한데요. colspan이 가로(같은 행)의 셀을 합치는 태그이구요. 옆에 넣은 숫자 2는 두개의 셀을 합친다는 뜻입니다.
만약 2x3처럼 같은 행에 3개의 셀이 있는데 모두 합치고 싶다. 그러면 숫자를 3으로 넣으시면 됩니다.
| 가로 3개의 셀을 병합(colspan="3") | ||
같은 열의 셀을 합치는 태그
그럼 이번엔 세로 셀을 합치는 태그를 알아볼게요.
방법은 위와 크게 다르지 않은데요. 다만 사용하는 태그가 조금 달라지죠.
근데 세로셀을 합치는 태그는 rowspan을 사용합니다. 설명은 위와 마찬가지로 옆의 숫자가 합칠 셀의 수를 뜻합니다.
실제 활용 예
역시 눈으로 직접 확인하는게 빠르겠죠?
지금은 구글광고를 내렸지만 예전에 상단 구글광고를 적용하던 시기에 테이블을 이용해 광고를 정리하는 방법에 대해 포스팅을 했었습니다.
[블로그팁]티스토리에 구글광고(애드센스) 깔끔하게 정리하기!!
눈으로 확인하기 쉽도록 테두리를 보이게 한 것이었구요.
2x2테이블의 2행을 합친 모습입니다. 바로 키워드 광고가 삽입된 부분이죠.
이런 광고를 정리할 때도 사용되구요. 작은 배너등을 모을 때도 테이블을 이용하시면 깔끔하게 정리할 수 있습니다.
오늘은 여러개의 셀을 하나로 합치는 방법에 대해서 알아봤는데요. 조금 이해가 되시나요?
다음엔 테이블과 셀의 크기를 지정하는 방법에 대해서 설명드려볼까 합니다...
본문에도 말씀드렸다시피 한꺼번에 진도를 많이 나가면 괜히 어지럽기만 하고 머리에 들어오지 않잖아요?ㅎㅎㅎ
다음엔 테이블과 셀의 크기를 지정하는 방법에 대해서 설명드려볼까 합니다...
본문에도 말씀드렸다시피 한꺼번에 진도를 많이 나가면 괜히 어지럽기만 하고 머리에 들어오지 않잖아요?ㅎㅎㅎ
