CSS에서 테이블 테두리를 설정하는 방법

CSS 테이블의 테두리를 설정하는 방법: 1. 테두리 속성을 사용하여 테이블 요소에 테두리를 추가합니다. 구문은 "table{border:width style color;}"입니다. 2. 테두리 속성을 사용하여 테두리를 추가합니다. td 요소에 대한 테두리, 구문 "td{border: width style color;}".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

기본 테이블에는 테두리가 없습니다.

<table>
	<tr>
		<td>商品</td>
		<td>价格</td>
	</tr>
	<tr>
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>￥150</td>
	</tr>
</table>

CSS를 통해 테이블에 테두리를 추가할 수 있습니다.

방법 1: 테이블 라벨에만 테두리 설정

테이블 라벨에만 테두리(테두리) 스타일을 설정합니다. 이렇게 하면 테이블의 가장 바깥쪽 테이블에 테두리가 생기지만 내부에는 테두리 스타일이 생성되지 않습니다. 테이블.

구문: ​​

table{
	border: 1px solid red;
}

렌더링:

방법 2: td의 테두리 설정

테이블 td의 테두리 스타일 설정 테이블 개체 내의 td는 테두리 스타일을 구현하지만 중간 부분은 td는 이중 테두리 모양을 발생시킵니다.

문법:

td{
border: 1px solid red;
}

렌더링:

이중선 효과가 좋지 않다고 생각된다면. 설정할 수 있습니다:

table {
        border-collapse: collapse;
        
}

테이블(테이블)에 대해 병합된 테두리 모델(병합된 테두리) 설정, 효과 그림:

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS에서 테이블 테두리를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!