테이블의 크기, 높이 및 너비는 셀 안에 포함된 내용에 따라 자동으로 결정됩니다. 셀에 내용이 많을수록 테이블 크기가 커지고 그 반대도 마찬가지입니다.

그러나 CSS 기능을 사용하면 필요한 너비와 높이를 정확하게 지정하여 HTML에서 테이블 크기를 조정할 수 있습니다. 공평하게 말하자면, 테이블 속성을 사용하면 원하는 차원을 설정할 수도 있다는 점에 유의해야 합니다. 그러나 지금은 CSS에 대해서만 이야기하겠습니다.

각 테이블에는 내용의 영향을 받는 고유한 최소 너비와 최소 높이가 있다는 점을 강조해야 합니다. 그리고 너비와 높이 값을 더 작게 설정해도 아무 일도 일어나지 않습니다. 테이블의 측면은 최소값을 초과하지 않습니다.

테이블의 너비를 지정하려면 CSS 속성을 사용해야 합니다. 너비, 속성을 사용해야하는 높이를 설정하려면 키.

예를 들어 보면 다음과 같습니다.

테이블(너비: 500px; 높이: 100px; )

브라우저 결과:

전체 코드:

테이블의 너비와 높이 값은 절대값(픽셀 단위) 또는 상대값(백분율)으로 지정할 수 있습니다. 예를 들어 각각 20px와 20%입니다.

백분율을 사용하여 표 크기를 설정하면 상위 요소의 크기를 기준으로 계산됩니다. 우리의 예에 대해 이야기한다면 브라우저 창에 대해 이야기하는 것입니다.

또 다른 의미가 있습니다-자동. 그리고 이 기능의 도움으로 테이블 너비와 높이가 기본적으로 자동으로 계산된다는 점에서 특별합니다. 실제로 이 값을 지정하는 방법은 다음과 같습니다.

너비: 자동;

높이: 자동;

우리는 또 다른 중요한 점에 주목하고 싶습니다. 일반적으로 이 경우에는 작동하지 않으므로 높이를 백분율로 표시하지 않는 것이 좋습니다.

개별 셀 및 열의 크기 지정

브라우저가 셀 내용을 기반으로 열 너비를 올바르게 설정하지 않았다고 생각하는 경우 셀과 열의 크기를 직접 지정할 권리가 있습니다. 이제 HTML 테이블에서 셀 크기를 변경하는 방법에 대해 설명하겠습니다.

셀 크기 조정은 테이블 크기와 동일한 CSS 속성을 사용하여 수행됩니다. 너비그리고 키.

셀에 스타일을 추가하려면 다음 두 가지 옵션 중 하나를 사용할 수 있습니다.

1. 셀에 개별 클래스 이름을 지정합니다. 다음과 같이 표시됩니다: class="cell-50px"

   그런 다음 이러한 클래스에 스타일을 적용해야 합니다.

2. 속성 활성화 스타일, 그 안에 필요한 CSS 코드를 작성합니다.

실제로 두 번째 옵션은 다음과 같습니다.

...

그러나 셀 크기를 개별적으로 자주 변경할 필요는 없다는 점에 유의하고 싶습니다. 일반적으로 이는 테이블 열의 특정 너비를 설정해야 하는 상황에서 수행됩니다. 이 경우 문제가 더 쉽게 해결됩니다. 첫 번째 행의 셀 너비만 지정하면 됩니다.

브라우저 결과:

표의 글꼴 크기를 변경하는 방법

표의 텍스트 크기를 변경해야 하는 경우가 종종 있습니다. 예를 들어 머리글 셀에 있습니다. 이는 CSS 속성을 사용하여 수행할 수 있습니다. 글꼴 크기. 요소의 글꼴 크기를 설정해 보겠습니다. :

목(글꼴 크기: 30px; )

이것으로 이번 강의를 마칩니다. 숙제에 대해 신중하게 생각해 보시기 바랍니다. 그냥 잘 공부하고 생각해보세요. 모두에게 최선을 다하세요!

이제 거의 모든 관리 패널에 자동으로 설정하는 편리한 태그가 있는데 왜 텍스트용 HTML 태그를 알아야 할까요?

