HTML5로 솔리드 테이블을 형성하는 방법 -이 테이블 건설 연습을위한 더미

이 테이블 건설 연습을 위해 열심히 일하는 경제학자들로부터 몇 가지 데이터를 얻을 것입니다 노동 통계국 미국 통계국에서 통계를 작성하고 웹 사이트에서 표 B-9:이 그림에 표시된 총 주별 시간 및 급여 지수를 아래로 스크롤하십시오 (숫자는 의심의 여지가없는 유형 임). 그럼에도 불구하고 찾고자하는 것이 무엇인지 알 수 있습니다.)

표 B-9를 살펴보면 다음과 같습니다:

• 맨 위에있는 캡션은 표 B-9: 집계의 색인 … 이런 종류의 정보는 캡션 요소가 캡처하고 전달하기위한 것입니다.

• 캡션 아래에는 표제 집합이 있습니다. 표 머리글, 즉 밝은 회색 배경 및 다양한 열 머리글이 있고 왼쪽에는 산업 목록이 있습니다. 그런 다음 테이블에는 두 세트의 열 (레이블이 붙어 있습니다. 총 주간 시간 및 집계 주간 급여 색인), 각각 4 개의 날짜 열과 2013 년 2 월에서 3 월까지 퍼센트 변경 열이 있습니다.

  -

• 테이블 본문은 총 개인 정보를 읽는 텍스트로 시작하고 다른 서비스로 갈 때까지 19 행을 계속합니다. 열 1 (산업)의 행은 흰색과 하늘색 배경색을 번갈아 표시합니다.

  그 후, 두 세트의 컬럼은 각 세트에 5 개의 개별 컬럼 (2012 년 3 월, 2013 년 1 월에서 3 월까지, 그리고 지난 달 (2 월)에서 변경된 퍼센트로 각각 주별 주간 및 주간 급여에 대한 데이터를 철자합니다. 2013)에서 현재 월 (2013 년 3 월)까지

  -

• 테이블 바닥 글에는 1에서 3까지 번호가 매겨진 3 개의 각주가 포함됩니다. 특수 마커 (p)는 예비 데이터 (즉, 최종 데이터가 아님)를 나타냅니다.

다음과 같이 숫자로 표를 작성하는 방법은 다음과 같습니다.

1. 표 캡션은 캡션 요소 내에 캡처 할 수 있습니다. 줄 바꿈 () 요소를 사용하여 ESTABLISHMENT DATA 다음에 줄을 시작하고 실제 캡션이 시작되기 전에 표 B-9를 참조하십시오. 집계 색인 … 줄 바꿈 요소를 다시 사용하여 배율을 설명하기 전에 줄을 끊으십시오 지시자 "[2002 = 100]. "

2. 모든 제목은 요소 안에 포함되어야합니다. 각 표제 셀에 표 머리글 ( ) 요소를 사용하므로 각 셀의 가운데에 굵게 표시됩니다.

   Industry 셀은 rowspan = "2"속성을 가져 와서 왼쪽 헤더 영역의 전체 높이를 채우고 각 셀의 인덱스는 colspan = "5"속성을 가져야 각 셀이 4를 포함하도록합니다. 해당 카테고리의 날짜 및 퍼센트 변경 열.세 항목 모두 첫 번째 표 제목 행에 표제 표제 ( ) 셀에 표시됩니다.

   나머지 10 개의 항목은 두 번째 표제 제목 행에 표의 순서대로 나타납니다. 그 10 개의 항목 각각은 자체 표 표제 ( ) 셀에도 나타납니다. Industry에 대한 너비 및 CSS의 다양한 날짜와 백분율 열은 헤더의 나머지 부분에 대한 너비를 설정합니다.

3. 표 본문에서 한 행은 온라인 소스의 각 데이터 행에 해당하며, 왼쪽에서 업계 이름으로 시작한 다음 오른쪽에있는 두 그룹 각각의 날짜 및 백분율에 대한 숫자 값으로 계속됩니다. 이 태스크는 해당 테이블에 표시된 각 행에 대해 11 개의 테이블 데이터 ( ) 요소를 포함합니다. 아주 간단하고, 매우 기계적이며, 매우 쉽습니다.

4. 테이블 바닥 글 항목은 모두 바닥 글 섹션에 표시되며, 테이블의 전체 너비에 걸쳐 흐름하려면 colspan = "11"속성을 사용해야합니다. 각주 범례는 단일 테이블 행 내에 나타날 수 있습니다 ( ) 또는 테이블 데이터 ( ) 셀의 경우 굵게 표시됩니다.

   ( 는 사용하지 않거나 각주 텍스트의 가운데에 표시됩니다.) 각 나머지 각주는 단일 테이블 행 및 표 데이터 셀을 표에 표시된대로

이러한 기술을 사용하여 숫자 및 텍스트 데이터를 표시하기 위해 견고하고 매력적인 표를 만들 수 있습니다. 사용자가보고 싶어하는 것을 통해 생각 해보면 HTML로 예비 구조를 만들 수 있습니다. 그런 다음 셀을 배열하고 바로 잡을 때까지 조정할 수 있습니다.