HTML 테이블의 모양은 크게 CSS로 개선 될 수있다 :
| 회사 | 접촉 | 국가 |
|---|---|---|
| 이 Alfreds Futterkiste | 마리아 앤더스 | 독일 |
| Berglunds의 snabbkop | 크리스티나 베르 글룬 | 스웨덴 |
| 센트로 COMERCIAL Moctezuma | 시스코 장 | 멕시코 |
| 언 스트 헨델 | 롤랜드 멘델 | 오스트리아 |
| 섬 무역 | 헬렌 베넷 | 영국 |
| Koniglich 에센 | 필립 크레이머 | 독일 |
| 박카스 Winecellars 웃고 | 요시 Tannamuri | 캐나다 |
| Magazzini ALIMENTARI RIUNITI | 조반니 Rovelli | 이탈리아 |
표 테두리
CSS에서 표 테두리를 지정하려면 사용 border 속성을.
아래의 예에 대한 검은 색 테두리 지정 <table> , <th> , 그리고 <td> 요소 :
이 예에서 테이블 위의 두 테두리를 가지고 있음을 알 수 있습니다. 테이블과 양 때문이다 <th> 과 <td> 요소는 별도의 테두리가 있습니다.
표 테두리 축소
border-collapse 속성은 표 테두리가 하나의 경계로 축소할지 여부를 설정합니다 :
당신은 단지 테이블 주위에 테두리를 원하는 경우에만 지정 border 의 속성 <table> :
표 너비 및 높이
너비와 테이블의 높이에 의해 정의 된 width 과 height 속성.
아래의 예는 100 % 표 너비 및 높이 설정 <th> 50 픽셀로 소자 :
수평 정렬
text-align 속성의 콘텐츠 (왼쪽처럼, 오른쪽, 또는 센터) 수평 정렬을 설정 <th> 이나 <td> .
기본적의 함량은 <th> 요소가 중심 정렬과의 함량 <td> 요소는 왼쪽 정렬된다.
다음의 예에서 텍스트 왼쪽은-정렬 <th> 요소를 :
수직 정렬
vertical-align 속성의 콘텐츠 (상단, 하단, 또는 중간 같은) 수직 정렬을 설정 <th> 이나 <td> .
기본적으로 테이블의 내용의 수직 정렬이 중간이다 (모두 <th> 과 <td> 요소).
다음의 예에 대한 아래로 수직 텍스트 정렬 설정 <td> 요소를 :
테이블 패딩
국경과 테이블의 내용 사이의 간격을 제어하기 위해 사용하는 padding 에 속성 <td> 및 <th> 요소를 :
수평 디바이더
| 이름 | 성 | 저금 |
|---|---|---|
| 베드로 | 그리핀 | $ (100) |
| 로이스 | 그리핀 | $ (150) |
| 조 | 스완슨 | $ (300) |
추가 border-bottom 에 속성을 <th> 과 <td> 수평 분할을위한 :
Hoverable 표
사용 :hover 에 선택 <tr> 통해 마우스 테이블 행을 강조 :
| 이름 | 성 | 저금 |
|---|---|---|
| 베드로 | 그리핀 | $ (100) |
| 로이스 | 그리핀 | $ (150) |
| 조 | 스완슨 | $ (300) |
스트라이프 테이블
| 이름 | 성 | 저금 |
|---|---|---|
| 베드로 | 그리핀 | $ (100) |
| 로이스 | 그리핀 | $ (150) |
| 조 | 스완슨 | $ (300) |
얼룩말 줄무늬 테이블의 경우, 사용 nth-child() 선택을하고, 추가 background-color 모든 짝수 (또는 홀수) 테이블 행 :
표 색상
아래의 예는 배경 색상 및 텍스트 색상 지정 <th> 요소를 :
| 이름 | 성 | 저금 |
|---|---|---|
| 베드로 | 그리핀 | $ (100) |
| 로이스 | 그리핀 | $ (150) |
| 조 | 스완슨 | $ (300) |
응답 표
화면이 전체 내용을 표시하기 위해 너무 작은 경우 응답 테이블은 가로 스크롤 막대를 표시합니다 :
| 이름 | 성 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 | 전철기 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 처녀 | 스미스 | (50) | (50) | (50) | (50) | (50) | (50) | (50) | (50) | (50) | (50) | (50) | (50) |
| 이브 | 잭슨 | (94) | (94) | (94) | (94) | (94) | (94) | (94) | (94) | (94) | (94) | (94) | (94) |
| 아담 | 존슨 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
(같은 컨테이너 요소를 추가 <div> 와 함께) overflow-x:auto 주위에 <table> 요소가 응답하기 위해 :
더 예
멋진 테이블 만들기
이 예제는 멋진 테이블을 만드는 방법을 보여줍니다.
테이블 캡션의 위치를 설정합니다
이 예는 테이블 캡션을 배치하는 방법을 보여줍니다.
연습으로 자신을 테스트!
연습 1» 운동 2» 운동 3» 운동 4» 운동 5» 운동 6»
CSS 테이블 속성
| 재산 | 기술 |
|---|---|
| border | 하나의 선언에서 모든 테두리 속성을 설정합니다 |
| border-collapse | 표 테두리를 축소 할 것인지 여부를 지정합니다 |
| border-spacing | 인접 셀의 경계 사이의 거리를 지정 |
| caption-side | 테이블 캡션의 위치를 지정합니다 |
| empty-cells | 테이블의 빈 셀에 테두리와 배경을 표시할지 여부를 지정합니다 |
| table-layout | 레이아웃 알고리즘이 표에 사용되는 집합 |