사실 웹사이트의 콘텐츠 형식 지정은 Office 응용 프로그램에서 작업하는 것과 근본적으로 다릅니다. 웹 페이지의 표시뿐만 아니라 검색 엔진에서의 홍보도 올바른 디자인에 달려 있기 때문에 여기에서는 단순히 텍스트에 매력적인 모양을 부여하는 것만으로는 충분하지 않습니다.

HTML 태그 및 속성: 기본 구문

모든 텍스트에는 화면에 표시할 내용과 방법을 컴퓨터에 "설명"하는 숨겨진 코드가 있습니다. 모든 정보는 일련의 범용 요소를 사용하여 기록됩니다.

기본적으로 HTML 텍스트 태그는 페이지에 특정 블록을 추가하거나 모양을 변경하는 명령입니다. 올바른 녹음 형식은 다음과 같습니다.

모든 태그가 쌍을 이루는 것은 아닙니다. 예를 들어,
(줄 건너뛰기) 또는

Word 및 기타 프로그램의 기사를 웹 사이트 편집기로 복사할 수 없는 이유

최신 사무용 프로그램은 텍스트에 동일한 HTML 태그를 사용하지만 기본 코드의 99%는 웹 페이지에 사용할 수 없습니다. 애플리케이션 자체에서는 문서가 정상적으로 표시되더라도 웹 사이트에 삽입하면 서식이 손실될 수 있습니다. 또한, 불필요한 태그와 속성이 너무 많아 검색 엔진이 페이지 내용을 적절하게 분석할 수 없습니다. 결과적으로 리소스를 홍보하기가 어려워집니다.

깨끗하고 관련성이 높은 코드를 얻으려면 먼저 일반 편집기에서 만든 HTML 태그의 텍스트를 지워야 합니다. 이를 수행하는 방법에는 여러 가지가 있습니다.

1. 메모장을 통해 기사를 "실행"한 다음 사이트에 삽입하십시오. 응용 프로그램은 모든 HTML을 지우므로 그 후에는 (편집기 도구를 사용하거나 수동으로) 텍스트 서식을 다시 지정해야 합니다.
2. LiveWriter를 사용하여 기사를 작성하고 게시하세요. 인기 있는 블로그 편집기는 즉시 올바른 코드를 생성합니다. 그리고 별도의 탭에서 사이트의 텍스트가 어떻게 보이는지 확인할 수 있습니다.
3. HTML 클리너를 사용하세요. 이 온라인 서비스는 전체 코드를 파괴하지 않고 불필요한 조각만 파괴합니다. 필터를 사용하여 저장하려는 태그를 선택합니다. 이미 최적화된 명령을 코드에 추가하는 강력한 시각적 서식 편집기도 있습니다.

단락

이 요소는 거의 모든 기사에 존재합니다. 각 단락은 이러한 컨테이너 내부에 위치해야 합니다. 이렇게 하면 서식 지정이 단순화되고 사이트의 모든 페이지에서 일관된 스타일을 유지할 수 있습니다. 편의상 태그는

항상 새 줄에 쓰세요.

조정

별도의 HTML 태그 "텍스트 정렬"은 오랫동안 사용되지 않았습니다. 대신 일반 ALIGN 속성이 생성되었습니다. 페이지에서 텍스트 블록의 위치를 ​​변경하려면 CENTER, RIGHT 또는 LEFT의 3가지 값 중 하나를 선택해야 합니다. 제목과 같은 다른 요소의 정렬도 같은 방식으로 설정할 수 있습니다.

어떤 상황에서는 다른 태그가 정렬에 사용됩니다. 예를 들어 요소를 사용하여 위치를 지정할 수 있습니다.

제목 및 부제목

소제목 시스템을 사용하면 논리적인 콘텐츠 구조를 만들 수 있습니다. 텍스트가 의미 있는 블록으로 나누어지면 독자가 새로운 정보에 집중하고 흡수하는 것이 훨씬 더 쉽습니다. 검색 엔진은 또한 헤드라인을 분석하여 페이지를 홍보할 검색어가 무엇인지 이해합니다. 이것이 SEO 전문가들이 주제별 키워드 사용을 권장하는 이유입니다.

HTML은 6가지 수준의 부제목을 사용합니다.

~ 전에

. 이 시스템에는 명확한 계층 구조가 있습니다.

• ...

  . 주요 기사, 온라인 상점의 제품 등). 본문에는 하나만 있을 수 있습니다.

  . 일반적으로 기본 키워드가 포함됩니다.

