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

스타일 시트의 기본 CSS 속성

王林

풀어 주다： 2023-09-02 10:25:01

앞으로

1260명이 탐색했습니다.

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>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>

로그인 후 복사