HTML 테이블 구조의 기초

표는 데이터를 조직된 형식으로 표시하는 데 중요한 역할을 합니다. 이 튜토리얼에서는 기본 HTML 표를 만드는 방법과 레이아웃 및 구조에 필요한 태그를 사용하는 방법을 배우게 됩니다.

단계별 안내

첫 번째 표를 만드는 것부터 시작해 보겠습니다! 먼저, 표의 기본 태그는 입니다. 이 태그는 전체 표를 감싸고 있습니다.

이제 한 줄을 추가해 보겠습니다. 각 줄은 태그로 정의되며, 이는 "table row"를 의미합니다. 이 줄에는 아직 데이터가 없으므로 현재 비어 있습니다. 각 줄은 여러 열을 수용할 수 있습니다.

이제 표에 데이터를 추가할 시간입니다. 이를 위해 우리는 -태그를 사용하고 적절한 값을 추가합니다. 첫 번째 이름이 "Jan", 이메일이 "support@programmierenlern.info", 생년월일이 1982년 6월 23일이라고 가정해 봅시다. 그러면 당신의 줄은 다음과 같아야 합니다:

이제 표가 더 나아졌는지 확인해 보세요. -과 -태그를 사용하여 원하는 만큼 줄을 추가할 수 있습니다. 다른 직원을 추가해 봅시다. 그의 이름을 "Joe Average"라고 하고 그의 이메일은 "joe@average.com"일 수 있습니다.

이제 표를 새로 고치면 표가 확장되고 입력한 모든 데이터가 보입니다. 구조가 중요하며, 이는 정보에 대한 명확한 개요를 제공합니다.

표의 끝에 저작권과 같은 바닥글을 추가하고 싶다면 어떻게 해야 할까요? 여기서 colspan이 사용됩니다. colspan을 사용하면 셀이 몇 개의 열을 차지할지를 지정할 수 있습니다. 따라서 저작권을 모든 세 열 위에 놓으려면 이렇게 작성해야 합니다: Copyright 2015 coding-geeks.de.

이 바닥글을 추가한 후에는 표시를 확인해야 합니다. 바닥글이 열 아래에 위치하여 데이터를 명확하게 표시해야 한다는 것이 아이디어입니다. 이 경우 바닥글은 자체 열이 없으므로 다른 세 열 위에 있어야 합니다.

이제 colspan을 2로 줄이면 두 번째 힌트를 추가할 수 있습니다. "Coding Geeks"를 새 열에 표시하고 싶다고 가정해 봅시다. 그러면 다시 -태그를 사용하되 colspan을 올바르게 적용합니다.

이 모든 단계를 따라왔다면 기본 HTML 표를 만드는 방법을 배웠습니다. 그러나 시각적 디자인은 항상 CSS를 통해 이루어져야 하며, 이는 레이아웃과 사용자 친화성을 개선합니다. 콘텐츠와 레이아웃을 분리하여 나중에 웹사이트 디자인에서 더 많은 유연성과 옵션을 가질 수 있도록 합니다.

요약 - HTML 표의 기본 만들기

당신은 HTML 표의 구조와 사용법을 배웠고, 구축에서 데이터 배치, 바닥글에 이르기까지 다뤘습니다. 이제 웹사이트에서 간단한 표 형태의 데이터를 표시할 수 있습니다.