CSS : 테이블 디자인. 등록의 예

수업의 흥미와 책임 - CSS로 테이블 만들기. 이 사업에 접근 가능한 모든 스타일의 지식, 유능해야합니다. 또한, 자신의 창의력 방문자를 놀라게하지 않도록 아름다움의 감각을 소유하는 것이 필요하다.

테이블은 거의 모든 변환 할 수 있습니다. 아름다운 디자인은 CSS 테이블 디자인의 경계, 테이블 배경, 셀 배경, 그들과 더 사이의 간격의 사용을 포함한다. 가장 기본적인 고려.

표 테두리

CSS 테이블 스타일의 디자인은 항상 테두리 (프레임)와 함께 게임을 포함한다. 모든 기본 테이블은 윤곽 프레임 수 없습니다. 즉, 화소는 0과 동일하다. 그러나이 건물의 국경에 의해 수정 될 수있다.

당신은 전체 테이블에 대한 외부 프레임을 지정할 수 있습니다 :

테이블 {국경 : 3px의 검은 고체; }

이 스타일을 사용하는 사이트의 모든 테이블에서이 라인 덕분에 블랙 프레임이다. 참고 가장자리에 있지만 테이블 내부 경계 해당. 세포주 프레임 특별히.

일, TD {국경 : 3px의 검은 색;}

두께와 색상, 당신은 어떤을 지정할 수 있습니다. 세포를 배분하고 때 경계가 두 배가되지 있음을 유의하십시오.

단어 고체 연속 등록을 나타낸다. 당신은 다른 값을 지정할 수 있습니다.

그것이 더 매력적으로 보이는 가장 일반적으로 고체 프레임을 사용하고 사이트의 주요 내용과주의를 산만하게하지 않습니다.

border 속성은 보드도 지정할 수 있습니다. 경계은 왼쪽 또는 오른쪽, 위, 아래를 설정할 수 있습니다. 어떤 경우에는 한 번에 전체 테이블에 대한 프레임 실현 가능한 옵션이 없습니다 때문입니다.

테이블 {국경 탑 : 1 픽셀의 빨간색 고체; }

그래서 당신은 단지 테이블의 상단의 프레임을 설정할 수 있습니다. 마찬가지로 다른 당사자 대신 바로 위에 쓰기에 : 오른쪽, 왼쪽 또는 하단.

테이블 헤더

표 헤더 태그 <자막>를 사용하여 지정 될 수있다. 이 태그는 미세 조정에 대한 등록 정보를 많이 등록하려면 CSS에있을 수 있습니다. 이 요소 당신이 원하는 방식으로 기동 할 수 있기 때문에 CSS 테이블 디자인이 좋다.

이 제목은 (예 : "표 1"로) 책의 표준과 같은 방식으로 표시됩니다.

당신은 제목과 재산 캡션 측 (상단 또는 하단)의 위치를 지정할 수 있습니다. 좌우 정렬하거나하는 속성 텍스트 정렬에 의해 정의된다.

배경 테이블

테이블의 배경 색상이나 패턴이 될 수 있습니다. 색상 속성 배경 색상을 설정합니다. 언어의 사용과 완벽하게 일치하는 속성의 이름입니다. 그것은 많은 시간을 저장 용이.

색상은 이름, 다른 인코딩으로 지정할 수 있습니다. 또한, 다음을 지정할 수 있습니다 :

• 투명 - 투명.
• 상속 - 색상이 부모 요소와 동일합니다.
• 초기 - 기본.

투명도 옵션 CSS 파일에서 텍스트의 모든 테이블이 하나의 색으로 만들어진 이러한 경우에 사용할 수 있지만,이 경우에는 필요가 없습니다.

또한, 배경 이미지 일 수있다. 스타일에 규정 된 배경 이미지 속성에,이 작업을 수행합니다. 경로는 다음과 같이이다 :

URL ( 'URL')

파일 경로가 상대적 또는 절대적 일 수도있다.

더 복잡한 채우기가 그라데이션으로 수행 할 수 있습니다 :

• 선형 구배 ();
• 방사형 그라데이션 ();
• 반복 선형 구배 () 및 반복-방사형 그라데이션 () - 구배 반복.

배경 세포

일반적으로 배경 이외에, 당신은 열이나 행에서 줄무늬 배경을 지정할 수 있습니다. 쉽게 라인 분리 시각 정보를 확인할 수 있기 때문에 속성의 등록을 매우 자주 사용된다.

교대뿐만 아니라, 당신은 특정 열이나 행의 수를 지정할 수 있습니다. 이 같은 예를 들어 :

