테이블 - 행과 셀에 분산된 데이터 집합입니다. 대부분의 셀에는 표 형식의 데이터가 포함되어 있고 나머지는 내용을 설명하는 행과 열에 대한 머리글을 포함합니다.

HTML 문서에서 표를 만들려면 태그를 사용하십시오.

, 테이블의 모든 내용을 포함하는 컨테이너입니다.

테이블 생성은 항상 태그를 사용하여 정의된 행으로 시작합니다.

, 각 행은 차례로 셀로 구성됩니다. 꼬리표 셀 생성을 위한 태그만 포함할 수 있습니다.

HTML에는 셀을 만들기 위한 두 개의 다른 태그가 있습니다. 첫 번째 태그는

그리고

행 및 열 그룹화를 사용하는 방법을 이해하는 가장 쉬운 방법은 스도쿠 테이블의 예를 사용하는 것입니다.


col 태그는 각 열에 대해 개별적으로 매개변수를 설정합니다. 어떻게 쓰든 상관없어요 소스 코드:

또는

예시
, 데이터가 있는 일반 셀을 만듭니다. 기본적으로 콘텐츠에 태그 지정 왼쪽 정렬. 셀 생성을 위한 두 번째 태그는 태그입니다. , 열이나 행에 대한 머리글이 포함된 셀을 정의할 수 있습니다. 이러한 셀의 내용이 표시됩니다. 굵은 텍스트그리고 중앙 정렬. 태그 그리고 문서 본문에서 사용할 수 있는 모든 HTML 요소를 포함할 수 있습니다.

첫 번째 타이틀두 번째 타이틀
행 1, 셀 1라인 1, 셀 2
행 2, 셀 1행 2, 셀 2
노력하다 "

테이블 안의 테이블

HTML에는 중첩 테이블, 즉 다른 테이블 내부에 있는 테이블을 만드는 기능이 있습니다. 중첩된 테이블을 만들려면 중첩하려는 테이블의 코드를 태그 안에 넣어야 합니다.

.

예를 들어, 이전에 이미 생성한 테이블을 가져와서 이 코드를 두 번째 행의 두 번째 셀에 배치해 보겠습니다.

첫 번째 타이틀두 번째 타이틀
행 1, 셀 1라인 1, 셀 2
행 2, 셀 1 행 2, 셀 2
첫 번째 타이틀두 번째 타이틀
행 1, 셀 1라인 1, 셀 2
행 2, 셀 1행 2, 셀 2

프레임이 있는 테이블

이름 성
라리사 이사예프
드미트리 콜레스니코프

결과:

테두리 없는 테이블

프레임이 있는 테이블

태그 속성
그리고 세포를 병합하려면
예시
흰 족제비
무게 크기
수컷 1.2 - 2.5kg 최대 70cm
안 0.7 – 1.0kg 최대 40cm

결과:

흰 족제비
무게 크기
수컷 1.2 - 2.5kg 최대 70cm
안 0.7 – 1.0kg 최대 40cm

HTML5 표준에 따르면 다음과 같이 이전에 사용된 모든 테이블 속성은 국경, 셀 간격, 셀 패딩등은 더 이상 지원되지 않으며 유효성 검사기는 이러한 사용을 코드의 오류로 간주합니다. 테이블을 디자인하려면 사용되지 않는 모든 테이블 속성을 대체할 수 있는 CSS 스타일을 사용해야 합니다. 예를 들어 속성 ​​대신 셀 간격속성은 테이블 셀 사이의 거리를 변경하는 데 사용됩니다. 경계 간격, 표 셀의 내용 정렬 - 속성 텍스트 정렬그리고 수직 에일링. 테이블의 CSS 스타일

html 테이블 행 그룹화 태그

태그를 사용하여 더 복잡한 테이블을 만들 수 있습니다.

예시
맥주 소비
이름. 리터
총 250
이바노프 이반 이바노비치 133
페트로프 페트르 페트로비치 117

결과:

html 테이블 열 그룹화 태그

