소셜 미디어 HTML5 및 CSS3 웹 기반 페이지에 대한 기본 테이블 작성 및 정의 방법 - 더미

HTML5 및 CSS3 웹 기반 페이지에 대한 기본 테이블 작성 및 정의 방법 - 더미

차례:

비디오: 날로먹는 HTML & XHTML 동영상 강의 09강 용어를 정의 하는 목록 2024

비디오: 날로먹는 HTML & XHTML 동영상 강의 09강 용어를 정의 하는 목록 2024
Anonim

가끔은 목록 대신 표 형식으로 가장 적합한 데이터를 접하게됩니다. HTML5는 이러한 종류의 작업을 위해 여러 테이블 태그를 지원합니다. 여기서, 당신은 아주 기본적인 테이블을 볼 수 있습니다.

때로는 의미있는 방식으로 데이터를 표시하는 가장 좋은 방법은 테이블로 구성하는 것입니다. HTML은 태그가있는 테이블을 정의합니다. 테이블에는 여러 개의 테이블 행 (태그로 정의)이 있습니다. 각 테이블 행은 여러 테이블 데이터 ( ) 또는 테이블 헤더 ( ) 태그로 구성 될 수 있습니다.

출력을 basicTable의 코드와 비교하십시오. 그것을 만드는 html:

basicTable. html

HTML 슈퍼 히어로

히어로

파워 네메시스 HTMLator
표준 준수 잔인한 코드 보이 캡틴 CSS
Super -layout 폐지 된 브라우저 우먼
메가 호환성 추악한 코드 몬스터
HTML 테이블이 쌍으로 정의됩니다. 코드에서 테이블의 구조를 볼 수 있도록 코드를 들여 쓰고 조심스럽게 배치하는 것이 좋습니다. 코드를 보시면 표가 세 개의 행으로 구성되어 있고 각 행은 세 개의 요소로 구성되어 있다고 가정 할 수 있습니다.

워드 프로세서에서는 일반적으로 행과 열의 수를 정의하여 빈 표를 작성한 다음 채 웁니다. HTML에서는 행을 기준으로 표를 정의하고 각 행의 요소는 열. 각 행에 같은 수의 요소가 있는지 확인하는 것은 사용자의 몫입니다.

기본적으로 (어쨌든 대부분의 브라우저에서) 테이블에는 테두리가 표시되지 않습니다. 기본 테이블 테두리를 보려면 테이블의 속성을 켤 수 있습니다. (

속성 는 일부 태그에 첨부 할 수있는 특수 수정 자입니다.) 이 태그는 표를 만들고 크기가 테두리로 지정되도록 지정합니다. 비즈니스를 생략하면 일부 브라우저는 경계를 표시하고 일부는 표시하지 않습니다. 테두리 값을 큰 숫자 또는 큰 숫자로 설정할 수 있습니다. 숫자가 클수록 경계가 커집니다.

브라우저에 동일한 기본값을 부여 할 수 없으므로 표 테두리를 설정하는 것이 좋습니다. 또한 경계 값은 항상 따옴표로 묶입니다. CSS를 사용하면이 단순한 속성이 허용하는 것보다 더 복잡하고 흥미로운 경계를 추가 할 수 있습니다.

첫 번째 행을 추가하는 방법

테이블을 정의한 후에는 일부 행을 추가해야합니다. 각 행은 쌍으로 표시됩니다.

세트 내부에는 테이블 데이터가 필요합니다. 첫 번째 행은 종종

표 머리글로 구성됩니다. 이러한 특수 셀은 데이터가 아닌 레이블임을 나타 내기 위해 다르게 형식이 지정됩니다. 표 머리글은 머리글임을 기억하는 데 도움이되는 기본 서식이 있지만 표정을 변경할 수 있습니다. 모든 종류의 멋진 방법으로 표 머리글의 모양을 변경할 수 있습니다. 서식 지정을 발견하고 모든 테이블 머리글을 차트로 만들려고 결정할 때 테이블 머리글을 정의하면 HTML 코드에서 모든 테이블 머리글이 어디에 있는지 알 수 있습니다.

세트 내부에 헤더를 들여 씁니다. 표에 세 개의 열이 있으면 첫 번째 행은 다음과 같이 시작될 수 있습니다.

