CSS 테이블에 테두리 스타일을 추가하는 방법은 무엇입니까? CSS 테이블 테두리 스타일 요약(전체 예제 포함)-CSS 튜토리얼-php.cn

CSS 테이블에 테두리 스타일을 추가하는 방법은 무엇입니까? CSS 테이블 테두리 스타일 요약(전체 예제 포함)

寻∝梦

풀어 주다： 2018-09-07 13:38:17

원래의

9477명이 탐색했습니다.

이 문서에서는 주로 CSS 테이블에 테두리 스타일을 추가하는 방법에 대해 설명합니다. CSS 테이블 테두리 스타일에 대한 요약과 CSS 테이블 테두리의 전체 예도 있습니다. 다음으로 이 글을 함께 살펴보겠습니다

우선 CSS를 사용하여 테이블에 테두리를 추가하는 방법을 살펴보겠습니다.

저는 HTML 테이블을 배울 때 테두리 속성을 사용하여 테이블에 테두리를 추가합니다. 이제 우리도 이렇습니다. CSS 스타일에서 테두리가 어떻게 사용되는지 살펴보겠습니다.

테두리를 추가하는 속성을 살펴보겠습니다. border -스타일 속성. 이제 완전한 예를 살펴보겠습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
table,td{border-style:dotted}
</style>
</head>
<body>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>
</html>

로그인 후 복사

위 코드의 효과를 알고 계십니까? 효과를 살펴보겠습니다.

CSS 테이블에 테두리 스타일을 추가하는 방법은 무엇입니까? CSS 테이블 테두리 스타일 요약(전체 예제 포함)

효과 그림을 보면 누구나 이해할 수 있을 것입니다. 여기서도 코드 사용에 대해 설명해야 합니다.

border-style: 테이블을 정의합니다. border (table table Border, table{}을 사용하면 선이 그리 많지 않고 테두리선만 나타나게 되고 중간에 있는 선은 나타나지 않게 되므로 여기에 td 태그를 넣어서 표시되도록 했습니다. Out of line)

dotted: dotted 속성은 점선 테두리를 정의하므로 점이 너무 많습니다. (물론 테두리를 표시하는 다른 속성도 있습니다. 살펴보겠습니다.)
solid: solid 속성은 단색 테두리를 정의합니다.
double: double 속성은 이중 테두리를 정의합니다.
dashed: dashed 속성 정의 점선 테두리

그림에서는 점선 테두리만 소개했는데, 이중선 테두리, 점선 테두리 등도 있으니 시도해 보시면 됩니다. 하나씩 보면 아주 명확합니다.

이제 우리는 테두리 스타일에 대해 계속 이야기합니다. 물론 여러 스타일이 있습니다. 그렇지 않으면 어떻게 이를 요약이라고 부를 수 있습니까?

border-spacing 속성은 인접한 셀의 테두리 사이의 거리를 설정합니다
caption- side 속성은 테이블 제목의 위치를 설정합니다.

오늘은 두 가지 속성을 소개하겠습니다. 위의 border-style 속성과 함께 정확히 세 가지 유형이 있습니다. (CSS 스타일 지식을 더 배우려면 PHP 중국어 웹사이트 css 학습 매뉴얼 열을 추천하세요)

먼저 border-spacing 속성을 살펴보세요:

border-spacing 속성은 인접한 셀의 테두리 사이의 거리(길이)를 설정합니다. 가로 간격/세로 간격)

<style>
table,td{border-spacing:length}
</style>
</head>
<body>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>

로그인 후 복사

위 그림과 동일하지만 이 설정은 세로 간격이므로 보이는 것이 다를 수 있으므로 여기서는 렌더링이 없습니다. 마지막으로 캡션이 있습니다. side 속성은 테이블 제목을 설정하는 위치로 위 또는 아래에 설정할 수 있습니다. 괜찮습니다.

그러므로 이러한 속성을 갖는 것이 매우 편리합니다. 다음 지식은 나중에 소개하겠습니다.

CSS 테이블에 테두리 스타일 추가 요약에 대한 오늘의 기사는 여기에서 끝납니다(CSS 스타일에 대한 더 많은 지식을 알고 싶다면 PHP 중국어 웹사이트 css 학습 매뉴얼 칼럼을 방문하여 알아보세요). 궁금한 학생은 다음을 수행할 수 있습니다. 아래에 질문을 남겨주세요

CSS에서 정렬되지 않은 목록을 설정하는 방법은 무엇입니까? CSS 목록 스타일 요약

위 내용은 CSS 테이블에 테두리 스타일을 추가하는 방법은 무엇입니까? CSS 테이블 테두리 스타일 요약(전체 예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!