집 > 기사 > 웹 프론트엔드 > 테이블 CSS 스타일을 설정할 때 무엇에 주의해야 합니까?

테이블 CSS 스타일을 설정할 때 무엇에 주의해야 합니까?

php中世界最好的语言원래의: 2018-05-15 13:52:042234검색

테이블에 CSS 스타일이 많다면 오늘은 테이블 tr td CSS 스타일 설정에 대해 자세히 설명하겠습니다. 테이블

에 사용되는 CSS 스타일 시트를 설정할 때 주의해야 할 점은 무엇인가요? 웹 페이지의 여러 위치에서 테이블 태그가 제거되었습니다. 이때 지정된 테이블 개체 에 대한 스타일 설정은 여전히 CSS를 통해 제어할 수 있습니다.

사실 때로는 테이블 태그를 DIV 태그로 사용하여 CSS를 레이아웃하고 설정하는 것을 생각하면 훨씬 간단해집니다.

테이블 스타일 설정

해당 테이블 상위 스타일의 이름을 지정하여 개체 내의 테이블 스타일 지정

케이스의 완전한 HTML+CSS 코드

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>指定对象内table设置样式</title> 
<style> 
.p{ width:400px} 
.p table{ background:#CCC; color:#F00} 
.p table td{ background:#FFF} 
</style> 
</head> 
<body> 
<p class="p"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
<tr> 
<td>内容一</td> 
<td>内容一</td> 
<td>内容一</td> 
</tr> 
<tr> 
<td>内容二</td> 
<td>内容</td> 
<td>内容</td> 
</tr> 
</table> 
</p> 
</body> 
</html>

요약

위는 상위를 통해 테이블과 td를 지정합니다. CSS 스타일을 설정합니다.

테이블에 별도의 ID 또는 클래스를 설정하여

테이블 레이아웃을 여러 곳에 사용하세요. 이때 테이블 태그에 직접 스타일을 설정하면 웹페이지의 테이블 레이아웃도 이때 설정됩니다. . 이때 CSS 스타일이 필요한 테이블 설정을 구분하려면 테이블에 ID 또는 클래스 설정만 추가하면 됩니다.

테이블 td에 대한 CSS 설정

테이블 웹 페이지 레이아웃에서는 일반적으로 td에 대한 스타일을 설정해야 합니다. 예를 들어 td에 대한 행 높이 및 패딩 설정은 모두 유효합니다.

완성된 HTML+CSS 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>指定对象内table td设置样式</title> 
<style> 
 
.p-td{ width:400px} 
.p-td table td{ background:#CCC; color:#000; line-height:40px} 
</style> 
</head> 
<body> 
<p class="p-td"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
<tr> 
<td>内容一</td> 
<td>内容一</td> 
<td>内容一</td> 
</tr> 
<tr> 
<td>内容二</td> 
<td>内容</td> 
<td>内容</td> 
</tr> 
</table> 
</p> 
</body> 
</html>

지정된 테이블의 td에 스타일 효과를 설정합니다

위는 지정된 개체에 테이블의 td 스타일을 설정하는 CSS를 가리킨 것입니다.

다양한 사고: 특정 테이블 td에 대해 서로 다른 CSS 스타일을 설정하려는 경우 td에 클래스를 추가하여 다양한 스타일 설정을 얻을 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!