본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

테이블 요소의 기본 구조

최초 작성일
최종 수정일
이번 시간에는...
HTML에서 테이블을 만들기 위한 table 태그에 대해 알아봅니다. 기본적으로 tr, th, td를 이용해서 테이블의 기본 구조는 어떻게 제작되는 지, 또한 테이블의 셀 병합은 어떻게 일어나는지 테이블의 코딩의 기초적인 방법을 알아봅니다.

이번에는 표를 만들 수 있는 table 요소에서 기본적인 요소들과 구조에 대해서 알아보도록 하겠습니다.

웹 표준이 잘 지켜지지 않았던 예전에는 table 요소를 레이아웃의 용도로 많이 사용했습니다만, 여러분들은 table을 정말 의미적으로 도표일 때 사용하시기 바랍니다. 레이아웃을 위해서 사용할 경우, 접근성에 문제가 생길 수 있습니다.

기본적인 도표는 다음과 같은 형태일 것입니다.

두 학생의 성적 비교
이름 나이 점수
철수 23세 70점
영희 21세 89점
기본적인 도표 예시

저기서 일단 table 요소를 만든 뒤, 행을 tr로 만든 뒤, td로 셀을 표현합니다. 위의 도표는 다음과 같이 작성할 수 있습니다.

여기서 보이는 데로, 행(tr)을 먼저 만들고 그 안에 셀(td)을 만들어 주었습니다.

맨 위에 이름, 나이, 점수 부분과 같이 해당 테이블의 헤더 셀(제목 셀)은 th 요소를 사용합니다.

th와 td에는 모든 요소가 들어갈 수 있지만, tr에는 th나 td만 들어갈 수 있습니다.

colspan과 rowspan

표를 만들다 보면, 다음과 같이 셀을 병합하는 형태를 만들 필요가 있습니다.

참가자 점수
이름 나이
홍길동 19세 62점
colspan과 rowspan이 쓰인 예

여기서 보면, 두 번의 셀 병합이 있습니다. 하나는 '참가자' 셀이 가로로 두 칸을 차지하고, 다른 하나는 '점수' 셀이 세로로 두 칸을 차지하고 있습니다.

이럴 때 사용하는 것이 colspan 속성과 rowspan 속성입니다. 여기서 'colspan'은 가로로 합치는 것, 다시 말해 열(col)들을 병합(span: 걸치다)하는 속성이고, 'rowspan'은 세로로 합치는 것, 행(row)들을 병합하는 속성입니다. 이 속성은 th 또는 td에 사용할 수 있으며, 속성 값으로 병합할 셀의 숫자를 적습니다. 다음과 같이 사용합니다.

colspan에 속성 값을 2를 주어 두 개의 같은 행의 셀을 병합했습니다. 만약 다음과 같은 형태의 표를 만든다면 그 다음과 같이 작성합니다.

a b
c
colspan 예시

여기서 눈 여겨 봐야 할 것은 병합된 셀의 수만큼 같은 행(tr) 안에 셀을 덜 적어 준 것입니다.

그 다음은 rowspan 예시 입니다.

a b
c
d
rowspan 예시

여기서 참고 해야 할 부분은 병합된 셀의 수 만큼 다음 행(tr)의 셀 개수가 하나씩 줄어들었다는 점 입니다.

colspan과 rowspan은 표가 복잡해 질 수록, 조금 헷갈릴 수 있습니다. 하지만, 표를 몇 번 직접 작성 하다 보면, 금방 익숙해질 것 입니다.

요점 정리
  • 테이블 요소들은 레이아웃이 아닌 도표의 의미가 필요할 때에만 사용.
  • 테이블 요소들은 table 요소안에 포함.
  • tr은 행, td는 셀.
  • tr이 먼저 만들어지고, 그 안에 td가 들어가는 방식.
  • 헤더, 제목이 되는 셀은 th 사용.
  • colspan 속성은 열 병합, rowspan 속성은 행 병합.
  • 셀 병합을 할 경우, 병합된 개수 만큼의 셀은 뺄 것.

이 글이 유용하셨다면 친구들에게 공유 해주세요.