html5+CSS를 사용하여 표의 내부 및 외부 테두리, 색상 및 크기를 제어하는 ​​방법에 대한 그래픽 튜토리얼

기본적으로 CSS는 테이블의 테두리를 지웁니다. 테이블의 내부 및 외부 테두리, 색상 및 크기를 제어하는 ​​CSS 스타일을 공유해 보겠습니다. 배우고 싶은 친구들은 이를 참고할 수 있습니다.

사실, 논리적으로 말하면, 오늘날의 웹사이트는 오래 전에 테이블을 버렸어야 했고, 지금은 p+CSS가 지배적인 것이 틀림없습니다! 그러나 클라이언트의 웹사이트는 콘텐츠를 추가할 때 테두리 효과가 없거나 너무 두꺼워서 항상 만족하지 못했습니다. 이 고객은 완벽주의자임이 분명했습니다.

기본적으로 CSS는 테이블의 테두리를 지웁니다. 보이는 효과는 다음과 같습니다.

Borderless Table

테이블에 테두리를 추가하기 위해 CSS로 다음 문장을 작성했습니다.

.table{border:solid 1px #add9c0;}

야, 너무 순진한 것 같은데 브라우저에 보이는 효과는 이렇다.

바깥쪽 테두리만 있는 테이블

알겠습니다. 저는 몇 년 동안 테이블을 만지지 않았지만 이것은 전혀 제 책임이 아닙니다. 테이블은 실제로 인기 디자이너에 의해 버려졌기 때문입니다. 그래서 CSS 스타일 문장을 삭제하고 다음과 같이 다시 작성했습니다.

.td{border:solid 1px #add9c0;}

하지만 문제는 여전히 발생했습니다. 고객처럼 얇은 요청을 하는 사람이 테이블의 두꺼운 내부 테두리를 어떻게 견딜 수 있습니까?

내부 테두리가 매우 두꺼운 테이블

다른 방법이 없으므로 방금 작성한 CSS 코드를 삭제하고 직접 작성해야 합니다. 거만하다? 그냥 포기하라는 뜻 아닌가요?

테두리가 아주 얇은 표가 있어도 죄는 아니지만

텍스트 내용과 표 테두리가 너무 가까워서 틈이 없을 경우 모양새에 영향을 미치게 되므로 두 줄을 살짝 수정했습니다. 코드:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

두 당사자가 너무 친밀할 필요가 없다면 다음과 같이 작성하세요.

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

자, 이제 최종 효과를 살펴보겠습니다. 이때 고객은 이미 매우 행복해하고 있습니다. 이것이 그가 원하는 효과입니다!

이상적인 효과가 있는 테이블

이 방법을 다른 곳에서 사용하는 경우 CSS 코드의 표준화된 작성에 주의해야 합니다.

추천 작성: border-width: 0px 1px 1px 0px;

추천 없음: border -width: 0 1 1 0;

마지막으로, Table 없이도 할 수 있다면 Talbe를 사용하지 마십시오. 그렇게 발전된 기술은 아니기 때문에 열심히 노력해야 한다는 점을 모두에게 상기시켜 드리고 싶습니다. p+CSS!

위 내용은 html5+CSS를 사용하여 표의 내부 및 외부 테두리, 색상 및 크기를 제어하는 ​​방법에 대한 그래픽 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!