CSS 셀 사이의 패딩. 셀 내용 정렬

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

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

. 그러나 더 선호되는 또 다른 옵션이 있습니다. CSS.

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

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

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

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

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

브라우저 결과:

셀 사이 패딩

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

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

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

속성 사용 셀 간격태그

사용 CSS-속성 경계 간격.

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

예를 살펴보겠습니다.

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

결과 결과:

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

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

CSS를 사용하면 표 테두리의 스타일뿐만 아니라 개별 셀의 테두리 스타일도 설정할 수 있습니다. 각 셀에는 자체 테두리가 있으므로 인접한 셀 간의 테두리는 두 배가 됩니다. 그러나 인접한 셀의 경계를 하나로 병합하는 것은 가능합니다. 이를 위한 border-collapse 속성이 있습니다. 다음 값을 사용합니다.

border-collapse: separate - 각 셀에는 고유한 테두리가 있습니다(기본값).

border-collapse: 축소 - 일반 테두리

border-collapse: inherit - 부모 요소에서 값을 가져옵니다.

예를 들어 테이블을 만들고 페이지에 있을 모든 테이블의 셀에 대한 프레임을 설정해 보겠습니다. 처음에는 테이블이 어떻게 보이는지 보기 위해 아무 것도 변경하지 않을 것입니다.

스타일:

1
2
3
4
5
6

페이지

숙제.

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

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

표에서 셀 테두리 사이의 거리를 설정합니다. border-spacing 속성은 테이블에 border-collapse가 collapse 로 설정된 경우 작동하지 않습니다.

통사론

테두리 간격: 값 [값]

인수

하나의 값은 셀 테두리 사이의 세로 및 가로 거리를 모두 설정합니다. 인수가 두 개인 경우 첫 번째 인수는 수평 거리를 결정하고 두 번째 인수는 수직 거리를 결정합니다.

경계 간격

1	2
3	4

결과 이 예무화과. 1.

쌀. 1. 테두리 간격 옵션 적용

메모

태그하는 경우

cellspacing 매개 변수를 추가한 다음 border-spacing 스타일 속성을 사용할 때 고려되지 않고 cellspacing 값이 무시됩니다. 이 규칙의 예외는 브라우저입니다. 인터넷 익스플로러, border-spacing 속성을 전혀 이해하지 못합니다.

테이블

border-collapse는 테이블 셀 주위에 테두리를 표시하는 방법을 설정합니다. 이 매개 변수는 셀에 대한 프레임이 설정될 때 역할을 하며 셀의 교차점에서 두 배 두께의 선이 얻어집니다. 축소 값을 추가하면 브라우저가 테이블의 해당 위치를 구문 분석하고 이중선을 제거합니다.

table-layout은 브라우저가 내용에 따라 테이블 셀의 높이와 너비를 계산하는 방법을 지정합니다.

border-spacing은 테이블의 셀 테두리 사이의 거리를 설정합니다. border-spacing 속성은 테이블에 border-collapse가 축소로 설정된 경우 작동하지 않습니다.

CSS 사양은 테이블 디자인에 대한 무한한 가능성을 제공합니다. 기본적으로 테이블과 테이블 셀에는 눈에 보이는 테두리나 배경이 없으며 테이블 내의 셀은 서로 가까이 있지 않습니다.

표 셀의 너비는 내용의 너비에 따라 결정되므로 표 열의 너비는 다를 수 있습니다. 행에 있는 모든 셀의 높이는 동일하며 가장 높은 셀의 높이로 결정됩니다.

테이블 형식

1. 표 테두리

그 안에 있는 표와 셀은 기본적으로 테두리 없이 브라우저에 표시됩니다. 표 테두리 border 속성에 의해 설정됩니다.

테이블(border-collapse: collapse; /*셀 사이의 빈 공간 제거*/ border: 1px solid gray; /*테이블의 외부 테두리 설정 회색 색상두꺼운 1px*/ )

