온라인으로 HTML에 테이블을 삽입하십시오. 예: 너비 속성 사용

모두들 좋은 하루 보내세요, 사랑하는 친구들. 여름은 잘 지내고 있나요? 모두가 잘 지내길 바랍니다. 글쎄, 오늘 우리는 html의 기초를 계속해서 공부할 것이고 오늘은 아마도 이 주제에 대한 마지막 수업이 될 것입니다. 왜냐하면 다음에는 CSS에 뛰어들 것이기 ​​때문입니다. 따라서 HTML에 관해 말하면 테이블에 대해 이야기하지 않을 수 없습니다. 왜냐하면 테이블도 상당히 중요한 주제이기 때문입니다.

예를 들어 WordPress를 생각해보십시오. 기본적으로 이 엔진에서는 테이블을 생성할 수 없습니다. 특수 추가 기능(플러그인)이나 특수 프로그램 코드(스크립트)가 필요합니다. 하지만 간단한 태그만으로 우리가 원하는 것을 할 수 있습니다. 일반적으로 오늘은 html로 테이블을 만드는 방법을 알려 드리겠습니다. 이것이 정말 많은 도움이 될 수 있기 때문입니다.

스프레드시트 레이아웃을 사용하여 첫 웹사이트를 어떻게 디자인했는지 기억합니다. 머리글, 사이드바, 바닥글 및 콘텐츠 블록은 단지 테이블 요소였습니다. 나는 내 기사에서 이것을 언급했습니다. 사실, 오늘날 테이블을 사용하여 웹 사이트를 만드는 것이 더 이상 관례가 아니지만 이것이 테이블이 필요하지 않다는 의미는 아닙니다. 정반대.

또한 좋은 점은 아무것도 그릴 필요조차 없다는 것입니다. 모든 작업은 일반 메모장(또는 Notepad++와 같은 다른 메모장)에서 매우 쉽게 수행됩니다. 일반적으로 일할 준비를합시다.

태그

여기서 마크업은 다른 태그보다 조금 더 복잡하지만 모두 빨리 기억됩니다. 그러니 주의가 산만해지지 않도록 지켜봅시다.

모든 테이블은 항상 쌍을 이루는 태그로 둘러싸여 있습니다.

. 저것들. 이 표시는 테이블이 여기에 위치할 것이라는 명령을 제공합니다.

짝을 이루는 태그가 테이블 내부에 배치됩니다. . 이 쌍은 테이블에 하나의 행을 생성했으며 그러한 태그가 얼마나 많이 기록될 것인지, 행이 너무 많을 것임을 의미합니다.

글쎄, 내부 우리는 이제 다른 한 쌍을 내려 놓을 것입니다 - . 이 쌍은 이 행에 하나의 열을 생성했음을 의미하며, 각 tr에 여러 개의 td를 쓰면 이 행에 여러 개의 열이 있게 됩니다. 알았습니다? 그렇지 않다면 여기에서 모든 것이 어떻게 작동하는지에 대한 예를 살펴보겠습니다. 학생과 성적 테이블을 만들고 싶다고 가정해 보겠습니다. 그런 다음 태그 안에 다음을 작성합니다. :

	수학	러시아어	이야기
메드베데프	3	5	5
스미르노프	5	5	5
소콜로프	3	2	3

우리는 여기서 무엇을 했나요? 그리고 4개의 행(tr)을 만들었고, 각 행에는 4개의 테이블(td)이 포함되어 있습니다. 첫 번째 tr 블록에는 학문 분야의 이름을 적고, 표가 깨지지 않도록 첫 번째 열은 비워 두었습니다.

또한 각 첫 번째 쌍에서 TD학생과 다른 모든 사람의 이름을 삽입합니다. TD해당 셀에 등급을 입력하세요. 일반적으로 이것을 작성하고 파일을 저장한 다음 브라우저에서 열면 이것이 어떻게 발생하는지 스스로 이해할 수 있습니다.

하지만 문서에 들어가 보면 테이블이 우리가 계획했던 것과 그다지 유사하지 않다는 것을 알 수 있습니다. 여기에 무엇이 빠졌나요? 맞습니다-경계. 하지만 걱정하지 마세요. 이에 대해서는 아래에서 말씀드리겠습니다.

