데이터 테이블은 쉽게 읽을 수 있도록 열과 행에 다양한 정보를 나열합니다. 데이터는 일반적으로 텍스트 레이블이있는 부분적으로 숫자입니다. 예를 들어, 매일 먹는 칼로리를 보여주는 데이터 테이블이 있습니다. 데이터 테이블을 온라인으로 만드는 것은 HTML 또는 더 복잡한 CSS 브라우저 언어를 사용하여 수행 할 수 있습니다. 최종 테이블은 스프레드 시트 나 종이에 생성 된 데이터 테이블과 비슷합니다. 유일한 차이점은 소스 코드를 보지 않으면 보이지 않는 백그라운드 코딩입니다. 코딩은 HTML 편집기, 텍스트 또는 기타 방법으로 만들 수 있습니다. 데이터를 입력하고 몇 가지 속성을 설정하고 모든 테이블 코딩을 생성하는 기능을 제공하는 온라인 사이트가 많이 있습니다. 온라인 데이터 테이블은 일반적으로 웹 페이지의 일부로 사용됩니다. 데이터 테이블은 종종 판매 품목과 같은 범주가있는 품목 목록을 만드는 데 사용됩니다. 일부 웹 페이지는이를 사용하여 정보에 대한 통계를 표시합니다. 데이터 테이블은 인쇄 또는 보고서에 오프라인으로 사용할 수 있지만 일반적으로 사용하는 것이 좋습니다. 작업을위한 더 많은 기능을 제공하는 Microsoft Office Excel과 같은 스프레드 시트 소프트웨어 데이터. 이 가이드는 메모장으로 HTML 데이터 테이블을 만드는 방법을 보여줍니다.
HTML 편집기 또는 일반 메모장 텍스트 문서를 열어 HTML 코드를 입력합니다. HTML 코딩에 익숙하다면 메모장이 잘 작동합니다. HTML 편집기는 반복적 인 작업을 더 빠르게 수행하지만 Frontpage와 같은 일부는 웹 페이지 속도를 늦출 수있는 불필요한 코딩을 추가합니다. 가장 좋은 방법은 먼저 HTML 편집기로 코드를 작성한 다음 돌아가서 직접 코드를 편집하여 정리하는 것입니다.
테두리, 너비, 배경색 및 글꼴 색상에 대한 테이블 속성을 결정합니다. 테이블을 쉽게 읽을 수 있도록하려면 웹 페이지 레이아웃, 너비, 색상 및 기타 속성을 고려해야합니다. 또한 데이터에 필요한 행과 열 수를 결정해야합니다. 테이블 속성 정의를 시작하십시오. (이 예는 평일 점심과 저녁에 섭취 한 칼로리 수를 보여줍니다. 3 개의 열 (Day, Lunch, Dinner)과 7 개의 행 (라벨 용 2 개, 평일 1 개)이 필요합니다.
테이블과 데이터 셀 주위에 테두리를 추가합니다. 테두리는 쉽게 볼 수 있도록 데이터를 셀로 구분합니다. 픽셀 단위로 측정되며 사용하지 않으려면 0 값을 지정할 수 있습니다. 일반적으로 1 픽셀 또는 2 픽셀 테두리가 좋습니다. 테두리의 태그는
bgcolor = border = "CHOSEN_BORDER_WIDTH"
태그로 테두리 색상을 변경할 수 있습니다.
bordercolor = "CHOSEN_COLOR"
빨간색 또는 검은 색 또는 6 자리 16 진수 색상 코드와 같은 기본 색상 용어를 사용합니다. 16 진수는 더 많은 색상을 제공합니다. 이 예에서는 border = "2"및 bordercolor = "black"을 사용합니다.
전체 테이블의 너비를 결정하십시오. 픽셀 또는 화면 크기의 백분율로 측정됩니다. 픽셀은 확정적이며 백분율을 사용하면 표를 다양한 화면 크기에 맞게 조정할 수 있습니다. 행에 걸친 데이터의 너비를 기준으로 너비를 판단하십시오. 나중에 테이블이 너무 얇거나 넓다는 것을 알게되면 변경할 수 있습니다. 이 예에서는 width = "175"를 사용합니다.
데이터 셀의 배경색을 설정합니다. 페이지의 배경색과 다르기 때문에 대비가 좋습니다. 태그는
bgcolor = "CHOSEN_COLOR"
테두리 색상과 같습니다. 이 예에서는 bgcolor = "white"를 사용합니다.
셀에있는 텍스트의 글꼴 색상을 설정합니다. 색상이 배경과 잘 대조되도록하여 쉽게 읽을 수 있도록합니다. 어둡거나 어두울 때 항상 가장 잘 작동합니다. 태그는
font = "CHOSEN_COLOR"
우리의 예는 흰색 배경과 잘 대조되는 font = "black"입니다.
태그 속성 사이에 공백이 있고 앞에있는 테이블 태그로 시작하는 왼쪽 및 오른쪽 화살표 사이에 전체 테이블 태그를 작성하십시오. 태그의 순서는 "테이블"이 앞에있는 한 중요하지 않습니다.
열 너비를 결정합니다. 각 열의 너비는 전체 테이블의 너비에 따라 다릅니다. 테이블 너비를 셀 수로 나누면 열 크기가 균등 해집니다. 필요한 경우 열 너비를 조정하지만 합계는 테이블 너비를 초과 할 수 없습니다. 한 셀 너비가 변경되면 테이블 너비를 합산하기 위해 다른 셀을 조정해야합니다. (이 예의 너비는 175이고 행당 열은 3 개이므로 균등 분할은 약 59입니다. 실제 분할은 70, 60, 40입니다.)
데이터 추가를 시작하십시오. 먼저 새 줄을 시작하고 코드가있는 테이블 행을 추가합니다.
셀에 대한 데이터를 입력하십시오. 이 코드를 사용하여 빈 셀을 나타냅니다.
태그로 셀을 닫습니다.. bordercolor 태그는 원하는 경우 셀 테두리 색상을 지정하는 데 사용됩니다. 생략하면 기본 테이블 테두리 색상이 사용됩니다. 이 예의 첫 번째 셀 코드는 다음과 같습니다.
행의 모든 셀이 완료 될 때까지 새 줄에 각각 테이블 데이터 셀 만들기를 반복합니다. 그런 다음 태그로 행을 끝냅니다.. 동일한 프로세스로 다음 행을 시작합니다.
와 함께 테이블 코드를 닫습니다. 꼬리표. 두 행의 데이터 후에 종료 된 경우 최종 테이블 코드는 다음과 같습니다.
필요한 것
- HTML 편집기 또는 메모장
- 데이터