스타일 시트의 기본 CSS 속성-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

스타일 시트의 기본 CSS 속성

王林

Sep 02, 2023 am 10:25 AM

CSS를 사용하여 테이블 스타일을 정의할 수 있습니다. 다음 속성은 일반적으로

스타일을 지정하는 데 사용되며 해당 요소는

border
CSS 테두리 속성은 테두리(너비, 테두리 스타일 및 테두리 색상)를 정의하는 데 사용됩니다.
border-collapse
이 속성은

요소가 공유 또는 별도의 테두리를 가져야 하는지 여부를 지정하는 데 사용됩니다.

caption

caption-side 속성은 표 제목 상자를 수직으로 배치하는 데 사용됩니다.

empty-cells

이 속성은 테이블의 빈 셀 표시를 지정하는 데 사용됩니다.

table-layout strong>
브라우저에서 테이블의 행, 열, 셀을 배치하는 데 사용하는 알고리즘을 정의합니다.

Example

다음 예에서는 테이블 스타일을 보여줍니다. -

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   border: thin solid;
   padding: 5px;
   font-style: italic;
}
caption {
   caption-side: bottom;
}
td {
   box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

Output

이 결과는 다음과 같습니다. -

样式表的基本 CSS 属性

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
table {
   border: 3px solid black;
}
td {
   border: 3px solid lightgreen;
}
th {
   border: 3px solid lightblue;
}
#t2 {
   border-collapse: collapse;
}
</style>
</head>
<body>
<h2 id="Team-Rankings">Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>    
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>

출력

이것은 다음과 같은 출력이 나왔습니다-

样式表的基本 CSS 属性

위 내용은 스타일 시트의 기본 CSS 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 tutorialspoint에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

너비와 유연한 아이템을 만드는 것은 함께 훌륭하게 재생됩니다Apr 19, 2025 am 11:23 AM

짧은 답변 : Flex-Shrink 및 Flex-Basis는 아마도 당신이 찾고있는 것일 것입니다.

끈적 끈적하고 테이블 헤더를 배치하십시오Apr 19, 2025 am 11:21 AM

당신은 ' t 포지션 : 스티커; 에이

주간 플랫폼 뉴스 : 검색 콘솔에서의 HTML 검사, 글로벌 스크립트 범위, Babel Env 추가 기본값 쿼리 추가Apr 19, 2025 am 11:18 AM

이번 주에 Web Platform News의 세계를 둘러싼 Google 검색 콘솔은 크롤링 된 마크 업을보다 쉽게 볼 수 있습니다.

Indieweb 및 웹 협상Apr 19, 2025 am 11:16 AM

Indieweb는 일입니다! 그들은 회의와 모든 것을 얻었습니다. 뉴요커는 심지어 그것에 대해 글을 쓰고 있습니다.

(개발자) 성장 모델Apr 19, 2025 am 11:08 AM

Dennis Hambeukers의 "The Designer 's Growth Model"게시물을 정말 좋아합니다. Dennis는이 모델을 방금 발명했지만 기존의 아이디어와 모든 것을 기반으로합니다.

유령 : 웹 구성 요소의 고리Apr 19, 2025 am 11:06 AM

나는 방금 Dave와 대화를 나누고 있었고 그는 Haunt에 대해 나에게 말했다. 그것은 고리가 있지만 기본 웹 구성 요소를 위해! 꽤 멋지다. 나는 이런 것들의 존재를 생각합니다

주간 플랫폼 뉴스 : 이벤트 타이밍, Google Earth 용 웹, 언데드 세션 쿠키Apr 19, 2025 am 10:57 AM

이번 주 뉴스에서 Wikipedia는 3 개의 느린 클릭 핸들러를 식별하는 데 도움이됩니다. Google 어스는 웹에 제공되며 CSS의 SVG 속성은 더 많은 지원을 받고 좀비 쿠키의 경우해야 할 일을 얻습니다.

순수한 CSS를 사용한 멀티 라인 잘림Apr 19, 2025 am 10:50 AM

이 기사의 속임수는 여전히 깔끔하고 영리하지만 지금은이 작업을 수행하는 방법이 있습니다. 아마도 가장 좋은 방법입니다.

See all articles

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.