태그 속성
노란색 빨간색

결과:


스타일을 설정하려고하지 마십시오 텍스트 정렬태그용 그리고 . 태그 사이에 배치된 텍스트 ..., 태그 때문에 이 스타일을 상속하지 않습니다. 태그의 하위 항목이 아닙니다. , 태그 없음 .

수평 정렬특정 테이블 열의 텍스트는 스타일을 지정하여 변경할 수 있습니다. 텍스트 정렬의사 클래스의 경우 td:n번째 자식(n)여기서 n은 열 번호입니다. 그러나 이 방법은 테이블 셀 사이에 속성이 있는 경우 작동하지 않습니다. 콜스팬.

예시
이름 가격, 문질러.)
분당 일광욕실 지불(4분부터)15
50분 일광욕실(14번 문지름/분, 1개월)700
일광욕실 100분(13번 문지름/분, 2개월)1300
일광욕실 200분 (12회/분, 3개월)2400

결과:


그러나 이 방법은 테이블 셀 사이에 속성이 있는 경우 작동하지 않습니다. 콜스팬.




HTML의 테이블은 매우 기능적이어서 전체 사이트를 조판하는 데 사용할 수 있습니다(읽기). 이제 우리는 CSS 스타일로 테이블을 장식하는 것이 더 낫기 때문에 마크업만 구문 분석하고 디자인은 건드리지 않고 웹 페이지에 간단한 HTML 테이블을 삽입하는 방법에 대해 이야기할 것입니다.

테이블 태그 및 속성

