| 테이블의 내용을 정의합니다. |
|
| 테이블의 이름을 지정합니다. |
|
| 테이블의 헤더 셀을 정의합니다. |
|---|
|
| 테이블 행을 정의합니다. |
|
| 테이블 데이터 셀을 정의합니다. |
| 테이블(테이블 헤더)에 그룹 헤더를 포함하는 데 사용됩니다. |
| |
테이블의 "본문"을 포함하는 데 사용됩니다. |
|
테이블(바닥글)의 "바닥글"을 포함하는 데 사용됩니다. |
|
| 태그 내의 각 열에 대해 지정된 열 속성을 정의합니다. .
|
|
| 테이블의 열 그룹을 정의합니다. |
테이블에서 들여쓰기 작업
테이블에서 패딩 사용
에 이 예우리:
- 외부 여백(margin : 0 auto )이 있는 수평 센터링 기술을 사용하여 테이블을 중앙에 배치했습니다.
- 테이블 이름(태그 ) 하단 패딩을 19픽셀로 설정했습니다. 짝수 숫자로 혼동하지 않으셨으면 좋겠습니다 :)
우리 예의 결과:
셀 사이의 간격
위의 예 후에 테이블의 모든 셀 사이에 여전히 간격이 있음을 알 수 있습니다. 표의 셀 사이의 간격을 없애거나 늘리는 방법을 살펴보겠습니다.
인접 셀 경계 사이의 거리를 설정하려면 CSS 속성 - border-spacing 을 사용해야 합니다.
표 사이의 간격 변경
테두리 간격: 30px 10px;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
이 예에서 우리는:
- 왼쪽으로 뜨다 ). 부동 요소에 대한 주제를 놓친 경우 언제든지 이 튜토리얼에서 ""로 돌아갈 수 있습니다.
- 또한 테이블의 오른쪽 여백을 30px로 설정하고 테이블의 수직 정렬을 설정합니다(요소의 상단이 가장 높은 요소의 상단과 정렬됨). 이 기사에서 이 속성에 대한 자세한 설명으로 돌아갑니다.
- ) 굵게 표시됩니다.
- 테이블 셀(헤더 및 데이터 셀)의 경우 16진수 색상 #F50을 사용하여 1픽셀의 단색 테두리를 설정하고 모든 면에 19픽셀의 패딩을 설정했습니다.
- 클래스가 있는 첫 번째 테이블의 경우 .첫 번째클래스가 있는 두 번째 테이블의 경우 테이블 셀 사이의 간격(border-spacing 속성)을 30px 10px로 설정합니다. .초클래스가 있는 세 번째 테이블의 경우 0과 같음 .제삼 0.2em과 같습니다.
나는 border-spacing 속성에 하나의 길이 값만 지정하면 가로 및 세로로 간격을 지정하고 두 개의 길이 값을 지정하면 첫 번째 값이 수평 거리 및 두 번째 수직. 인접 셀 경계 사이의 거리는 CSS 단위(px, cm, em 등)로 지정할 수 있습니다. 음수 값은 허용되지 않습니다.
우리 예의 결과:
표 셀 주위에 테두리 표시
다음과 같이 말할 수 있습니다. - 그래서 값이 0 인 border-spacing 속성을 사용하여 셀 사이의 간격을 제거했지만 이제 교차하는 셀 테두리가 있는 이유는 무엇입니까?
이중 테두리는 한 셀의 아래쪽 테두리가 그 아래에 있는 셀의 위쪽 테두리에 추가되기 때문에 생기는데, 셀의 측면에서도 비슷한 상황이 발생하고 이는 테이블 표시 측면에서 논리적이지만 다행스럽게도 거기에 이것은 우리가 셀 테두리의 그런 건방진 행동을 보고 싶지 않다고 브라우저에 알리는 방법입니다.
이것을 위해 당신은 사용해야합니다 CSS 속성경계 붕괴 . 이상하게도 접기 값과 함께 border-collapse 속성을 사용하는 것은 가장 좋은 방법셀 사이의 간격을 제거하는 동시에 셀 사이에 이중 테두리가 생기지 않도록 하려면 어떻게 해야 합니까?
border-spacing 속성을 값 0으로 사용하고 border-collapse 속성을 값으로 사용할 때 테두리의 동작을 비교하는 것이 좋습니다.
표 셀 주위에 테두리를 표시하는 예
이 예에서 우리는:
- 테이블을 부동 상태로 만들고 왼쪽(float : left)으로 이동하고 바깥쪽 오른쪽 여백을 30px로 설정했습니다.
- 테이블 이름(태그 ) 굵게 표시됩니다.
- 테이블 셀(헤더 및 데이터 셀)의 경우 16진수 색상 #F50을 사용하여 5픽셀의 단색 테두리를 설정하고 고정 너비를 50픽셀, 높이를 75픽셀로 설정했습니다.
- 클래스가 있는 첫 번째 테이블의 경우 .첫 번째테이블 셀 사이의 간격을 0으로 설정하고(border-spacing : 0 ;) 클래스가 있는 두 번째 테이블의 경우 .초 border-collapse 속성을 collapse 로 설정하여 가능한 경우 셀 테두리를 하나로 병합합니다.
우리 예의 결과:
빈 셀의 동작
CSS를 사용하면 표에서 빈 셀의 테두리와 배경을 표시할지 여부를 설정할 수 있습니다. empty-cells 속성은 이전 예제에서 알 수 있듯이 기본적으로 빈 셀을 표시하는 이 동작을 담당합니다.
예를 들어 보겠습니다.
빈 테이블 셀을 표시하는 예
이 예제의 empty-cells 속성이 어떻게 작동하는지 이해하는 것은 매우 쉽습니다. 이 속성이 hide 로 설정되면 빈 셀과 그 안의 배경이 숨겨지고 show(기본값)로 설정되면 표시됩니다.
테이블 헤더 위치
테이블 스타일 지정을 위한 또 다른 간단한 속성인 caption-side 를 살펴보겠습니다. 이 속성은 테이블 캡션(테이블 위 또는 아래)의 위치를 설정합니다. 기본적으로 caption-side 속성은 표 위에 캡션을 배치하는 top 으로 설정됩니다. 테이블 아래에 헤더를 배치하려면 값이 bottom 인 속성을 사용해야 합니다.
이 속성을 사용하는 예를 살펴보겠습니다.
caption-side 속성을 사용하는 예
테이블 위의 제목
| 이름 | 가격 |
| 생선 | 350루블 |
| 고기 | 250루블 |
테이블 아래의 제목
| 이름 | 가격 |
| 생선 | 350루블 |
| 고기 | 250루블 |
이 예에서는 다음을 생성했습니다. 두 수업, 테이블 헤더의 위치를 제어합니다. 1학년( .topCaption) 테이블 헤더를 그 위에 놓고 첫 번째 테이블과 두 번째 클래스에 적용했습니다( .bottom캡션) 아래에 테이블 헤더를 배치하고 두 번째 테이블에 적용했습니다. 수업 .topCaption기본적으로 caption-side 속성으로 설정되며 데모용으로 생성되었습니다.
우리 예의 결과:
수평 및 수직 정렬
대부분의 경우 표로 작업할 때 머리글 및 데이터 셀 내에서 콘텐츠 정렬을 조정해야 합니다. text-align 속성은 수평 정렬에 사용됩니다. 문자 정보. "" 기사 앞부분에서 텍스트에 대해 이 속성을 사용하는 것을 고려했습니다.
셀의 내용에 대한 정렬을 설정하려면 text-align 속성과 함께 특수 키워드를 사용해야 합니다. 적용 고려 키워드다음 예제에서는 이 속성을 사용합니다.
테이블의 수평 정렬 예
|
의미 | 설명 |
|
왼쪽 | 셀 텍스트를 왼쪽에 맞춥니다. 이것은 기본값입니다(텍스트 방향이 왼쪽에서 오른쪽인 경우). |
|
오른쪽 | 셀 텍스트를 오른쪽에 맞춥니다. 이것은 기본값입니다(텍스트 방향이 오른쪽에서 왼쪽인 경우). |
|
센터 | 셀 텍스트를 가운데에 맞춥니다. |
|
신이 옳다고 하다 | 각 줄이 같은 너비가 되도록 줄을 늘립니다(셀의 텍스트를 너비에 맞게 늘림). |
이 예에서는 다음을 생성했습니다. 네 가지 수업, 셀에 다른 수평 정렬을 설정하고 테이블의 행에 순서대로 적용했습니다. 셀의 값은 text-align 속성의 값과 일치합니다.
우리 예의 결과:
수평 정렬 외에도 vertical-align 속성을 사용하여 테이블 셀에서 수직 정렬을 정의할 수도 있습니다.
테이블 셀로 작업할 때 이 속성의 다음 * 값만 적용됩니다.
*
- 테이블 셀에 적용된 Sub , super , text-top , text-bottom , length , % 값은 기준 값을 사용하는 것처럼 동작합니다.
사용 예를 살펴보겠습니다.
테이블의 수직 정렬 예
|
의미 | 설명 |
|
기준선 | 셀의 기준선을 부모의 기준선과 정렬합니다. 이것이 기본값입니다. |
|
맨 위 | 셀의 내용을 위쪽에 수직으로 맞춥니다. |
|
가운데 | 셀의 내용을 가운데에 세로로 맞춥니다. |
|
맨 아래 | 셀의 내용을 아래쪽에 수직으로 맞춥니다. |
이 예에서는 다음을 생성했습니다. 네 가지 수업, 셀에 다른 수직 정렬을 설정하고 테이블 행에 적용했습니다. 셀의 값은 해당 행에 적용된 vertical-align 속성의 값과 일치합니다.
브라우저에서 테이블 레이아웃을 배치하는 알고리즘
CSS는 기본적으로 브라우저의 자동 테이블 레이아웃 알고리즘을 사용합니다. 이 경우 열 너비는 셀의 줄 바꿈하지 않는 가장 넓은 내용으로 설정됩니다.. 브라우저가 최종 레이아웃을 결정하기 전에 테이블의 모든 내용을 읽어야 하기 때문에 이 알고리즘은 경우에 따라 느려질 수 있습니다.
다음을 사용하여 브라우저에서 테이블 레이아웃의 레이아웃 유형을 변경하려면 자동적 인에 결정된, CSS 속성 table-layout 값을 fixed 로 사용해야 합니다.
이 경우 수평 배치는 셀의 내용이 아니라 표의 너비와 열의 너비를 기준으로 합니다.브라우저는 첫 번째 행이 수신되는 즉시 테이블 렌더링을 시작합니다. 결과적으로 고정 알고리즘을 사용하면 자동 옵션을 사용하는 것보다 더 빠르게 이러한 테이블의 레이아웃을 생성할 수 있습니다. 큰 테이블로 작업할 때 고정 알고리즘을 사용하여 성능을 높일 수 있습니다.
다음 예제를 통해 이 속성을 사용하는 방법을 살펴보겠습니다.
table-layout 속성 사용 예
테이블 레이아웃: 자동;
| 이름 |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| 밀 |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
테이블 레이아웃: 고정;
| 이름 |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| 밀 |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
이 예에서 우리는:
테이블 행 및 열 스타일 지정
당신과 나는 이미 기사 ""에서 테이블의 행과 열을 스타일링하는 방법에 대해 부분적으로 다루었습니다. 이 기사에서는 값을 사용하여 테이블의 행 스타일을 인터리브할 수 있는 그룹 의사 클래스를 사용하는 방법을 살펴보았습니다. 조차 (솔직한) 그리고 이상한 (이상한), 또는 초등학교 수학 공식.
지금까지 다룬 기술을 다시 살펴보고 테이블의 행과 열에 스타일을 지정하는 새로운 방법을 살펴보겠습니다. 예제로 넘어갑시다.
테이블과 함께 :nth-child 의사 클래스를 사용하는 예
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
2 | | | | | | |
| | | | | | |
|
3 | | | | | | |
| | | | | | |
|
4 | | | | | | |
| | | | | | |
이 예에서 우리는:
우리 예의 결과:
테이블 행 스타일 지정에 대한 옵션을 고려할 다음 예제로 넘어갑시다.
테이블의 행 스타일 지정 예
|
서비스 | 가격 |
|
합집합 |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
이 예에서 우리는:
- 테이블 너비를 상위 요소 너비의 100%로 설정하고 헤더 및 데이터 셀에 대해 1px 너비의 단색 테두리를 설정합니다.
- 요소에 대해 설정 (표의 "바닥글") 배경색 – 산호, 요소의 경우 (테이블의 "헤더") 배경색 설정 은.
- 요소의 경우
, 요소 내부에 있는 (테이블 본문) 호버 시 변경할 배경색 설정 (pseudo-class :hover) c 하얀색상별 카키색 옷감(전체 라인이 강조 표시됩니다).
우리 예의 결과: 쌀. 153 테이블의 행 스타일 지정 예 다음 예에서는 표 셀(속성)에 모서리 라운딩을 적용하는 방법을 살펴봅니다.
셀 모서리 라운딩 예
이 예에서 우리는:
- 외부 여백을 사용하여 테이블 중앙에 배치하고 헤더 셀의 너비와 높이를 50px로 설정, 지정됨 투명한테두리 5픽셀.
- 헤더 셀에서 마우스를 가져 가면 (의사 클래스 :hover) 배경 푸른그림 물감, 주황색텍스트 색상, 테두리 주황색색상 5픽셀 및 반올림 반경 100% .
- 투명 테두리호버에 표시되는 테두리를 위한 장소를 예약하기 위해 필요합니다. 이것이 완료되지 않으면 테이블이 "점프"됩니다.
우리 예의 결과:
다음 예는 우려 사항 HTML 사용집단 그리고 그리고 그들의 스타일링.
테이블 열 강조 표시 예
|
신청번호 | 서비스 | 가격, 문질러. | 총 |
|
1 | 명음 |
6 000 |
6 000 |
|
2 | 설거지 |
2 000 |
2 000 |
|
3 | 청소 |
1 000 |
1 000 |
|
4 | 잔소리 |
1 500 |
1 500 |
|
5 | 독서 |
3 000 |
3 000 |
이 예에서 우리는:
우리 예의 결과:
그리고 마지막 예제는 이 과정에서 자세히 연구할 향후 주제를 다루기 때문에 이해하기 매우 어렵고 CSS에 대한 고급 지식이 필요합니다.
이전 예에서 우리는 다음과 같은 사실을 깨달았습니다. HTML 요소 CSS 속성 하나만 적용할 수 있습니다. 배경색(background-color)이지만 동시에 이 요소에서 마우스를 가져갈 때 배경색(pseudo-class :hover)을 직접 설정할 수 없습니다. 이 예에서는 CSS만 사용하여 테이블 열을 강조 표시하는 방법을 살펴보겠습니다.
마우스 오버 시 테이블의 열과 행을 강조 표시하는 예
|
신청번호 | 서비스 | 가격, 문질러. | 총 |
|
1 | 명음 |
6 000 |
6 000 |
|
2 | 설거지 |
2 000 |
2 000 |
|
3 | 청소 |
1 000 |
1 000 |
|
4 | 잔소리 |
1 500 |
1 500 |
|
5 | 독서 |
3 000 |
3 000 |
이 예에서 우리는:
- 테이블은 상위 요소의 100%를 차지하고 테이블 셀은 상위 요소의 25%를 차지하며 1픽셀 녹색의 단색 테두리가 있고 헤더 및 데이터 셀의 높이는 45px로 설정했습니다. 값과 함께 border-collapse 속성을 사용하여 셀 사이의 간격을 제거했습니다.
.
- 따라서 ::after 의사 요소를 사용하여 각 요소 뒤에 내용을 추가합니다.
호버에. ::after 의사 요소는 콘텐츠 속성과 함께 사용해야 합니다. 덕분에 배경색이 있는 블록 수준 요소를 삽입합니다. 포레스트 그린그리고 있다 절대 위치.
- 여기서 절대 위치 지정은 조상의 지정된 가장자리를 기준으로 요소를 오프셋하는 데 필요하지만 조상은 기본값이 아닌 다른 위치 값을 가져야 합니다 - static , 그렇지 않으면 개수는 브라우저 창의 지정된 가장자리를 기준으로 합니다. 우리가 테이블을 설정한 이유 상대 위치(상대적인 ).
- 생성된 블록의 top 속성은 위쪽 가장자리에서 위치된 요소의 오프셋 방향을 지정하고 아래쪽 속성은 아래쪽 가장자리에서 위치된 요소의 오프셋 방향을 지정합니다. 두 속성 모두 0으로 설정되어 블록이 테이블의 맨 아래와 맨 위에서 요소를 완전히 차지하므로 이 블록의 너비는 25%로 설정되었으며 이 값은 셀 자체의 너비 값에 해당합니다.
- 그리고 이 블록에 대해 설정한 마지막 속성: "-1" 값을 가진 z-index는 위치 지정 요소의 순서를 결정합니다. Z축. 이 속성은 텍스트가 이 블록의 앞에 있고 뒤에 있지 않도록 하기 위해 필요합니다. 0보다 작은 값을 설정하지 않으면 블록이 텍스트를 닫습니다.
우리 예의 결과:
연구의이 단계에서 요소를 배치하는 과정을 이해하지 못한다면 낙담하지 마십시오. 이것은 이해하기 어려운 주제이며 우리도 고려하지 않았지만 다음 기사에서 확실히 고려할 것입니다. 교과서 "CSS에서 요소 배치".
주제에 대한 질문 및 작업
다음 주제로 이동하기 전에 실제 작업을 완료하십시오.
 하는 데 어려움이 있다면 실제 작업, 언제든지 별도의 창에서 예제를 열고 페이지를 검사하여 어떤 CSS가 사용되었는지 확인할 수 있습니다.
2016-2020 Denis Bolshakov, [email protected]으로 사이트에 대한 의견과 제안을 보낼 수 있습니다.
| |
| 