• ...

  . 두 번째 수준의 하위 제목은 텍스트를 의미 있는 블록으로 나눕니다. 예를 들어, 노트북을 평가하는 경우 다음과 같은 작업을 수행할 수 있습니다.

  다양한 모델명으로

• ...

  . 텍스트가 두 레벨 사이에 있는 경우 세 번째 레벨이 필요합니다.

  또한 작은 블록으로 분해됩니다. 이 예에서는 각 모델에 대한 "성능", "메모리", "비디오 카드" 등의 평가 기준이 될 수 있습니다.

• ,

  ,

  . 실제로는 극히 드뭅니다. 그러나 일반적인 원칙은 동일합니다. 즉, 최상위 하위 제목이 있는 블록에 "중첩"되어야 합니다.

올바른 계층 구조를 유지해야 합니다. 예제로 돌아가면 이는 모델 이름을 다음과 같이 즉시 입력할 수 없음을 의미합니다.

또는

. 더욱이, 동일한 의미의 블록에 대해 서로 다른 수준의 하위 제목을 사용하십시오(예를 들어 다음을 사용하여 순위에서 마지막 자리를 차지한 노트북을 강조 표시하십시오).

).

다음은 HTML 제목의 올바른 구조를 즉시 이해하고 기억하는 데 도움이 되는 다이어그램입니다.

기울기

텍스트에 특수 HTML 태그를 사용하여 목록 형식으로 목록과 지침의 형식을 지정하는 것이 더 좋습니다(일반적인 실수는 몇 문단에 불과합니다).

하이픈이나 숫자로 시작함)

이러한 블록의 구조는 매우 간단합니다. 먼저 목록 유형(글머리 기호 또는 번호 매기기)을 결정합니다.

모든 요소는 여는 태그와 닫는 태그 사이에 있습니다. 각 목록 항목은 새 줄에서 시작하며 형식은 입니다. 요소의 수는 제한되지 않습니다.

선택과 그 속성

CSS에 새 클래스를 추가하지 않고도 이 글꼴과 색상을 사용하여 무엇을 변경할 수 있습니까? 이는 하나의 문장이나 부분만 강조 표시해야 할 때 매우 편리합니다.

여러 가지 속성이 있습니다:

• 얼굴. 텍스트 글꼴을 변경할 수 있습니다. 여러 옵션을 쉼표로 구분하여 나열할 수 있습니다(Tahoma, Verdana). 사용자가 첫 번째 글꼴을 설치하지 않은 경우 시스템은 단순히 대체 글꼴을 사용합니다.
• 크기. 텍스트를 더 크게 또는 더 작게 만들려면 따옴표 안에 1에서 7 사이의 값을 입력하세요.
• 색상. 디자인에 따라 표준 색상(빨간색, 녹색, 파란색) 중 하나를 선택하거나 원하는 색상에 대한 코드를 입력할 수 있습니다.

형식이 지정된 단락을 사용하지 마십시오. , 부제목 대신. 올바른 태그로 동일한 설계 매개변수를 설정하는 것이 좋습니다.

텍스트를 강조하는 방법

단조로운 텍스트는 문단으로 나누어져 있어도 피곤합니다. 관심을 끌고 독자의 관심을 불러일으키려면 핵심 사항을 그래픽으로 강조하는 것이 좋습니다. 다음은 이 작업을 처리하는 데 도움이 되는 몇 가지 명령입니다.

... . 매우 인기 있는 HTML 태그입니다. 굵은 글씨는 즉시 눈에 띄기 때문에 중요한 사항이나 사실을 강조하는 데 사용하는 것이 편리합니다.

많은 사람들이 태그를 혼동합니다. 그리고 . 시각적 차이는 없지만 다르게 작동합니다. 첫 번째는 단순히 텍스트의 모양을 변경하는 반면, 두 번째는 "색인" 역할을 하며 가장 중요한 부분(SEO의 주제별 키워드 및 문구)을 강조 표시합니다.

... . 우아하고 엄격한 이탤릭체는 과학용어, 외국어, 다양한 인용문 디자인에 이상적입니다. 진지한 출판물에서는 예술 작품의 이름도 이탤릭체로 강조 표시됩니다.

