css 테이블의 열 사이의 거리입니다. 셀 사이 패딩

그래서 우리는 테이블 테두리로 수행할 수 있는 가장 간단한 작업을 연구했습니다. 이제 테이블이 미학적으로 훨씬 더 좋아 보입니다. 그러나 셀을 채우는 것은 바로 테두리에 있습니다. 이 문제는 HTML 테이블의 셀을 들여쓰기만 하면 쉽게 해결할 수 있습니다. 그러면 프레임 안의 텍스트, 셀 안의 텍스트가 더 읽기 쉬워집니다.

셀을 들여쓰려면 다음 속성을 사용하십시오. 셀 패딩태그

이 경우 들여쓰기는 속성을 사용하여 설정됩니다. 심. 그것의 도움으로 다음 속성 중 하나를 사용하여 필요한 경우, 즉 위, 오른쪽, 아래 또는 왼쪽으로 들여 쓰기가 어렵지 않습니다. 패딩 탑, 패딩 오른쪽, 패딩 바닥그리고 패딩 왼쪽.

들여쓰기할 픽셀 수를 정확히 설정할 수 있습니다. 하단 들여쓰기가 20 픽셀, 나머지는 모두 10 . 그런 CSS-코드는 다음과 같습니다.

Td( 패딩: 10px; 패딩 하단: 20px; )

그리고 이 단계의 전체 스타일 코드:

테이블(테두리: 단색 1px 파란색; 테두리 축소: 축소; ) td(테두리: 단색 1px 파란색; 패딩: 10px; 패딩 하단: 20px; )

브라우저 결과:

셀 사이 패딩

일반적으로 테이블 생성과 관련된 작업은 이에 대한 태그, 속성 및 속성을 사용하여 해결할 수 있습니다. 이를 통해 프레임을 만들고 셀에 들여 쓰기하고 셀 자체의 색상 배경을 설정할 수 있습니다.

표의 들여쓰기는 셀 내부에만 있는 것이 아닙니다. 그들은 또한 세포 자체 사이에 존재할 수 있습니다.

셀 들여쓰기에는 두 가지 옵션이 있습니다.

1. 속성 사용 셀 간격태그

다음과 같이 강조되어야 합니다. 경계 간격테이블 전체에 대해 작성되는 반면 속성은 심셀에 직접 기록됩니다.

예를 살펴보겠습니다.

표( 테두리: 단색 1px 파란색; 테두리 축소: 분리; 테두리 간격: 5px; ) td( 테두리: 단색 1px 파란색; 패딩: 10px; 패딩 하단: 20px; )

결과 결과:

우리는 다음을 사용하여 그러한 들여쓰기를 시도할 필요가 없다고 즉시 규정할 것입니다. border-collapse: 접기. 실제로 이 옵션을 사용하면 셀이 서로 "고착"됩니다.

그리고 서로 분리하려면 다음을 사용해야 합니다. border-collapse: 분리. 이 값이 기본값임을 이해하는 것이 중요합니다. 그리고 이 문제가 어떻게 해결되는지 시각적으로 보여주기 위해서만 사용됩니다. 이 줄을 삭제하면 서로 별도로 위치한 셀 형태의 결과가 저장됩니다.

우리는 이미 HTML 테이블이 뼈대, 브라우저는 기본적으로 표시하지 않지만. 하지만 그게 다가 아닙니다. 각 테이블 셀에는 다음과 같은 프레임이 있습니다. 세포 경계. 하지만 그게 다가 아닙니다. 특수 태그 속성을 사용하면

HTML 테이블 프레임, 셀 테두리, 셀 간격 및 안쪽 여백.

그래서 프레임 만들기 HTML 테이블 및 세포의 경계하나의 태그 속성만 사용됨

변화를 위해 세포 사이의 거리(그들의 경계) 및 셀에서 프레임으로태그의 테이블

내부에 설치하려면 셀 테두리에서 내용까지 패딩태그에 필수