다음은 테이블을 만드는 데 필요한 주요 요소입니다.

  • - 테이블이 위치한 컨테이너(동일
      표시된 또는
        번호 매기기 목록의 경우).
      1. 국경- 프레임의 두께를 결정하는 속성. 대신 사용하는 것이 좋습니다. 국경 속성 CSS.

    HTML c 테이블 소스 코드

    그리고
    테이블의 레이블을 설정합니다. 컨테이너를 사용할 수는 없지만 여전히 테이블을 이끌기로 결정한 경우 태그 바로 뒤에 놓으십시오. , 외부 셀 및 행.
    • - 테이블 행을 포함하는 쌍 태그(수평으로 같은 수준에 있는 셀).
    • , 너무 많은 셀이 있을 것입니다: 하나의 태그 - 하나의 셀.
    • 열을 설정하는 코드를 방해하지 않고 신속하게 열을 그룹화할 수 있습니다. 일반적 특성. 컨테이너의 도움으로 테이블의 논리적 부분을 서로 분리할 수 있습니다. 태그 뒤에 배치

    셀이 병합되면 행의 요소 수가 변경됩니다. 예를 들어, 테이블에 셀이 있는 3개의 열이 있고 첫 번째 셀과 두 번째 셀을 결합하면 다음을 정의하는 태그 내부의 모든 것이 주어진 라인 2개의 요소가 있고 첫 번째 요소에는 colspan="2" 속성이 포함됩니다.

    셀 병합이 있는 HTML 테이블의 예

    병합된 셀이 있는 HTML 테이블 소스 코드

    - 테이블 헤더 셀을 생성하는 태그. 겉으로 보기에는 내용이 다른 셀의 내용과 다릅니다. 일반적으로 내부에 있는 텍스트입니다. 브라우저는 굵게 강조 표시하고 중앙에 배치합니다.
    		• - 간단한 셀이 생성되는 컨테이너. 문자열에 포함되는 태그 수(태그
    , 그렇지 않은 경우 이후 .
    • 와 같은 목적으로 사용 . 포함하고있을 것이다 , 하지만 그 반대는 아닙니다.
  • 기간- 컨테이너 속성이 적용되는 컬럼의 개수를 지정하는 속성
    • .
    • , 그리고 - 테이블을 각각 상부(헤더), 메인(본체), 하부(최종) 부분으로 나눌 수 있는 컨테이너. HTML 테이블에서 이러한 태그의 순서는 컨테이너의 순서와 동일합니다. , 그리고
    HTML 문서에서.
  • 콜스팬행의 셀을 병합하는 데 필요합니다. 속성 값에는 병합할 셀의 수를 지정하는 숫자가 포함됩니다.
  • 행 범위열로 셀을 연결합니다.

    • 테이블 생성 예

    HTML 문서를 만들고 다음 코드를 복사합니다.

    테이블 예

    웹사이트 구축 도구
    목적도구
    마크업HTMLXHTML
    장식CSS
    개발PHP파이썬

    브라우저에서 문서는 다음과 같습니다.

    어떤 코드 라인이 무엇을 담당하는지 알아봅시다.

    • - 테이블을 열고 프레임의 두께를 설정했습니다.
      • - 제목을 붙였습니다.
      • - 라인을 열었습니다.
      • - 헤더 디자인으로 셀을 만들었습니다.
      • - 행에 두 번째 헤더 셀을 생성했습니다. colspan 매개변수는 이 셀이 가로로 두 개를 차지해야 함을 나타냅니다.
      • - 라인을 닫습니다. 나머지 라인도 같은 방법으로 생성했습니다.
      • - 헤더가 아닌 일반 셀이 있는 테이블의 두 번째 행을 추가했습니다. 마찬가지로 후속 행과 셀이 삽입되었습니다.
      • 웹사이트 구축 도구
      목적 도구
      마크업 HTML XHTML
      - 테이블을 닫습니다.

    간단한 HTML 테이블 소스 코드



















    셀 1 셀 2 셀 3
    셀 4 셀 5 셀 6
    셀 7 셀 8 셀 9

    HTML 테이블 헤더

    HTML 테이블에는 두 가지 유형의 셀이 있습니다. 태그는 일반 유형의 셀을 정의합니다. 셀이 헤더 역할을 하는 경우 태그를 사용하여 식별됩니다.

    th 제목이 있는 HTML 테이블의 예

    폭스바겐 AG 다임러 AG BMW 그룹
    아우디 메르세데스 벤츠 BMW
    스코다 메르세데스-AMG 미니
    람보르기니 똑똑한 롤스 로이스

    헤더가 있는 HTML 테이블 소스 코드
























    폭스바겐 AG 다임러 AG BMW 그룹
    아우디 메르세데스 벤츠 BMW
    스코다 메르세데스-AMG 미니
    람보르기니 똑똑한 롤스 로이스

    HTML 테이블의 셀 병합

    HTML 테이블에서 셀을 가로 및 세로로 병합할 수 있습니다.

    에게 가로로 셀 병합 colspan=" 속성 사용 엑스" , 셀 또는 , 여기서 엑스

    에게 세로로 셀 병합 rowspan="속성 사용 엑스" , 셀 또는 , 여기서 엑스- 병합할 셀의 수.

    셀은 수평 및 수직으로 동시에 병합할 수 있습니다. 이렇게 하려면 원하는 셀에 대해 colspan 및 rowspan 속성을 모두 사용합니다.

    셀 텍스트





























    닛산
    모델장비유효성
    닛산 캐시카이비자+
    테크나+
    닛산 엑스트레일아센타+
    커넥타-

    HTML 테이블의 머리글 및 바닥글

    HTML 테이블은 머리글, 본문, 바닥글의 3가지 영역으로 나눌 수 있습니다.

    이는 테이블에서 선택한 부분의 행을 태그로 래핑하여 수행됩니다. 머리글 영역 - 바닥글 영역 - 테이블 본문을 정의합니다.

    기본적으로 머리글과 바닥글은 스타일이 지정되지 않지만(필요한 경우 CSS를 통해 수행할 수 있음) 브라우저에서 사용할 수 있습니다. 예를 들어, 여러 페이지로 된 표를 인쇄할 때 머리글과 바닥글이 인쇄된 각 페이지에 중복될 수 있습니다.

    테이블의 HTML 코드에서 영역 태그의 올바른 순서는 머리글, 바닥글, 본문 순입니다. 이 경우 페이지의 주요 부분이 머리글과 바닥글 사이에 표시됩니다.

    선택적으로 표에 캡션을 추가할 수 있습니다. 이렇게 하려면 태그를 사용하십시오.

    머리글과 바닥글과 캡션이 있는 HTML 테이블의 예

    머리글과 바닥글 및 캡션이 있는 테이블 소스 코드







































    르노 산데로 스텝웨이 컴플리트 세트
    특성 수타 09H 6R 수타 09HR6R 수타 15H 5R
    유효성 + + +
    엔진 출력 0.9(90HP) 0.9(90HP) 1.5(90HP)
    연료 가솔린 가솔린 디젤
    독성 비율 유로 6 유로 6 유로 5

    열 및 열 그룹

    HTML 테이블은 및 태그를 사용하여 열과 열 그룹으로 나눌 수 있습니다.

    이 분리를 사용하면 최소 개수의 표를 사용하여 표의 스타일을 설정할 수 있습니다. CSS 속성, 따라서 표 코드의 양을 줄입니다(각 열 셀에 대한 스타일을 정의하는 대신 한 번에 하나 이상의 열에 대한 스타일을 설정할 수 있음).

    태그 및 태그 앞 태그 내부에 배치되는 AKP6(EDC)

    전염
































    젠 2E2C 알 A젠 2E2C J5 A강렬한 2E3C 알 A특성
    1.5(90HP)1.2(115 HP)1.5(90HP)엔진 출력
    디젤가솔린디젤연료
    AKP6(EDC)AKP6(EDC)AKP6(EDC)전염

    사이트 페이지 레이아웃의 테이블

    최신 사이트에서 페이지의 올바른 표시는 컴퓨터와 컴퓨터 모두에서 중요합니다. 모바일 기기. 다양한 크기(컴퓨터, 스마트폰, 태블릿)의 화면에 콘텐츠를 적용하는 기능이 손실되기 때문에 표를 사용하여 HTML 페이지 프레임을 만드는 것은 권장하지 않습니다.

    테이블 그룹 태그는 페이지 내에서 테이블 형식 콘텐츠를 표시하는 데 가장 잘 사용됩니다.

    안녕하세요 블로그 독자 여러분! 웹페이지에서는 글과 그림 외에도 다양한 데이터를 표 형태로 표시해야 하는 경우가 많습니다. 예, 이해할 수 있습니다. 테이블은 많은 양의 정보를 표시하는 가장 편리한 방법입니다. 그러므로 질문이 생긴다. HTML에 테이블을 포함하는 방법은 무엇입니까?. 이 기사에서는 이 질문에 답하고 다양한 html 테이블의 많은 예를 제공합니다.

    HTML을 사용하여 테이블을 만드는 방법

    HTML 테이블은 4단계로 생성됩니다.

    1. html 코드의 첫 번째 단계에서 paired를 사용하여 꼬리표

    웹 페이지에 테이블이 삽입되었음을 브라우저에 알립니다.
    . table 요소는 웹 페이지의 블록 요소입니다. 따라서 테이블은 항상 다음과 같이 출력됩니다. 개행수직으로 들여쓰기 이웃 요소, 따라서 단락에 넣을 필요가 없습니다.

    2. 두 번째 단계에서 우리는 윤곽쌍을 이루는 태그를 배치하여 테이블 내부에

    . 각 요소 별도의 줄을 만듭니다.





    3. 다음으로 세 번째 단계에서 우리는 세포쌍을 이루는 태그가 있는 테이블 그리고 , 요소 내부에 배치 . 꼬리표 생성 보통의세포, 그리고 셀 헤더, 즉. 해당 열의 헤더:











    4. 마지막 단계에서 요소 안에 넣습니다. 그리고 셀 내용. 웹 페이지에 테이블을 삽입하기 위한 HTML 코드는 다음과 같습니다.











    1열2열3열
    셀 1-1셀 1-2셀 1-3
    셀 2-1셀 2-2셀 2-3

    테두리 표시를 미세 조정하면 도움이 됩니다. 를 사용하여 프레임의 두께와 색상을 변경하고 테두리 유형을 변경할 수 있습니다.

    셀 안에 넣어야 하는 텍스트는 선택사항이지만 텍스트가 클 경우 태그를 적용하여 단락으로 나눌 수 있습니다.

    삽입된 텍스트의 스타일을 지정해야 하는 경우 .

    텍스트 외에도 태그를 사용하여 셀에 그림을 넣을 수 있습니다. :

    셀의 내용은 다른 테이블이 될 수도 있습니다. 이 경우 중첩 테이블을 생성하는 것은 일반 테이블을 생성하는 것과 다르지 않습니다. 태그 사이만 그리고태그가 삽입됩니다

    그리고
    , 행과 셀이 삽입됩니다.

    테이블을 생성할 때 염두에 두어야 할 몇 가지 규칙이 있습니다.

    • 태그만 테이블을 만드는 데 사용됩니다. ;
    • 꼬리표
      • 태그 안에만 있을 수 있음
      ;
    • 태그
      • , 기타 모든 태그 콘텐츠 브라우저에서 무시됩니다.
    • 표 내용(텍스트 또는 그림)은 태그에만 포함될 수 있습니다.
      • 그리고 태그 안에만 있을 수 있음
      그리고 ;
    • 표 셀에는 최소한 일부 내용이 있어야 합니다. 그렇지 않으면 브라우저에서 내용을 전혀 표시하지 않을 수 있습니다. 일부 셀이 비어 있어야 하는 경우 일반적으로 줄 바꿈하지 않는 공백(HTML 리터럴)이 그 안에 배치됩니다.
    • 테이블은 웹 페이지의 블록 요소를 나타냅니다.
    • 테이블 및 해당 셀의 크기는 내용에 따라 다릅니다. 테이블은 모든 것이 맞도록 너비와 높이가 늘어납니다.
    • 개별 셀의 경계와 각 셀의 경계와 그 내용 사이에 작은 들여쓰기가 이루어집니다.
    • 헤더 셀(th 요소)의 텍스트는 굵게 중앙에 표시됩니다.
    • 테이블 주위의 테두리와 해당 셀은 기본적으로 그려지지 않습니다.

      • 테이블 헤더

      시작하자 짝을 이루는 태그

      , 테이블에 제목을 부여합니다. 제목 텍스트는 태그 안에 있어야 하는 이 태그 안에 배치됩니다. . 그리고 테이블의 html 코드에서 태그를 배치할 위치에 상관없이 . 또한, 하나 이상의 요소를 사용하는 것이 허용됩니다. 같은 테이블 내에서 HTML 코드태그 바로 뒤에
      , 브라우저는 여전히 표 위에 제목을 표시하고 중앙에 배치합니다. 그러나 일반적으로 태그 여는 태그 바로 뒤에 배치 :









      이것은 테이블
      셀 1.1셀 1.2
      셀 2.1셀 2.2

      표시하다:

      테이블 섹션

      html 테이블은 논리적으로 부분-섹션으로 나눌 수 있습니다. 섹션에는 세 가지 유형이 있습니다.

      • 헤더 섹션, 표의 머리글을 형성하는 머리글 셀이 있는 위치;
      • 신체 섹션, 기본 데이터가 있는 셀이 있는 위치;
      • 완료 섹션, 총 데이터가 있는 셀이 배치됩니다.

      테이블 헤더 섹션은 쌍 태그를 사용하여 구성됩니다.

      .

      바디 섹션은 쌍 태그로 생성됩니다.

      . 하나 HTML 테이블여러 본문 섹션을 포함할 수 있으므로 다음을 만들 수 있습니다. 빌딩 블록균일한 스타일을 적용할 수 있습니다.

      완료 섹션은 쌍 태그로 구성됩니다.

      동일한 컨테이너 내에서
      하나만 있을 수 있습니다.

      이러한 모든 쌍의 태그에는 태그가 포함되어야 합니다.

      , 해당 섹션과 관련된 라인을 형성합니다.




















      1열2열3열
      셀 1.1셀 1.2셀 1.3
      셀 2.1셀 2.2셀 2.3
      결과 1결과 2결과 3

      표 셀 병합

      테이블의 가장 중요한 기능에 대해 이야기하는 것이 남아 있습니다. 세포 병합.속성은 여러 셀을 하나로 결합하는 데 사용됩니다. 콜스팬그리고 행 범위태그

      그리고 . colspan 속성은 가로로 결합된 셀의 수를 설정하고 세로로 rowspan을 설정합니다.













      1.11.2-1.3
      2.12.22.3
      3.1-4.13.23.3
      4.24.3

      예시 결과:

      1.1 1.2-1.3
      2.1 2.2 2.3
      3.1-4.1 3.2 3.3
      4.2 4.3

      셀을 병합할 때 오류가 없도록 각 행의 셀 수를 확인하는 것이 중요합니다. 예, 디자인

      		두 개의 셀을 대체하므로 다음 줄에는 두 개의 태그가 있어야 합니다. , 또는 같은 디자인! 모든 행의 셀 수가 일치하지 않으면 빈 추가 셀이 나타납니다.

      셀 병합 시 잘못된 html 코드의 예:








      셀 1.1셀 1.2
      셀 2.1셀 2.2

      그리고 브라우저에 표시되는 결과:

      저것들. html 코드를 분석하면 첫 번째 줄에 세 개의 셀이 있다는 것을 알 수 있습니다. 그 중 두 개는 colspan 속성을 사용하여 병합되고 두 번째 줄에는 두 개의 셀만 추가됩니다. 따라서 세 번째 빈 셀이 두 번째 행에 나타납니다.

      태그 속성

      이 게시물에서 우리는 이미 하나의 태그 속성을 발견했습니다.

      . 테두리의 너비를 픽셀 단위로 설정하는 테두리 속성을 사용합니다. 기본값은 0이므로 셀은 기본적으로 테두리 없이 표시됩니다.

      테두리 속성 외에도 태그에서 지원하는 몇 가지 다른 중요한 속성이 있습니다.

      . 그것들을 살펴보겠습니다.

      기인하다 맞추다— 세트 조정페이지의 테이블입니다. 각각 왼쪽, 가운데, 오른쪽으로 정렬을 설정하는 left, center, right 값을 취할 수 있습니다. 기본값은 왼쪽입니다.

      기인하다 배경, 배경 이미지를 설정합니다테이블에. 이미지 파일의 주소를 값으로 취합니다.

      bgcolor- 설치 배경색테이블. background 속성과 함께 사용할 수 있습니다.

      기인하다 테두리 색상세트 프레임 색상테이블.

      셀 패딩- 결정 셀 테두리와 내용 사이의 거리. 테이블의 가독성을 향상시킬 수 있습니다. 값은 양수일 수 있습니다.

      셀 간격— 세트 외부 셀 경계 사이의 거리.

      이것에 대해 이야기 할 테이블을 삽입하는 방법 HTML 페이지 끝내겠습니다. 요약만 하면 됩니다.

      • 태그는 테이블을 삽입하는 데 사용됩니다.
      - 테이블 지정, - 라인 추가 및 , 완료 섹션 및 신체 섹션 ;
    • 태그 속성을 사용하여 셀 병합
      • - 셀을 삽입합니다.
    • 테이블은 웹 페이지의 블록 요소입니다.
    • 셀의 내용은 텍스트뿐만 아니라 그림 및 기타 표도 될 수 있습니다.
    • 테이블에는 세 가지 종류의 섹션이 포함될 수 있습니다. 헤더 섹션 —
      • colspan 및 rowspan.

      그게 다야 다음 포스트에서는 html 사이트의 탐색 도구에 대해 이야기하겠습니다. 이 게시물을 놓치지 않도록 내 블로그 업데이트를 구독하십시오! 모두, 곧 만나요!

      2022 bar812.ru. 단지에 대해. 프로그램들. 철. 인터넷. 창