Latest web development tutorials

CSS 테이블 (표)

사용 CSS 크게 HTML 테이블의 모양을 향상시킬 수 있습니다.

회사 접촉 국가
이 Alfreds Futterkiste 마리아 앤더스 독일
Berglunds의 snabbkop 크리스티나 베르 글룬 스웨덴
센트로 COMERCIAL Moctezuma 시스코 장 멕시코
언 스트 헨델 롤랜드 멘델 오스트리아
섬 무역 헬렌 베넷 영국
Koniglich 에센 필립 크레이머 독일
박카스 Winecellars 웃고 요시 Tannamuri 캐나다
Magazzini ALIMENTARI RIUNITI 조반니 Rovelli 이탈리아
북 / 남 사이먼 크라우 영국
파리 SPECIALITES 마리 버트 랜드 프랑스
빅 치즈 리즈 닉슨 미국
Vaffeljernet 의 Palle 입센 덴마크

표 테두리

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

다음의 예는 목 및 TD 요소 검은 색 테두리의 테이블을 지정합니다 :

예

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

»시도

위의 예에서, 테이블이 이중 테두리를 가지고 있습니다. 테이블은 상기 제 / TD 소자 분리 테두리를 가지고 있기 때문이다.

테이블의 단일 프레임을 표시하기 위해, 국경 붕괴 속성을 사용합니다.

접이식 프레임

국경 붕괴 특성은 표 테두리가 하나의 경계로 축소 또는 분리 여부를 설정 :

예

테이블
{
국경 - 붕괴 : 붕괴;
}
테이블, 일, TD
{
국경 : 1 픽셀 검은 색;
}

»시도

테이블 폭과 높이

폭 및 높이의 속성 테이블의 폭과 높이를 정의한다.

다음의 예는 요소 일 50 픽셀의 100 % 높이의 테이블 폭으로 설정됩니다 :

예

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

»시도

양식 텍스트 정렬

표 텍스트 정렬 및 수직 정렬 속성.

텍스트 정렬 속성은 수평 오른쪽, 왼쪽처럼 정렬, 또는 중심을 설정한다 :

예

td
{
text-align:right;
}

»시도

이러한 위, 아래, 또는 중간으로 수직-align 속성 수직 정렬 설정 :

예

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

»시도

양식 작성

목차 국경 제어 사이의 공간에는 충전 특성 및 TD 번째 요소를 사용하는 경우는 :

예

td
{
padding:15px;
}

»시도

색상 표

다음은 테두리의 색상, 텍스트와 배경 색상 번째 요소를 지정합니다 :

예

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

»시도

예

더 많은 예제

개인 양식을 확인
이 예는 개인화 된 양식을 만드는 방법을 보여줍니다.

테이블 캡션 위치를 설정
이 예는 테이블 헤더를 배치하는 방법을 보여줍니다.