브라우저는 기본적으로 작은(2픽셀) cellspacing 및 cellpadding 을 사용하므로 간격을 모두 제거하려면 속성을 0으로 설정합니다.

HTML 표의 테두리, 테두리 및 안쪽 여백의 예

프레임 및 셀 테두리만 설정된 테이블:

브라우저 결과

패딩 및 간격이 수정된 테이블:

당연히 내부 들여 쓰기와 셀 사이의 거리를 변경하기 위해 테이블 ​​프레임과 셀 테두리를 그릴 필요는 없습니다.

HTML 구문에 따라 브라우저는 셀 간격 및 셀 패딩 값을 테이블과 해당 셀의 크기에 추가합니다. 예를 들어 셀 너비를 100px로 설정하고 cellpadding="10"으로 설정하면 브라우저에서 너비(좌우 10px)에 20px를 추가하여 120px로 만듭니다. 일반적으로 도중에 알아낼 것입니다.

주제에서 벗어나거나 페이지 가장자리에서 들여쓰기를 제거하는 방법

처음에 모든 브라우저는 종종 필요하지 않은 HTML 페이지 가장자리 주변에 작은 여백을 설정하므로 이제 이를 제거하는 방법을 배웁니다. 일반적으로 이 정보는 교과서의 시작 부분에 있어야 하지만 거의 유용하지 않습니다.

정해진 시간에 태그에 페이지의 각 측면에 대한 이러한 여백의 크기를 설정하는 네 가지 속성이 있습니다: topmargin(위), rightmargin(오른쪽), bottommargin(아래) 및 leftmargin(왼쪽). 이제 이러한 속성은 더 이상 사용되지 않으므로 스타일(CSS)을 적용합니다. 그래서 페이지 가장자리의 여백을 변경하는 방법에는 여러 가지가 있습니다. 두 가지를 보여 드리고 세 번째는 CSS를 배우기로 결정했다면 배우게 될 것입니다.

방법 1. B태그 다음 값을 사용하여 스타일 속성을 지정합니다.

스타일="여백:0" >...

- HTML 페이지의 모든 면에서 한 번에 들여쓰기를 제거합니다.

스타일= "여백:오른쪽 위 왼쪽 아래">...

- 각 측면의 들여쓰기 크기를 시계 방향으로 조정합니다. 일반적으로 픽셀 단위의 치수가 사용됩니다. 예를 들면 다음과 같습니다. 스타일="여백:5px 3px 4px 5px" >...

두 번째 이상 편리한 방법. 인 태그

숙제.

이 단원에서는 모든 것을 자세히 설명하지 않고 일반적인 사항만 설명합니다. 완전성을 위해 예제 결과를 참조하십시오.

1. 각각 하나의 행과 세 개의 열(열)이 있는 세 개의 테이블을 만듭니다.
2. 첫 번째 테이블에는 페이지의 헤더 또는 "헤더"(HTML 문서의 "헤더"와 혼동하지 말 것)를 배치하고 두 번째 테이블에는 왼쪽 및 오른쪽 메뉴와 주요 콘텐츠(콘텐츠)를 배치합니다. , 세 번째 - 페이지의 바닥글 또는 "바닥글".
3. 각 테이블의 첫 번째 열과 마지막 열의 너비를 고정시키십시오.
4. 중요한. 태그 사용 페이지의 "헤더"에 4개의 수평 메뉴 버튼을 생성하기 위해서만 가능합니다. 그 외의 경우에는 이미지를 배경으로 두고, 테이블의 두 번째 셀에서는 일반적으로 색상만 사용하며, 첫 번째와 마지막 테이블에서는 #99FF99입니다.
5. 페이지 콘텐츠 텍스트를 표 셀의 양쪽에 정렬하고 제목을 중앙에 맞춥니다.
6. 테이블의 셀 사이의 거리와 셀의 들여 쓰기에 관해서는 완전히 제거해야 할 곳과 늘려야 할 곳을 스스로 생각하십시오.

