표(Table) - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 표(Table)
    learn
    Practice
    learn
    08 테이블과 리스트
    표(Table)

    보통 컴퓨터로 문서를 작성할 때 표는 매우 유용한 도구로 사용됩니다. 표는 데이터를 깔끔하고 효율적으로 보기 좋게 정리할 수 있는 정리 방식 중 하나 입니다.

    위와 같이 웹에서도 데이터를 표 형식으로 정리해야 할 때가 종종 있습니다. HTML로 표를 생성하기 위해선 어떤 태그를 사용해야 할까요? 바로 <table> 태그 입니다. <table> 태그는 지금껏 배운 태그와 그 사용법이 조금 다릅니다. 테이블 태그는 좀 더 정형화된 형식과 태그가 있으며, 이를 조합해야 우리가 원하는 올바른 형태의 표를 만들 수 있습니다.


    테이블의 구조


    먼저 일반적인 테이블은 어떻게 구성되어 있는지 살펴본 뒤, HTML에서 표가  만들어지는 방식에 대해 이해하고 사용해 보겠습니다. 표의 일반적인 구성은 아래와 같습니다.

    • 전체를 담고 있는 표
    • 데이터를 담은 데이터 셀
    • 각 열의 제목을 담은 제목 셀
    • 각 행

    이 구성을 HTML 코드로 바꾸면 다음과 같습니다.

    위 코드에서 <th>, <td>, <tr>은 각각 table heading, table data, table raw를 축약한 태그입니다. 이제 테이블 태그를 한 번 만들어 볼까요? 먼저 표를 담을 <table> 태그를 생성합니다.

    그 다음 <table> 태그 안에 원하는 행의 개수만큼 <tr>을 생성합니다.

    원하는 열의 개수만큼 <td> 혹은 <th><tr> 태그 내부에 채워 넣으면 됩니다. 

    여기서 테이블을 조금 변형해보겠습니다. 왼쪽에 표 제목이 있는 표를 만들고 싶다면 다음과 같이 코드를 작성하면 됩니다.

    행(<tr>)을 기준으로 테이블 태그를 작성해야 조금 편하게 작성할 수 있습니다.


    테이블 태그의 속성


    테이블 태그에는 두 열 혹은 두 행을 차지하게 하는 속성이 있습니다. 바로 rowspan과 colspan입니다.

    • rowspan="숫자"는 "숫자"만큼 셀이 행을 점유합니다.
    • colspan="숫자"는 "숫자"만큼 셀이 열을 점유합니다.

    이렇게 colspan속성을 이용하여 직업 행에 위치한 '대학생'이라는 두 개의 셀이 병합했습니다. 만약 그렇게 보이지 않는다면 이는 셀 테두리가 없고 좌측으로 글씨가 정렬되었기 때문입니다. 실제로는 두 셀이 병합되어 있다는 점 참고하시기 바랍니다.

    현재 우리가 아는 표의 모습을 생각했겠지만 아마 실제 브라우저에서는 테두리도 없는 표 일 것입니다. border라는 속성을 이용하여 테두리를 넣을 수도 있지만, 앞에서 말했듯이 반드시 HTML과 CSS는 그 쓰임을 분리하는 것이 더 좋기 때문에 이 방법은 쓰지 않는 것을 권장합니다.

    이로써 테이블에 대해 배웠습니다. 직접 데이터를 다양하게 구성해보고 모양도 바꿔보며 실습해보세요!

    Practice

    표의 구성을 더욱 깔끔하게 보기 위해 CSS가 적용되어 있는 상황입니다. 실제 HTML의 표는 아무것도 없이 위치만 배치됩니다. 이론 내용을 찬찬히 따라가봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)