헤더 셀 테두리각 열은 th 요소에 대해 설정됩니다.

Th (테두리: 1px 단색 회색;)

셀 테두리테이블 본문은 td 요소에 대해 지정됩니다.

Td(테두리: 1px 솔리드 그레이;)

인접한 셀의 테두리 두께는 두 배가 되지 않으므로 다음과 같은 방법으로 전체 테이블의 테두리를 설정할 수 있습니다.

Th, td (테두리: 1px 솔리드 그레이;)

표의 바깥쪽 테두리는 너비를 늘려 강조 표시할 수 있습니다.

표(테두리: 3px 단색 회색;)

테두리는 부분적으로 설정할 수 있습니다.

/* 테이블에 3px 회색 외부 테두리 설정 */ table (border-top: 3px solid gray; ) /* 테이블 본문 셀에 1px 회색 테두리 설정 */ td (border-bottom: 1px solid gray;)

border 속성에 대한 자세한 내용을 읽을 수 있습니다.

2. 테이블의 너비와 높이를 설정하는 방법

기본 테이블 너비와 높이셀의 내용에 따라 결정됩니다. 너비를 설정하지 않으면 가장 넓은 행(라인)의 너비와 같습니다.

테이블 및 열 너비 width 속성을 사용하여 설정합니다. 테이블이 table (width: 100%;) 로 설정되면 테이블의 너비는 테이블이 위치한 컨테이너 블록의 너비와 동일합니다.

테이블과 열의 너비는 일반적으로 px 또는 %로 설정됩니다. 예를 들면 다음과 같습니다.

테이블 (너비: 600px;) 번째 (너비: 20%;) td:first-child (너비: 30%;)

테이블 높이설정되지 않았습니다. 행 높이요소에 상단 및 하단 패딩을 추가하여 테이블을 조작할 수 있습니다.

. 실제로 다음과 같은 방법으로 특수한 열 서식이 필요한 경우가 있습니다.

태그를 사용하여

여러 열의 배경을 설정할 수 있습니다.

선택기 테이블 td:first-child , 테이블 td:last-child 를 사용하여 테이블의 첫 번째 또는 마지막 열에 대한 스타일을 설정할 수 있습니다(테이블 헤더의 첫 번째 셀 제외).

테이블 선택기 td:nth-child(열 선택 규칙)를 사용하여 테이블의 모든 열에 대한 스타일을 설정할 수 있습니다.

CSS 선택자에 대한 자세한 내용을 읽을 수 있습니다.

5. 표에 제목을 추가하는 방법

태그를 사용하여 테이블에 헤더를 추가할 수 있습니다.

그리고

. height 속성으로 높이를 고정하는 것은 권장되지 않습니다.

Th, td (패딩: 10px 15px;)

3. 테이블 배경 설정 방법

기본 테이블 배경세포는 투명합니다. 테이블이 포함된 페이지나 블록에 배경이 있는 경우 테이블을 통해 표시됩니다. 표와 셀 모두 배경을 설정하면 표와 셀의 배경이 겹치는 부분은 셀의 배경만 보이게 됩니다. 전체 테이블 및 해당 셀의 배경은 다음과 같을 수 있습니다.
채우기 ,
,
.

4. 테이블 열

테이블 CSS 모델은 주로 태그를 사용하여 형성된 행(행)에 초점을 맞춥니다.

, 캡션 쪽 속성을 이용하여 표 앞이나 아래에 배치할 수 있습니다. text-align 속성은 헤더 텍스트를 가로로 정렬하는 데 사용됩니다. 상속.

...

테이블 번호 1
회사	1분기	2분기	3분기	4분기

캡션( 캡션 쪽: 아래쪽; 텍스트 정렬: 오른쪽; 패딩: 10px 0; 글꼴 크기: 14px; )

쌀. 2. 표 아래에 제목을 표시하는 예