표 머리글에 표시된 텍스트를 및 요소 사이에 배치하십시오. 내용은 정의 된 순서대로 나타납니다.

제목은 맨 위 행에있을 필요는 없습니다. 왼쪽에 제목을 쓰려면 각 행의 첫 번째 요소로 쌍을 넣으면됩니다. 원하는 경우 상단 및 왼쪽 모두 제목을 사용할 수 있습니다. 사실, 어디서든 머리글을 가질 수 있지만 머리글을 위쪽이나 왼쪽에만 놓는 것이 일반적입니다.

데이터 행을 만드는 방법

다음 단계는 다른 행을 만드는 것입니다. 데이터 행은 쌍이 아닌 쌍을 사용하여 데이터 요소를 포함한다는 점을 제외하고는 제목 행과 같습니다. 일반적으로 3 열 테이블에는 다음과 같은 빈 행이 있습니다.

데이터 요소를 세그먼트에 배치하면 이동할 준비가됩니다.

텍스트 편집기에서 테이블을 작성하는 방법

텍스트 모드에서 테이블을 만드는 것이 어렵다고 생각하여 테이블이 WYSIWYG (사용자가 보는 것) 편집자를 사용하는 좋은 이유라고 생각하는 사람들이 있습니다. 조금 계획을 세워야하지만이 계획을 따르면 그래픽 도구 없이도 HTML 테이블을 만들 수 있습니다.