... . 아마도 이만큼 많은 논란을 불러일으킨 HTML 태그는 없을 것입니다. 텍스트 밑줄은 거의 사용되지 않습니다. 왜냐하면 이 강조 표시 방법은 역사적으로 하이퍼링크에 할당되어 왔기 때문입니다. 당신이 사용하는 경우 기사에서는 짧은 조각에만 적합합니다(한 줄 이하).

... . 부품을 만들 수 있는 흥미로운 태그입니다. 예를 들어 기존 가격과 새 가격의 대비를 강조하기 위해 광고와 매우 관련이 있습니다.

... . 추가 옵션 없이 글꼴 크기를 늘리는 가장 쉬운 방법입니다.

... . 이전 태그와 동일한 원리로 작동합니다. 내부에 있는 텍스트는 기본 텍스트에 비해 축소됩니다.

^... . 이 형식의 올바른 이름은 위 첨자입니다. 이 태그는 주로 수학 학위 및 각주를 위한 것입니다. 글꼴 크기가 줄어들고 선택한 텍스트가 위로 이동합니다.

_... . 첨자는 종종 다양한 수식에서 발견됩니다. 선택한 부분은 본문 아래에 위치합니다.

의미있는 컨테이너

많은 텍스트에서 일부 블록이 발견되었으므로 해당 블록에 대한 특수 태그가 생성되기 시작했습니다. 각 콘텐츠 유형에 고유한 스타일 세트가 있는 경우 텍스트 부분을 강조 표시하고 해당 텍스트에 포함된 정보를 표시하면 되므로 형식 지정이 단순화됩니다.

... . 컴퓨터 코드를 추가하기 위한 태그입니다. 예제가 포함된 프로그래밍 기사에 없어서는 안 될 사항입니다. 명령은 실행되지 않고 일반 텍스트로 표시됩니다.

... . 예를 들어 인터뷰의 주요 발췌문과 같은 인용문 서식을 지정하기 위해 설계되었습니다.

. 텍스트의 일부를 별도의 블록에 배치합니다. 기본적으로 선택 항목에는 더 많은 왼쪽 여백이 있지만 CSS에서 텍스트의 크기, 스타일 및 색상을 변경할 수도 있습니다.

. 링크를 포함하여 작성자에 대한 정보가 포함된 추가 태그입니다.

경계선

---

간단한 선을 사용하여 큰 섹션의 논리적 끝을 표시할 수 있습니다.

---

페어링된 태그에는 적용되지 않습니다. 이는 닫는 형식 요소가필요하지 않습니다.

WIDTH 속성을 사용하면 적절한 크기(픽셀) 또는 창 너비의 백분율을 지정하여 구분 기호를 더 짧게 만들 수 있습니다.

HTML에서 텍스트 형식을 지정하기 위해 태그를 적절하게 사용하는 방법을 배우면 기사를 더 쉽게 읽을 수 있을 뿐만 아니라 SEO 효과도 높아집니다.

본문 글꼴 크기를 11px로 설정했지만 테이블에는 글꼴이 16px로 표시되는 문제가 있습니다. 이 문제의 원인이 무엇인지 전혀 모르겠습니다. CSS와 출력(페이지로 이동할 때 소스)을 계속해서 살펴봤습니다. 표 글꼴 크기를 11px로 설정하면 원하는 효과가 확실하게 나오지만 본문 스타일과 별도로 따로 설정할 필요는 없습니다.

다음 CSS가 있습니다.