우리는 텍스트 정보, 링크, 이미지, 머리글과 같은 페이지의 요소에 스타일을 지정하는 많은 방법을 고려했지만 이 모든 것이 여전히 충분하지 않습니다. 제 글에서는 테이블과 같은 HTML 요소를 자주 사용합니다. 체계화에 도움 중요한 정보전달하기가 더 쉬워집니다.

이 기사에서는 스타일 지정 HTML 표에 대해 자세히 살펴보고 이러한 목표를 달성하기 위해 설계된 새로운 CSS 속성을 배우게 됩니다.

HTML 하이퍼텍스트 마크업 언어는 표와 함께 작동하도록 설계된 10개의 고유한 태그에 CSS 스타일을 바인딩할 수 있는 많은 가능성을 제공했습니다. 더 공부하기 전에 이를 반복할 것을 제안합니다.

예제의 결과:

쌀. 153 테이블의 행 스타일 지정 예

다음 예에서는 테이블 셀(속성)에 모서리 라운딩을 적용하는 방법을 살펴봅니다.

이 예에서는 다음을 수행합니다.

• 바깥쪽 여백이 있는 테이블 중앙에 헤더 셀의 너비와 높이를 50px 로 설정합니다. 투명한테두리 5픽셀
• 헤더 셀에 마우스를 가져가면(pseudo-class :hover) 배경 파란색그림 물감, 주황색텍스트 색상, 테두리 주황색색상 5픽셀 및 반올림 반경 100% .
• 투명 테두리호버에 표시될 테두리를 위한 장소를 예약하기 위해 필요합니다. 이것이 완료되지 않으면 테이블이 "점프"됩니다.

예제의 결과:

다음 예제는 HTML 요소의 사용에 대해 다룹니다. 그리고 그리고 그들의 스타일링.

이 예에서는 다음을 수행합니다.

예제의 결과:

그리고 마지막 예제는 이해하기 어렵고 CSS에 대한 고급 지식이 필요한데, 이 과정에서 자세히 공부하기 위해 계획된 향후 주제를 다룹니다.

앞의 예에서 우리는 HTML 요소가 하나의 CSS 속성인 배경색(background-color)만 적용할 수 있지만 동시에 이 요소에 마우스 오버(pseudo-class :hover)의 배경색을 직접 설정할 수 없습니다. 이 예에서는 CSS만 사용하여 테이블 열을 강조 표시하는 방법을 살펴보겠습니다.

이 예에서는 다음을 수행합니다.

• 테이블이 상위 요소의 100%를 차지하고 테이블 셀이 상위 요소의 25%를 차지하며 1픽셀 녹색의 실선 테두리가 있고 헤더 및 데이터 셀의 높이는 45px로 설정합니다. 값이 있는 border-collapse 속성을 사용하여 셀 사이의 간격을 제거했습니다. .
• 따라서 ::after 의사 요소를 사용하여 각 요소 뒤에 내용을 추가합니다. 호버에. ::after 의사 요소는 배경색이 있는 블록 수준 요소를 삽입하기 때문에 content 속성과 함께 사용해야 합니다. 포레스트 그린그리고 가지고 있다 절대 포지셔닝.
• 여기에서 절대 위치 지정은 조상의 지정된 가장자리를 기준으로 요소를 오프셋하는 데 필요하지만 조상은 기본값인 static 이외의 위치 값을 가져야 합니다. 그렇지 않으면 개수는 브라우저 창의 지정된 가장자리를 기준으로 합니다. 우리가 테이블을 설정한 이유 상대 위치(상대적인 ).
• 생성된 블록에 대해 위쪽 가장자리에서 위치 지정 요소의 오프셋 방향을 지정하는 top 속성과 아래쪽 가장자리에서 위치 지정 요소의 오프셋 방향을 지정하는 bottom 속성을 설정합니다. 두 속성이 모두 0 으로 설정되었으므로 블록은 테이블의 아래쪽과 위쪽에서 요소를 완전히 차지합니다. 이 블록의 너비는 25%로 설정되었으며 이 값은 셀 자체의 너비 값에 해당합니다.
• 그리고 이 블록에 대해 설정한 마지막 속성: 값이 "-1"인 z-index는 위치된 요소의 순서를 결정합니다. Z축. 이 속성은 텍스트가 이 블록 뒤에 있지 않고 이 블록 앞에 있도록 하기 위해 필요합니다. 0보다 작은 값을 설정하지 않으면 블록이 텍스트를 닫습니다.