• TR : n 번째 자녀 (심지어) {...} - 인터레이스 지정;
• TR : n 번째 자식 (1) {...} - 특정 행의 특성의 표시;
• TD : n 번째 자식 (짝수) {...} - 열 교호의 표시;
• TD : n 번째 자식 (1) {...} - 특정 항목의 속성의 표시.

순서와 번호를 지정할 수 있습니다 게다가 - 첫 번째 (TD : 첫째 자녀) 또는 마지막 (TD : 마지막으로 아이).

셀 사이의 간극

CSS에서 테이블 디자인은 세포 사이의 공간을 제거 할 수 있습니다. 기본적으로 그들이 있습니다. 당신은 경계 사이의 거리를 설정하지 않고 테이블의 프레임을 설정하면 예를 들어, 여기에이 결과가 될 것입니다.

동의, 그것은 매우 좋지 않아 보이는이 읽기 편리하지 않습니다. 사용자는이 때문에 눈에 리플을해야합니다. 테이블 스타일에서 바로 그러한 라인을 작성하여 될 수있는 이러한 격차를 제거합니다

국경 - 붕괴 : 붕괴

그러나 또한 거리가, 반대로 증가되어야 함을 발생합니다. 또한, 상기 갭의 크기는 열 사이 및 행 사이로서 지정 될 수있다. 값이 (대신 붕괴)을 나타냅니다합니다 :

국경 - 붕괴 : 별도의

그러나 그러한 조치는 세포를 분리 할 필요가 있음을 나타냅니다. 그것은 그들의 몫이었다으로, 추가 속성을 표시 :

국경 간격 : 20 픽셀.

당신은 행과 열 사이의 서로 다른 거리를 지정하려면,이 두 가지를 나타냅니다 :

국경 간격 : 10px20px.

브라우저의 차이

는 CSS로 디자인 테이블이 브라우저에 따라 다르게 보일 수 있다는 점에 유의하십시오. 특히 나쁜 CSS의 혁신이 지원되지 않음, 이전 버전의 경우.

상기 디지털 값의 프레임 두께의 일례이다.

예를 들어, 상수 프레임의 두께.

테두리 스타일은 크게 다릅니다.

따라서, 개발은 항상 다른 브라우저에 결과를 참조하십시오.

CSS에서 디자인 테이블은 브라우저의 종류를 확인하는 것이 좋습니다. 특히 사용 큰 문제는 인터넷 익스플로러의 이전 버전과 사용자 수 있습니다.

아주 고급 개발자는 브라우저에 따라 완전히 다른 CSS 파일을 연결 할 수 있습니다. 그리고 누군가가 각 수표 또는 일부 특정 스타일 (클래스)합니다.

대부분의 문제는 그림자에서 발생한다.

CSS : 표 형식의 예

등록은 매우 다양 할 수있다. 모든 것은 전체 사이트의 디자인에 따라 달라집니다. 모든 결합 된 잡 색의 색상을해야합니다. 또한 그것은 좋은 역할과 맛을 개발한다. 아름다움의 감각은 모두 다르다.

우리는 다양한 테이블의 몇 가지 예를 제공합니다. 위 그림은 경사를 사용하는 방법을 보여줍니다 및 배경 색상 및 테두리로 재생할 수 있습니다.

많은 눈 사용자를 차단하지 않습니다 아름다운 깔끔한 디자인의 흥미로운 사례가 될 것입니다. 본 실시 예는 거의 모든 상황에 적합하다.

모서리는 둥글게 될 수있다. 그것은 꽤 좋은 보인다.

결론

당신이 볼 수 있듯이, CSS에서 테이블의 모양을 위해 많은 도구가 있습니다. 각 매개 변수는 값 옵션의 엄청난 금액이다. 한 번에 모두 사용하는 경우, 당신은 걸작을 만들 수 있습니다. 특히 당신이 할 경우 적응 형 디자인 모든 브라우저를.

디자인에서 중요한 것은 - 효과를 과장하지 않습니다. 모든 적당히 수행해야합니다. 처음에는 레이아웃 실험을 즉시 모든 지식을 사용하는 것을 좋아합니다. 테이블의 결과로 과포화 속성입니다. 이러한 오류를 피하십시오.

또한, 일부 파라미터들은 서로 간섭 할 수있다. 예를 들어, 지정할 필요가 없습니다 배경색 , 테이블을하면서 여전히 지정된 색상을 중첩 할 배경 이미지를,이 설정되어있는 경우.