본문( 글꼴 계열: Verdana, Arial, Helvetica, sans-serif; 글꼴 크기: 11px; 여백: 0px; 배경색: #E7D2B8; 색상: #863F2B; ) img.headerImg( 너비: 100%; ) . 메뉴 스트립( 부동: 왼쪽; 너비: 20%; ) .main-content( 부동: 왼쪽; 너비: 80%; ) .clear( 지우기: 둘 다; ) ul.menu( 여백: 0px; 여백-왼쪽: 10px ; 패딩: 0px; 목록 스타일: 없음; ) ul.menu li ( 여백: 0px; 패딩: 0px; 패딩-상단: 10px; 패딩-하단: 10px; ) div.footer (너비: 60%; 여백-왼쪽) : 20%; ) ul.footer-links ( 목록 스타일: 없음; ) ul.footer-links li ( 부동: 왼쪽; 패딩: 20px; ) ul.footer-links li:last ( 지우기: 오른쪽; ) 테이블 ( 너비: 100%; 테두리 축소: 축소 ) td ( 수직 정렬: 상단; )

출력은 다음과 같습니다.

• 집
• 콘택트 렌즈
  • 고객
  • 자치령 대표
  • 아티스트
  • 공급자
  • 다른

암호	이름	성	주소	우편번호	전화	팩스	편집하다
							만들다
코드4	제임스	파란색	주소11 주소24 주소32 타운 5	우편번호4	폰4	폰2	편집하다
코드5	프레드	하얀색	주소13 주소24 주소31 타운 1	우편번호2	폰5	폰3	편집하다

• 링크 1
• 링크 2
• 링크 3
• 링크 4
• 링크 5
• 링크 6

테이블에 글꼴 크기를 16px로 설정할 수 있는 항목이 전혀 표시되지 않습니다. 이는 세 섹션(thead, tfoot, tbody) 모두에서 발생합니다. 또한 Netbeans 6.9는 테이블의 형식을 올바르게 지정하지 않고 문서의 나머지 부분(이전 및 이후)의 형식을 올바르게 지정하는 것 같습니다. 테이블에 뭔가 문제가 있는 것 같지만 무엇이 문제인지는 알 수 없습니다. 이는 Firefox와 Opera(두 가지 모두 최신 버전)에서 발생합니다. IE에서는 절대 사용되지 않기 때문에 IE에서는 테스트하지 않았습니다.

본문 글꼴 크기를 11px로 설정했는데 테이블에는 글꼴이 16px로 표시되는 문제가 있습니다. 이 문제의 원인이 무엇인지 전혀 모르겠습니다. CSS와 출력(페이지로 이동할 때 소스)을 계속해서 살펴봤습니다. 표 글꼴 크기를 11px로 설정하면 원하는 효과가 확실하게 나오지만 본문 스타일과 별도로 따로 설정할 필요는 없습니다.

다음 CSS가 있습니다.

본문( 글꼴 계열: Verdana, Arial, Helvetica, sans-serif; 글꼴 크기: 11px; 여백: 0px; 배경색: #E7D2B8; 색상: #863F2B; ) img.headerImg( 너비: 100%; ) . 메뉴 스트립( 부동: 왼쪽; 너비: 20%; ) .main-content( 부동: 왼쪽; 너비: 80%; ) .clear( 지우기: 둘 다; ) ul.menu( 여백: 0px; 여백-왼쪽: 10px ; 패딩: 0px; 목록 스타일: 없음; ) ul.menu li ( 여백: 0px; 패딩: 0px; 패딩-상단: 10px; 패딩-하단: 10px; ) div.footer (너비: 60%; 여백-왼쪽) : 20%; ) ul.footer-links ( 목록 스타일: 없음; ) ul.footer-links li ( 부동: 왼쪽; 패딩: 20px; ) ul.footer-links li:last ( 지우기: 오른쪽; ) 테이블 ( 너비: 100%; 테두리 축소: 축소 ) td ( 수직 정렬: 상단; )

그리고 결론은 이렇습니다.

• 집
• 콘택트 렌즈
  • 고객
  • 자치령 대표
  • 아티스트
  • 공급자
  • 다른

암호	이름	성	주소	우편번호	전화	팩스	편집하다
							만들다
코드4	제임스	파란색	주소11 주소24 주소32 타운 5	우편번호4	폰4	폰2	편집하다
코드5	프레드	하얀색	주소13 주소24 주소31 타운 1	우편번호2	폰5	폰3	편집하다

• 링크 1
• 링크 2
• 링크 3
• 링크 4
• 링크 5
• 링크 6

테이블에 글꼴 크기를 16px로 설정할 수 있는 항목이 전혀 표시되지 않습니다. 이는 세 섹션(thead, tfoot, tbody) 모두에서 발생합니다. 또한 Netbeans 6.9는 테이블의 형식을 올바르게 지정하지 않고 문서의 나머지 부분(이전 및 이후)의 형식을 올바르게 지정하는 것 같습니다. 테이블에 뭔가 문제가 있는 것 같지만 무엇이 문제인지는 알 수 없습니다. 이는 Firefox와 Opera(두 가지 모두 최신 버전)에서 발생합니다. IE에서는 절대 사용되지 않기 때문에 IE에서는 테스트하지 않았습니다.