일반적으로 웹 페이지는 다양한 요소의 레이아웃과 구성을 위해 테이블에 의존하기 때문에 테이블은 의심할 여지 없이 웹 페이지 제작에서 가장 중요한 개체입니다. 웹 페이지가 아름다운지, 콘텐츠 구성이 명확한지 직접적으로 결정됩니다. 그러나 많은 친구들은 테이블에 대한 공부를 소홀히 하고 다른 레이어, 그림, 특수 효과 등에 집중하는 경우가 많습니다. 실제로 테이블을 합리적으로 사용하면 페이지를 쉽게 아름답게 만들 수 있으며, 테이블로 만든 페이지가 단조롭다고 불평하는 친구들도 종종 있습니다. ., 거칠고 다양성이 부족하며 사람들이 1픽셀 표 테두리를 만드는 방법을 묻는 것을 자주 듣습니다. 실제로 Dreamweaver에서는 표를 매우 편리하게 다듬어 웹 페이지를 더욱 아름답고 세련되게 만들 수 있습니다. Dreamweaver에서 표를 다듬는 방법을 다음 세 가지 측면에서 소개하겠습니다.
1. 속성 패널을 사용합니다.
그림 1 먼저 두 테이블 속성 패널인 CellPad와 CellSpace의 매개 변수를 이해해야 합니다. 그림 1에서 볼 수 있듯이 CellPad는 표에 있는 두 셀 사이의 거리를 의미하고, CellSpace는 각 셀과 중앙의 콘텐츠 사이의 거리를 의미합니다. 이 두 매개변수를 변경하고 배경색을 일치시키면 1픽셀 표 테두리를 쉽게 만들 수 있습니다.
1. 개체 패널을 사용하여 표를 삽입하고 표의 너비, 높이, 행 및 열을 정의합니다. 이때 Dreamweaver에 삽입된 표의 기본 CellPad, CellSpace, Border는 모두 0입니다. 그림 2에 표시된 대로;
그림 2
2. 속성 패널에서 테이블의 테두리를 0으로, CellPad를 5로 정의합니다(이렇게 하면 셀의 내용과 셀 가장자리 사이에 5픽셀이 유지됩니다)(이렇게 하면 셀 사이에 5픽셀이 유지됩니다). ) 1 요소 간격). 그림 3에 도시된 바와 같이;
그림 3
3. 그림 4와 같이 테이블의 배경색을 #999999로 설정합니다.
4. 그림 5와 같이 셀의 배경색을 #FFFFFF로 설정합니다.
그림 5
5. 브라우저에서 효과를 미리 보면 그림 6과 같이 테이블에 픽셀 테두리가 있는 것을 볼 수 있습니다.
그림 62
: 테이블 중첩 사용.
위의 주요 원칙은 여전히 테이블 중첩을 사용하여 더 많은 효과를 얻을 수 있다는 것입니다.
1. 먼저 테이블을 그리고 이전 예제를 참고하여 이 테이블의 CellPad와 CellSpace의 값과 색상을 설정합니다. 구체적인 효과는 그림 7에 나와 있습니다.
그림 7 2. 다음으로 또 다른 단일 행 및 단일 열 테이블을 그리고 CellPad=2, CellSpace=1을 설정합니다. 특정 매개변수는 그림 8과 같습니다.
그림 8
3. 첫 번째 단계에서 생성된 테이블을 두 번째 단계의 테이블로 이동합니다. 이제 테이블은 그림 9와 같습니다.
그림 9에서 이 테이블에는 이중선 외부 프레임과 단일선 내부 프레임이 있음을 알 수 있습니다.
4. 두 번째 단계의 테이블을 단일 행과 두 개의 열로 수정하고 각 셀의 첫 번째 단계에 테이블을 배치합니다. 최종 테이블은 그림 10과 같습니다.
그림 10을
재정의하고
.tdstyle 스타일을 별도로 정의합니다. 특정 매개변수는 그림 13과 같습니다.
여기서는 위쪽 및 아래쪽 테두리 너비를 1픽셀로 정의하고 왼쪽 및 오른쪽 테두리 너비를 0으로 정의합니다.
4. 최종 테이블 효과는 그림 14에 나와 있습니다.
(사진15)
이때 테이블은 입체적인 효과를 준다.
6. 위의 표는 전체 표의 오른쪽과 아래쪽에 테두리가 없는 느낌이 듭니다. 또 다른 style.table1을 정의하고 이 스타일의 네 변을 1픽셀로 정의한 후 첨부하면 됩니다