예제의 결과:

연구의 이 단계에서 요소 배치 프로세스를 이해하지 못한다면 낙심하지 마십시오. 이것은 이해하기 어려운 주제이며 우리도 고려하지 않았지만 다음 기사에서 확실히 고려할 것입니다. 교과서 "CSS에서 요소 배치".

주제에 대한 질문 및 작업

다음 주제로 이동하기 전에 실제 작업을 완료하십시오.

실습을 완료하는 데 문제가 있는 경우 언제든지 별도의 창에서 예제를 열고 페이지를 검사하여 어떤 CSS가 사용되었는지 확인할 수 있습니다.

2016-2020 Denis Bolshakov, 사이트에 대한 의견과 제안을 [email protected]으로 보낼 수 있습니다.

테이블 형식 데이터- 열과 행으로 논리적으로 분할되어 테이블 형태로 표시될 수 있는 정보. HTML 태그는 웹 페이지에 표 형식 데이터를 표시하는 데 사용됩니다.

태그 내부

또는

. 웹 페이지에 표시되는 테이블의 모든 내용을 포함하는 셀입니다. 테이블 프레임 기본적으로 웹 페이지의 HTML 테이블은 테두리 없이 표시되며 테이블과 다른 모든 요소에 테두리를 추가하려면 CSS 속성을 사용합니다. 국경. 그러나 요소에만 테두리를 추가하면 , 그러면 전체 테이블 주위에 표시됩니다. 테이블 셀에도 프레임이 있으려면 요소의 테두리 속성을 설정해야 합니다. 그리고 . 테이블, th, td(테두리: 1px 솔리드 블랙; ) 노력하다 " 이제 테이블과 셀 모두 테두리가 있고 각 셀과 테이블에는 고유한 테두리가 있습니다. 결과적으로 프레임 사이에 빈 공간이 생겼고, 이 공간의 크기는 속성으로 제어할 수 있습니다. 경계 간격, 전체 테이블에 대해 설정됩니다. 즉, 서로 다른 셀 사이의 간격을 개별적으로 제어할 수 없습니다. border-spacing 속성을 0으로 설정하여 셀 사이의 간격을 제거해도 셀 테두리가 서로 맞닿아 이중으로 늘어납니다. 셀 프레임을 병합하려면 속성을 사용하십시오. 국경 붕괴. 두 가지 값을 가질 수 있습니다. 분리: 기본값입니다. 셀이 다음에 표시됩니다. 짧은 거리별도로 각 셀에는 자체 테두리가 있습니다. 축소: 인접한 프레임을 하나로 병합합니다. 셀과 테이블 프레임 사이뿐만 아니라 셀 사이의 모든 간격이 무시됩니다. 이름 성 호머 심슨 마지 심슨 이름 성 호머 심슨 마지 심슨 노력하다 " 테이블 크기 테이블 셀에 테두리를 추가한 후 셀의 내용이 가장자리에 너무 가깝다는 것이 눈에 띄게 되었습니다. 셀 가장자리와 내용 사이에 여유 공간을 추가하려면 다음 속성을 사용할 수 있습니다. 심 : Th, td (패딩: 7px; ) 노력하다 " 표의 크기는 내용에 따라 다르지만 표가 너무 좁아서 늘려야 하는 경우가 종종 있습니다. 속성을 사용하여 표 너비와 높이를 변경할 수 있습니다. 너비그리고 키, 원하는 치수 또는 테이블 자체 또는 셀 설정: 테이블( 너비: 70%; ) 번째( 높이: 50px; ) 노력하다 " 텍스트 정렬 기본적으로 표 머리글 셀의 텍스트는 가운데 정렬되고 일반 셀의 텍스트는 속성을 사용하여 왼쪽 정렬됩니다. 텍스트 정렬텍스트의 가로 정렬을 제어할 수 있습니다. CSS 속성 수직 정렬텍스트 콘텐츠의 수직 정렬을 제어할 수 있습니다. 기본적으로 텍스트는 셀 중앙에 수직으로 정렬됩니다. 수직 정렬은 vertical-align 속성 값 중 하나를 사용하여 재정의할 수 있습니다. top: 텍스트를 셀의 상단에 정렬 가운데: 텍스트를 중앙에 정렬합니다(기본값). bottom: 텍스트가 셀의 아래쪽 테두리에 정렬됩니다. 이름 성 호머 심슨 마지 심슨 노력하다 " 테이블 행 배경색 대체 행이 많은 큰 테이블을 볼 때 큰 금액어떤 데이터가 특정 행에 속하는지 추적하기 어려울 수 있습니다. 사용자의 탐색을 돕기 위해 서로 다른 두 가지 배경색을 번갈아 사용할 수 있습니다. 설명된 효과를 생성하려면 다음을 사용할 수 있습니다. 클래스 선택자, 테이블의 모든 두 번째 행에 추가: 이름 성 위치 호머 심슨 아버지 마지 심슨 어머니 바트 심슨 아들 리사 심슨 딸 노력하다 " 두 번째 줄마다 클래스 속성을 추가하는 것은 다소 지루한 작업입니다. CSS3에 추가됨 의사 클래스:n번째 자식, 다른 방법으로 이 문제를 해결할 수 있습니다. 이제 문서의 HTML 마크업을 변경하지 않고 CSS를 통해서만 스트라이핑 효과를 얻을 수 있습니다. :nth-child 의사 클래스를 사용하면 even(even) 또는 odd(odd) 키워드 중 하나를 사용하여 테이블의 모든 짝수 또는 홀수 행을 선택할 수 있습니다. Tr:n번째-자식(홀수) ( background-color: #EAF2D3; ) 노력하다 " 호버에서 행 배경 변경 테이블 형식 데이터의 가독성을 향상시키는 또 다른 방법은 마우스로 행을 가리킬 때 행의 배경색을 변경하는 것입니다. 이것은 테이블의 원하는 내용을 강조하고 데이터의 시각적 인식을 높이는 데 도움이 됩니다. 이러한 효과를 구현하는 것은 매우 간단합니다. :hover 의사 클래스를 테이블 행 선택기에 추가하고 원하는 배경색을 설정하기만 하면 됩니다. Tr:hover ( 배경색: #E0E0FF; ) 노력하다 " 가운데 정렬 테이블 HTML 정렬센터링 테이블은 테이블의 너비가 부모 요소의 너비보다 작은 경우에만 가능합니다. 테이블을 중앙에 배치하려면 여백 속성을 사용하여 최소 두 개의 값으로 설정해야 합니다. 첫 번째 값은 위와 아래에서 테이블의 외부 여백을 담당하고 두 번째 값은 자동 중앙 정렬을 담당합니다. 표( 여백: 10px 자동; ) 노력하다 " 테이블의 상단과 하단에 다른 들여쓰기가 필요한 경우 속성을 설정할 수 있습니다. 여유세 가지 값: 첫 번째는 상단 들여쓰기, 두 번째는 가로 정렬, 세 번째는 하단 들여쓰기를 담당합니다. 표( 여백: 10px 자동 30px; ) 공유하다: 5,00 / 3 집 →윈도우 10 →css 테이블의 열 사이의 거리입니다. 셀 사이 패딩 → 관련 기사: iPhone으로 QR 코드를 스캔하는 방법 스마트폰 Samsung GT I8160 Galaxy Ace II: 리뷰 및 사양 iPhone으로 QR 코드를 스캔하는 방법 Tele2용 Zvooq 서비스에 관한 모든 것