6. 셀 프레임 사이의 틈을 제거하는 방법

테이블 셀 테두리는 기본적으로 작은 간격으로 구분됩니다. 테이블에 border-collapse:collapse를 설정하면 간격이 제거됩니다. 재산이 상속됩니다.

통사론

테이블(border-collapse: collapse;)
쌀. 3. 병합 및 분할 셀 테두리가 있는 테이블의 예

7. 셀 테두리 간격 늘리는 방법

border-spacing 속성을 사용하여 셀 테두리 사이의 간격을 변경할 수 있습니다. 이 속성은 테이블 전체에 적용됩니다. 상속.

통사론

표(테두리 축소: 분리; 경계 간격: 10px 20px;) 표(경계 축소: 분리; 경계 간격: 10px;)
쌀. 4. 셀 프레임 사이의 간격이 증가한 테이블의 예

8. 빈 테이블 셀을 숨기는 방법

빈 셀 속성은 빈 셀을 숨기거나 표시합니다. 내용이 없는 셀에만 영향을 줍니다. 셀이 배경으로 설정되고 테이블이 테이블로 설정되면 (border-collapse: collapse;) 셀이 숨겨지지 않습니다. 상속.

회사	1분기	2분기	3분기
마이크로소프트	20.3	30.5
Google	50.2	40.63	45.23