하지만 품위를 유지하기 위해 테이블의 데이터를 강조 표시하고 중앙에 배치하는 또 다른 태그를 보여 드리겠습니다. 이 태그는 다음과 같이 작성됩니다. . 표에서 제목을 강조해 보겠습니다. 이렇게 하려면 태그를 교체하면 됩니다. TD, 에 일우리가 성과 학문 이름을 쓰는 곳에.

그리고 이를 통해 우리가 무엇을 달성할 수 있는지 살펴보겠습니다. 내가 말했듯이 이제 이러한 이름은 중앙에 강조 표시됩니다. 이것이 우리가 노력한 것입니다.

일반적으로 우리는 태그를 알아낸 것 같습니다. 다른 것들도 있지만(htmlbook을 볼 수 있습니다), 나는 그것들에 집중하지 않을 것입니다.

속성

당연히 테이블과 같은 것은 특별한 속성 없이는 할 수 없으며 그 중 일부를 보여 드리겠습니다.

국경

글쎄요, 위에서 말씀드린 것, 즉 경계에 대해서부터 시작하고 싶습니다. 기본적으로 아무것도 없기 때문에 테이블은 평범해 보이고 완전히 명확하지 않습니다. 하지만 이 문제는 해결될 수 있으며 여는 태그에 직접 배치되는 테두리 속성이 도움이 될 것입니다.

. 아래 예에서 보여드린 대로, 즉 border="1" 속성의 값을 설정하세요.

이 작업을 수행한 후 결과를 저장하고 문서를 실행합니다. 잘? 그것은 완전히 다른 문제입니다. 이제 테이블은 정상적인 윤곽을 얻었으며 원하는 대로 보입니다. 다양한 테두리 값을 실험해보고 자신에게 가장 적합한 것이 무엇인지 확인할 수 있습니다.

들여쓰기 및 거리(셀 패딩 및 셀 간격)

모든 경우에 하나의 테이블 디스플레이가 모든 사람에게 적합하지 않은 것은 당연합니다. 그러나 두 가지 유사한 속성 덕분에 이를 약간 변경할 수 있습니다.

Cellpadding="" - 프레임 자체에서 셀 내용까지의 거리를 변경합니다. 따라서 테이블의 모든 셀이 더 커집니다. 이 속성을 테이블에 쓰고 값을 5로 설정하여 어떻게 다른지 살펴보겠습니다. 원본 버전에서.

깡충깡충 뛰다. 당신이 보여요? 거리가 늘어났습니다. 이렇게 하면 필요한 값을 직접 대체하여 셀을 확장할 수 있습니다.

Cellspacing="" - 테이블 셀 사이의 거리를 변경하며 해당 값도 픽셀 단위로 측정됩니다. 이 속성을 값 5로 설정하고 어떤 일이 발생하는지 살펴보겠습니다.

잘? 요점이 분명합니까? 보시다시피 셀 사이의 거리가 넓어졌습니다. 이것이 바로 우리가 달성하려고 했던 것입니다.

맞추다

글쎄요, 모든 것을 서로 다른 위치에 정렬할 수 있게 해주는 이 놀라운 속성이 없다면 우리는 어디에 있을까요? Align은 이전에 살펴본 다른 태그와 정확히 동일하게 작동하며 세 가지 의미를 갖습니다.

• 센터
• 오른쪽

각각의 값을 적어보고 테이블이 어떻게 분포되는지 살펴보겠습니다.

잘? 모든 것이 작동하는 것 같고 명확해야 한다고 생각합니다. 하지만 궁금한 점이 있으면 주저하지 말고 문의하세요.

글쎄, 그것은 기본적으로 오늘 테이블에 대해 내가 말하고 싶은 전부입니다. 모든 것이 당신에게 명확해지기를 바랍니다. 글쎄요, HTML 및 CSS 작업의 모든 복잡성을 자세히 연구하고 웹 사이트를 직접 레이아웃하는 방법을 배우고 싶다면 다음을 시청하는 것이 좋습니다. 훌륭한 비디오 코스이 주제에 대해. 내 생각에 이것은 초보자에게 가장 이해하기 쉬운 비디오 코스이며, 모든 것을 간단히 분류하고 정리할 것입니다.