미리 계획하십시오.

  1. 표에 몇 개의 행과 열이 있는지 알 수 있습니다. 종이에 스케치하면 도움이 될 것입니다. 나중에 행 수를 변경하는 것은 쉽지만 일부 코드가 작성된 후에는 열 수를 변경하는 것이 정말 어려울 수 있습니다.

    표제를 작성하십시오. 표에서 표준 표제를 시작하려면 표제 행을 작성하십시오. 저장하고 확인하고 확인하십시오. 더 많은 복잡성을 추가 할 때 실수가 번식되는 것을 원하지는 않습니다. 이 제목 행은 필요한 열의 수를 나타냅니다.

  2. 샘플 빈 행을 작성하십시오.

    한 줄에 한 쌍씩 정확한 수의 요소를 사용하여 샘플 행을 만듭니다. 하나의 세트를 만들고 복사 및 붙여 넣기를 사용하여 필요한만큼이 데이터 셀을 복사하십시오. 쌍 수는 표제 행의 세트 수와 같아야합니다.

  3. 필요한만큼의 행을 만들기 위해 빈 행을 복사하여 붙여 넣습니다.

    저장하고보고 확인합니다.

  4. 데이터를 추가하는 데 많은 노력을 기울이기 전에 모든 것이 올바르게 보이고 올바르게 작동하는지 확인하십시오.

  5. 필요한 데이터를 테이블에 채우십시오.

    행 단위로 이동하여 쌍 사이에 데이터를 추가합니다.

  6. 우연히 무언가를 깨뜨리지 않았는지 확인하기 위해 다시 테스트하고 검증하십시오.

    HTML5 및 CSS3 웹 기반 페이지에 대한 기본 테이블 작성 및 정의 방법 - 더미

    편집자의 선택

    소셜 미디어 측정법을 사용하여 판매를 늘리는 방법 - 소셜 미디어 측정 항목을 사용하는 한 회사

    소셜 미디어 측정법을 사용하여 판매를 늘리는 방법 - 소셜 미디어 측정 항목을 사용하는 한 회사

    판매를위한 크로스 플랫폼 참여는 Best Buy입니다. Best Buy는 모바일 쇼핑 및 소셜 쇼핑을 매장의 각 품목에 대한 QR 코드를 사용하여 매장 내 경험으로 가져 왔습니다. 고객은 상점의 각 항목에 대한 QR 코드를 스캔하여 리뷰를 포함한 더 많은 정보를 얻을 수 있습니다.

    블로그에 Google 웹 로그 분석을 설치하는 방법 - 아직없는 경우

    블로그에 Google 웹 로그 분석을 설치하는 방법 - 아직없는 경우

    블로그 또는 사이트에서 Google 웹 로그 분석 추적 통계를 사용하여 빠르고 쉽게 설치할 수 있습니다. 설치는 1 분 밖에 걸리지 않으며 완전히 고통스럽지 않습니다. 먼저 Google 애널리틱스 ID를 가져 와서 어딘가에 작성하십시오. 쉽게 찾을 수 있습니다. Google 애널리틱스와 대시 보드에서 로그인하십시오.

    웹 사이트에 Google 웹 로그 분석을 설치하는 방법 - 웹 사이트에 Google 웹 로그 분석을 설치하는

    웹 사이트에 Google 웹 로그 분석을 설치하는 방법 - 웹 사이트에 Google 웹 로그 분석을 설치하는

    단 1 분이며 고통스럽지 않습니다. 곧 Google 애널리틱스 덕분에 잠자는 동안 소셜 미디어 측정 항목을 추적하게 될 것입니다. 먼저 Google 애널리틱스 ID를 가져 와서 어딘가에 작성하십시오. 쉽게 찾을 수 있습니다. Google 애널리틱스 및 대시 보드에 로그인하고 톱니 바퀴 아이콘을 클릭하기 만하면됩니다. ...

    편집자의 선택

    마케팅 자동화에서 분할 테스트의 기본 이점 - A / B 테스트라고도하는 더미 테스트

    마케팅 자동화에서 분할 테스트의 기본 이점 - A / B 테스트라고도하는 더미 테스트

    다 변수 테스트뿐만 아니라 요인 일정을 유지하고 다양한 시나리오에서 다른 결과를 테스트하여 마케팅 자동화 테스트를 수행하는 것을 의미합니다. 하나의 유료 검색 광고를 통해 사람들을 2 개의 개별 방문 페이지로 유도하는 것이 그 예입니다. 방문 페이지 테스트하기 ...

    자동화 된 마케팅을위한 컨텐츠 작성의 기본 - 인형

    자동화 된 마케팅을위한 컨텐츠 작성의 기본 - 인형

    마케팅 자동화 도구의 사용을 극대화하기 위해 먼저 사람과 콘텐츠와의 관계를 이해해야합니다. 올바른 사람에게 올바른 콘텐츠를 보내는 경우에만 자동화가 유용합니다. 이를 올바르게 수행하는 방법에 대한 기본적인 이해를 돕기 위해 사람들은 두 가지 유형이 관련되어 있음을 인식해야합니다 ...

    Microsoft Dynamics CRM을 사용하는 e-Mail 및 Microsoft Dynamics CRM- 더미

    Microsoft Dynamics CRM을 사용하는 e-Mail 및 Microsoft Dynamics CRM- 더미

    고객 관계를 관리하는 데 도움이되는 Microsoft 도구 현대 직장에서 가장 유용한 도구 중 하나는 전자 메일이므로 전자 메일을 만들고 읽거나, 전자 메일을 특정 레코드에 연결하거나, 일정을 관리하는 데 숙련되어 있어야합니다. ...

    편집자의 선택

    웹 호스팅 계획에서 더 많은 것을 얻기위한 10 가지 팁 - 인형

    웹 호스팅 계획에서 더 많은 것을 얻기위한 10 가지 팁 - 인형

    당신은 자신의 웹 사이트 또는 블로그를 가지고 있고, 고객, 독자 또는 웹 호스팅 기술에 의존하는 추종자 만 있습니다. 다음 팁은 웹 호스팅 계획을 최대한 활용하는 데 도움이됩니다. 제어판에서 백업 옵션을 확인하십시오. 일부 제어판을 사용하면 자동화 된 백업을 수행 할 수 있습니다. ...

    귀하의 웹 호스트가 귀하를 도와주지 않는 10 가지 사항 (무료) - 인형

    귀하의 웹 호스트가 귀하를 도와주지 않는 10 가지 사항 (무료) - 인형

    은 웹 호스트만큼 멋지고, 웹 사이트를 디자인, 제작 및 운영하는 데 도움이되는 일에는 한계가 있습니다. 그것은 모두 돈으로옵니다. 귀하가 기꺼이 지불하는 한 귀하의 호스트는 기꺼이 도움이 될 것입니다. 각 호스트는 다릅니다. ...