테이블(border: 1px solid #69c; border-collapse: separate; empty-cells: hide; ) th, td (border: 2px solid #69c;)

쌀. 5. 빈 테이블 셀 숨기기 예시

9. table-layout 속성을 사용한 테이블 레이아웃 레이아웃

테이블 레이아웃의 레이아웃은 고정 레이아웃 또는 자동 레이아웃의 두 가지 접근 방식 중 하나로 결정됩니다. 이 경우 레이아웃은 표의 너비가 셀의 너비 사이에 어떻게 분포되어 있는지를 나타냅니다. 속성은 상속되지 않습니다.

통사론

테이블(테이블 레이아웃: 고정;)

10. 최고의 테이블 레이아웃

1. 수평적 미니멀리즘

가로 테이블은 텍스트가 가로로 읽혀지는 테이블입니다. 각 엔터티는 별도의 줄입니다. th 제목 아래에 2픽셀 테두리를 배치하여 미니멀한 스타일로 이러한 테이블의 스타일을 지정할 수 있습니다.

직원	샐러리	보너스	감독자
스티븐 C. 콕스	$300	$50	단발
조세핀 탄	$150	-	애니
조이스 밍	$200	$35	앤디
제임스 A. 펜텔	$175	$25	애니

테이블 ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text -align: 왼쪽; ) th ( 글꼴 두께: 일반; 색상: #039; 테두리 하단: 2px 단색 #6678b1; 패딩: 10px 8px; ) td ( 색상: #669; 패딩: 9px 8px; 전환: .3s linear; ) tr:hover td (색상: #6699ff;)

많은 수의 행이 있는 이 테이블 디자인은 행을 읽기 어렵게 만듭니다. 이 문제를 해결하기 위해 모든 td 요소 아래에 1픽셀 테두리를 추가할 수 있습니다.

Td(border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*위와 같은 다른 코드*/

tr 요소에 :hover 효과를 추가하면 미니멀리스트 테이블을 더 쉽게 읽을 수 있습니다. 마우스로 셀 위로 마우스를 가져가면 같은 행에 있는 나머지 셀이 동시에 선택되므로 테이블에 여러 열이 있는 경우 정보를 쉽게 추적할 수 있습니다.

Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (background: #e8edff ;)

2. 세로형 미니멀리즘

이러한 테이블은 거의 사용되지 않지만 그럼에도 불구하고 세로 방향 테이블은 열로 표시되는 개체의 설명을 분류하거나 비교하는 데 유용합니다. 열을 구분하기 위해 공백을 추가하여 미니멀한 스타일로 스타일을 지정할 수 있습니다.

Th ( 글꼴 두께: 일반; 테두리 하단: 2px 단색 #6678b1; 테두리 오른쪽: 30px 단색 #fff; 테두리 왼쪽: 30px 단색 #fff; 색상: #039; 패딩: 8px 2px; ) td ( 테두리- 오른쪽: 30px 단색 #fff; 테두리-왼쪽: 30px 단색 #fff; 색상: #669; 패딩: 12px 2px; )

3. "박스형" 스타일

모든 유형의 테이블을 디자인하는 데 가장 신뢰할 수 있는 스타일은 소위 "박스형" 스타일입니다. 좋은 색 구성표를 선택한 다음 모든 셀의 배경색을 설정하는 것으로 충분합니다. 경계를 구분 기호로 설정하여 줄 사이의 차이를 강조하는 것을 잊지 마십시오.

Th ( 글꼴 크기: 13px; 글꼴 무게: 일반; 배경: #b9c9fe; 테두리 상단: 4px 단색 #aabcfe; 테두리 하단: 1px 단색 #fff; 색상: #039; 패딩: 8px; ) td ( 배경 : #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; ) tr:hover td (background: #ccddff;)

가장 어려운 것은 귀하의 사이트와 조화를 이루는 올바른 색 구성표를 찾는 것입니다. 사이트에 그래픽과 디자인이 가득 차 있다면 이 스타일을 사용하기가 상당히 어려울 것입니다.

테이블( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th ( font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- 왼쪽: 1px 단색 #9baff1; 색상: #039; 패딩: 8px; ) td ( 배경: #e8edff; 테두리 오른쪽: 1px 단색 #aabcfe; 테두리 왼쪽: 1px 단색 #aabcfe; 색상: #669; 패딩: 8px ; )

4. 수평 얼룩말

얼룩말 테이블은 매우 매력적이고 편안해 보입니다. 선택적 배경색은 사람들이 테이블을 읽을 수 있도록 시각적 신호 역할을 할 수 있습니다.

Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( 배경: #e8edff;)

5. 신문 스타일

소위 신문 효과를 얻으려면 테이블 요소에 테두리를 적용하고 내부 셀을 가지고 놀 수 있습니다. 가볍고 미니멀한 신문 스타일은 다음과 같을 수 있습니다. 색 구성표를 가지고 놀고 테두리, 여백, 다양한 배경 및 호버 효과를 선에 추가합니다.

표 (테두리: 1px 단색 #69c;) th ( 글꼴 두께: 일반; 색상: #039; 테두리 하단: 1px 파선 #69c; 패딩: 12px 17px; ) td ( 색상: #669; 패딩: 7px 17px; ) tr:hover td (배경: #ccddff;)

테이블(border: 1px solid #69c;) th ( font-weight: normal; color: #039; padding: 10px; ) td ( color: #669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff; ) tr:hover td (배경: #99bcff;)

테이블(border: 1px solid #6cf;) th ( font-weight: normal; font-size: 13px; color: #039; text-transform: 대문자; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; 테두리 왼쪽: 1px 단색 #0865c2; 테두리 하단: 1px 단색 #fff; 패딩: 20px; ) td( 색상: #669; 테두리 오른쪽: 1px 점선 #6cf; 패딩: 10px 20px; )

6. 테이블 배경

테이블을 디자인하는 빠르고 독특한 방법을 찾고 있다면 테이블 테마와 관련된 눈길을 끄는 이미지나 사진을 선택하여 테이블의 배경으로 설정하세요.

Png") 98% 86% no-repeat; ) th ( font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; ) td ( color: #669; border- 상단: 1px 단색 흰색; 패딩: 10px 12px; 배경: rgba(51, 51, 153, .2); 전환: .3s; ) tr:hover td ( 배경: rgba(51, 51, 153, .1); )

5,00 / 3

집 →D-링크 →CSS 셀 사이의 패딩. 셀 내용 정렬 →