자, 오늘 수업을 마무리하겠습니다. 중요한 정보나 뉴스를 놓치지 않도록 내 블로그 업데이트를 구독하는 것을 잊지 마세요. 그리고 우리는 다른 기사에서 뵙겠습니다. 행운을 빌며 안녕!

감사합니다, 드미트리 코스틴.

표는 웹 페이지에 있어야 하는 가장 중요하면서도 복잡한 요소 중 하나입니다. 도움을 받으면 중요하고 유용한 정보를 매우 간결한 형식으로 제공하는 것이 편리합니다. 물론 다양한 엔진에서 실행되는 대부분의 템플릿 편집기를 사용하면 웹 사이트 페이지나 별도의 출판물에 표를 자동으로 삽입할 수 있습니다. 하지만 웹 리소스와 해당 페이지의 디자인을 처음부터 새로 만드는 경우에는 어떻게 될까요? 그런 다음 초보 마스터는 문제에 직면할 수 있습니다. 만드는 방법 이 요소를 정확하고 빠르게 만드는 방법을 알아 보겠습니다.

편집자 선택

우선, 테이블 생성을 시작할 때 작업할 편집기를 결정해야 합니다. 물론 가장 쉬운 방법은 메인 사이트 코드를 생성하는 프로그램을 선택하는 것입니다. 그러나 이러한 목적을 위해서는 오래된 메모장을 사용하는 것이 가장 좋습니다.

왜 인생이 복잡하냐고 물을 수도 있습니다. 왜냐하면 편집기에서 모든 작업을 한 번에 수행하면 결과를 바로 볼 수 있고 프로그램의 힌트도 사용할 수 있기 때문입니다.

예, 그렇습니다. 그러나 처음부터 테이블을 생성하면 테이블 생성 원리를 철저하게 연구할 수 있을 뿐만 아니라 기본 코드의 성가신 오타와 오류도 피할 수 있습니다. 때로는 커서가 실수로 아래로 이동하고 쓰기 과정에서 코드에 오류가 발생하여 때로는 찾기가 어려운 경우가 있습니다. 메모장에서 테이블을 생성한 후 해당 코드를 복사하여 필요한 위치에 붙여넣을 수 있습니다.

테이블 생성 알고리즘

먼저 HTML로 테이블을 만드는 방법에 대한 간단한 알고리즘을 만들어 보겠습니다. 이는 각 단계의 순서를 이해하는 데 필요합니다. 그런 다음 각 포인트를 정확히 수행하는 방법을 알아 보겠습니다.

준비 단계부터 시작해 보겠습니다.

1. 종이에 테이블의 개략도를 그립니다.

2. 행과 셀의 개수를 셉니다. 후자의 수가 다른 경우 각 행에 대해 별도로 계산합니다.

3. 행의 머리글 셀 수를 결정합니다(예: "번호", "이름" 셀 등).

4. 테이블의 주요 매개변수인 색상, 높이 및 너비, 텍스트 정렬 등 일반적으로 필요한 모든 것을 기록합니다.

1. 테이블 태그를 삽입합니다.

2. 필요한 수량에 따라 라인 태그를 삽입합니다.

3. 줄에 종이에 적힌 숫자에 따라 셀 태그(일반 및 대문자)를 삽입합니다.

4. 테이블 전체에 대한 매개변수를 설정합니다.

5. 필요한 경우 개별 셀에 대한 표시기를 설정합니다.

6. 셀을 텍스트로 채웁니다.

테이블 만들기

이제 편집기를 선택했습니다. 이제 HTML로 테이블을 만드는 방법을 알아 보겠습니다. 페이지 코드에 테이블을 삽입하는 태그(

)가 쌍을 이루고 있습니다. 즉, 구성은 이 태그로 시작해서 끝납니다..

테이블 태그를 삽입한 후 행과 셀 생성으로 넘어갑니다.

이러한 요소도 쌍을 이룬다는 점을 즉시 알아두겠습니다. 꼬리표 라인을 지정하고 - 세포.

헤더 셀의 경우 쌍 요소를 사용하세요. .

