CSS의 테이블 관련 소개

테이블 테두리

border 속성을 사용하여 CSS 테이블 테두리를 지정합니다.

다음 예에서는 테이블의 Th 및 TD 요소에 검은색 테두리를 지정합니다.

예

table, th, td{border: 1px solid black;}

위 예에서 테이블에는 이중 테두리가 있습니다. 이는 테이블 요소와 th/td 요소가 별도의 경계를 갖기 때문입니다.

테이블의 단일 테두리를 표시하려면 border-collapse 속성을 사용하세요.

테두리 접기

border-collapse 속성은 테이블의 테두리가 단일 테두리로 접힐지 또는 분리될지 여부를 설정합니다.

인스턴스

table{border-collapse:collapse;}table,th, td{border: 1px solid black;}

테이블 너비 및 높이

Width 및 height 속성은 테이블의 너비와 높이를 정의합니다.

다음 예는 1번째 요소의 너비를 100%로 설정하고 높이를 50픽셀로 설정한 표입니다.

예

table 
{
width:100%;
}
th
{
height:50px;
}

표 텍스트 정렬

테이블 텍스트 정렬 및 세로 정렬 속성은 .

text-align 속성은 왼쪽, 오른쪽, 가운데와 같은 가로 정렬을 설정합니다.

인스턴스

td{text-align:right;}

vertical-align 속성은 위쪽과 같은 세로 정렬을 설정합니다. , 하단 또는 중앙 :

예

td
{
height:50px;
vertical-align:bottom;
}

테이블 패딩

테이블 내용에서 공백 사이의 테두리를 제어하려면 다음의 패딩 속성을 사용해야 합니다. td 및 번째 요소:

예

td
{
padding:15px;
}

테이블 색상

다음 예에서는 테두리 색상과 번째 요소의 텍스트 및 배경 색상을 지정합니다. 🎜>

예

rree

【 관련 추천】

1.

특별 추천: "php Programmer Toolbox " V0.1 버전 다운로드

2.

무료 CSS 온라인 동영상 튜토리얼

3.

php.cn Dugu Jiujian (2) - css video 튜토리얼

위 내용은 CSS의 테이블 관련 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!