HTML5로 테이블을 만드는 방법 - 인형

비디오: [HTML 기초이론] - 표만들기(table) 2024

때때로 웹 페이지는 테이블에 가장 잘 보이는 데이터를 포함합니다. HTML5의 모든 기능을 갖춘 테이블 시스템을 사용하여 다음 예제와 같은 테이블을 생성 할 수 있습니다.

HTML 형식의 테이블의 기본 구조는 이해하기 쉽습니다. 예제에서 테이블을 생성 한 코드를 확인하십시오:

basicTable. html table, td, th {border: 1px solid black;}

기본 테이블


HTML 슈퍼 히어로


 영웅 
 파워 
 네메시스 


 XMLater 
 표준 준수 
 잔인한 코드 보이 


 캡틴 CSS 
 슈퍼 레이 아웃 > Lord Deprecated 
 브라우저 우먼 


 Megacompatibility 
 추악한 코드 괴물 
 코드를 살펴보면 테이블이 신중하게 중첩 된 태그 집합이라는 것을 알 수 있습니다. 테이블을 만드는 프로세스는 어렵지 않지만 몇 가지 사전 고려 사항이 필요합니다.

영웅	파워	네메시스
XMLater	표준 준수	잔인한 코드 보이
캡틴 CSS	슈퍼 레이 아웃 > Lord Deprecated	브라우저 우먼
Megacompatibility	추악한 코드 괴물	코드를 살펴보면 테이블이 신중하게 중첩 된 태그 집합이라는 것을 알 수 있습니다. 테이블을 만드는 프로세스는 어렵지 않지만 몇 가지 사전 고려 사항이 필요합니다.

원하는 열의 수와 헤드 라인이 될 행 또는 열을 알 수 있도록 테이블을 계획하십시오.

종이로 테이블을 스케치하는 것은 좋은 생각입니다. 특히 복잡한 경우가 있습니다.
태그로 테이블을 시작하십시오.
쌍은 전체 테이블을 둘러 쌉니다.
쌍으로 테이블 행을 작성하십시오.

표는 일련의 행입니다. 각 데이터 행을 묶으려면
쌍이 필요합니다. 표제는
로 표기하십시오. 맨 위 행 (및 맨 왼쪽 열)에는 표제가 포함되는 경우가 많습니다.

쌍을 사용하여 제목 셀로 간주되어야하는 텍스트를 나타냅니다. 기본적으로 이러한 셀은 일반적으로 더 굵고 가운데에 배치되지만 CSS로 변경할 수 있습니다.
쌍으로 일반 데이터 셀을 지정하십시오. 행 수에 따라 셀의 수를 일정하게 유지합니다.
HTML5 표에 익숙해지면서 여러 행이나 열에 걸쳐 셀을 확장하는 방법을 찾을 수 있습니다.

필요에 따라 CSS를 추가하십시오.
표에는 기본 형식이 있습니다. 예를 들어, 테두리를 추가하기 위해 CSS로 변경할 수 있습니다. HTML5 사용자가 레이아웃 용도로 표를 사용하는 방법을 개발했지만 CSS는 필요한 모든 페이지 레이아웃 기법을 제공하므로 HTML5 표를 의도 된 용도, 즉 표 형식 데이터를 사용하십시오.