이미 언급했듯이 첫 번째 단계는 행을 만든 다음 그 안에 셀을 쓰는 것입니다. 혼동하지 않으려면 각 블록 사이에 한두 줄의 들여쓰기를 만들거나 "Tab" 키를 사용하여 요소의 새 블록을 작성하는 것이 좋습니다.

이것은 어떤 모습일까요? 그렇게:

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

  아니요.	성
  1	;	이바노프

  .

보시다시피 이것에 대해 복잡한 것은 없습니다. 가장 중요한 것은 행과 셀 수를 혼동하지 않는 것입니다. 그렇지 않으면 테이블이 비뚤어질 수 있습니다.

우리는 HTML에서 테이블 생성에 대해 논의했습니다. 이제 행렬 자체와 행 및 셀의 매개변수로 이동할 수 있습니다.

테이블 옵션

코드를 작성할 때 테두리, 배경, 텍스트 정렬 등의 사항에 주의해야 합니다.

테이블 매개변수는 태그에 지정됩니다.

. 여기에는 다음이 포함됩니다.

1. 테두리 - 테두리 너비. 정수로 지정됩니다. 기본적으로 모든 테이블의 경계는 0입니다.

2. 테두리 색상 - 테두리 색상입니다. 16진수 색상 코드(#00008B) 또는 영어 이름(DarkBlue)으로 지정할 수 있습니다. 기본적으로 항상 회색입니다.

3. Bgcolor - 코드나 이름을 사용하여 지정하기도 합니다.

4. 정렬 - 테이블 뒤의 텍스트 정렬입니다. 기본적으로 왼쪽 정렬됩니다. 이 매개변수에는 다음과 같은 옵션이 있습니다.

• 왼쪽 - 오른쪽 주위로 흐름;
• 오른쪽 - 왼쪽 주위로 흐름;
• center - 줄 바꿈 없이 테이블을 중앙에 표시합니다.

5. 너비와 높이 - 테이블의 너비와 높이. 픽셀 또는 백분율(브라우저 창 크기 기준)로 지정할 수 있습니다.

이 지표 또는 저 지표를 처방할 때는 디자인에 특별한 주의를 기울여야 합니다. 매개변수를 지정한 후에는 "등호" 기호가 있어야 하며 그 뒤에는 지정된 값이 따옴표로 표시됩니다.

텍스트의 색상은 HTML 형식의 일반 텍스트와 동일하게 디자인되었습니다.

테이블 디자인의 예:

;

;

;

;

;

;

;

;

아니요.	성
1	;	이바노프

.

행 옵션

따라서 우리는 HTML로 테이블을 만들고 주요 매개변수를 지정하는 방법을 이미 알아냈습니다. 하지만 선을 강조해야 한다면 어떻게 될까요? 표의 본문과 다르게 형식을 지정해야 합니까?

라인 매개변수는 태그에 기록됩니다. 테이블 데이터와 정확히 동일합니다. 라인에 대해 다음 변수를 설정할 수 있습니다.

1. 당신은 이미 border, bordercolor 및 bgcolor를 알고 있습니다.

2. 정렬 - 한 줄의 텍스트 정렬입니다. 왼쪽, 중앙, 오른쪽 값을 취할 수 있습니다.

3. Valign - 이 태그는 텍스트를 수직으로 정렬합니다. 다음 값을 허용합니다.

• top - 텍스트가 위쪽 테두리에 정렬됩니다.
• 중간 - 중앙에;
• 하단 - 하단 테두리를 따라.

라인 형식의 예:

• ;
• 아니요.;
• 성;
• .

셀 옵션

그리고 HTML로 표를 만드는 방법을 알고 싶은 사람들이 주목할 가치가 있는 마지막 사항은 일반 셀과 대문자로 표시된 개별 셀의 매개 변수입니다. 기본적으로 모든 작업은 테이블이나 행과 동일하게 수행됩니다. 유일한 것은 두 가지 더 중요한 요소가 추가된다는 것입니다.

1. Colspan - 이 매개변수는 셀이 확장될 수 있는 열 수를 지정합니다.

2. Rowspan - 이 셀이 차지하는 행 수를 나타냅니다.

디자인은 한 줄을 쓰는 것과 다르지 않기 때문에 코드 예시는 생략하겠습니다.

결론

테이블을 만드는 것은 언뜻 보이는 것처럼 어렵지 않습니다. 코드를 작성할 때 가장 중요한 것은 인내와 관심입니다.

HTML에 표를 삽입하는 방법은 표의 코드를 복사하여 페이지에서 표가 있어야 한다고 생각하는 위치에 정확히 붙여넣기만 하면 됩니다.

실험하는 것을 두려워하지 마세요. 곧 완벽하게 테이블을 만드는 기술을 익히게 될 것입니다. 행운을 빌어요!

테이블은 행과 셀에 분산된 데이터의 모음입니다. 대부분의 셀에는 표 형식의 데이터가 포함되어 있으며 다른 셀에는 내용을 설명하는 행 및 열 제목이 포함되어 있습니다.

HTML 문서에서 테이블을 생성하려면 태그를 사용하세요.

, 이는 테이블의 모든 내용을 포함하는 컨테이너를 나타냅니다.

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

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

HTML에는 셀을 생성하기 위한 두 가지 태그가 있는데, 첫 번째는

그리고 . 태그 사이에 삽입된 텍스트 , 태그가 이 스타일을 상속하지 않습니다. , 태그 없음 .

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

예

, 일반 데이터 셀을 생성합니다. 기본적으로 태그 내용은	왼쪽으로 정렬됩니다. 셀 생성을 위한 두 번째 태그는 태그입니다.	를 사용하면 열이나 행의 제목이 포함된 셀을 정의할 수 있으며, 해당 셀의 내용은 굵은 텍스트로 표시되고 가운데 정렬됩니다. 태그	그리고	문서 본문에 사용할 수 있는 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 일 테이블을 생성하고 스타일을 통해 해당 매개변수(여백 및 셀 사이의 거리)를 지정합니다. 해결책 표는 텍스트와 그림을 포함할 수 있는 셀의 행과 열로 구성됩니다. 웹페이지에 테이블을 추가하려면 태그를 사용하세요. . 이 요소는 테이블의 내용을 정의하는 요소에 대한 컨테이너 역할을 합니다. 모든 테이블은 태그를 사용하여 각각 지정되는 행과 셀로 구성됩니다. 그리고 그리고 행 및 열 그룹화를 사용하는 방법을 이해하는 가장 쉬운 방법은 스도쿠 테이블의 예를 사용하는 것입니다. col 태그는 각 열에 대해 별도로 매개변수를 설정합니다. 소스 코드를 어떻게 작성하는지는 중요하지 않습니다. 또는 예 . 테이블에는 하나 이상의 셀이 포함되어야 합니다(예 1). 태그 대신 허용됨 태그 사용 . 태그로 스타일이 지정된 셀의 텍스트 는 브라우저에 굵은 글꼴로 표시되며 셀 중앙에 정렬됩니다. 그렇지 않으면 태그를 통해 생성된 셀 간의 차이점이 그리고 아니요. 예시 1: 테이블 생성 HTML5 IE Cr Op Sa Fx 셀 1 셀 2 셀 3 셀 4 세포의 순서와 모양은 그림 1에 나와 있습니다. 1. 쌀. 1. 4개의 셀로 구성된 테이블을 생성한 결과 테두리 태그 속성 빈 값으로만 ​​추가할 수 있습니다( ) 또는 1과 같습니다. 다른 모든 값은 검증되지 않습니다. 셀 내부의 여백을 제어하려면 td 선택기에 추가된 패딩 스타일 속성을 사용하세요. 셀 사이의 거리는 테이블 선택기에 추가된 테두리 간격 속성(예 2)에 의해 변경됩니다. IE 브라우저는 버전 8.0부터 이를 이해합니다. 예 2: 셀 내부 여백 HTML5 CSS 2.1 IE Cr Op Sa Fx 제목 1 제목 2 셀 3 셀 4 필드와 셀 사이의 거리가 포함된 테이블이 그림 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 테이블 열 그룹화 태그 태그 속성 노란색 빨간색 결과: 스타일을 정하려고 하지 마세요 텍스트 정렬태그용
...	어떤 태그의 하위도 아닙니다

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

결과:

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