css로 table 속성 지정(너비,높이,글자색,배경색,선그리기)
<table>태그를 배우면서 html5에서 지원하지 않는 속성을 언급했습니다.
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리
html5에서 지원하지 않는 속성: border, cellpadding, cellspacing, align, bgcolor, frame, width 등
table 역시 디자인이나 표현에 관한 것은 css로 분리하여 지정하는 것이 좋은데요.
table 관련 속성들을 css로 지정하는 방법을 몇 차례에 걸쳐 다루어 보겠습니다~
▶table 너비와 높이 css로 지정하는 법
html에서 너비와 높이를 지정하려면 이렇게 하지요
|
<!DOCTYPE html> <head> </head> <body> <table width="200px" height="200px"> <tr><th heigth="20px">월요일</th><th>화요일</th><th>수요일</th></tr> </table> </body> |
css에서는 이렇게 합니다
|
<!DOCTYPE html> <head> </head> <body> <table><tr><th>월요일</th><th>화요일</th><th>수요일</th></tr> </body> |
▶실행화면
선이 아직 없으니 이상하게 보이네요 ㅎㅎ
th는 제목을 나타내는 셀로 기본값이 굵을 글씨체에 중앙 정렬이고
td는 일반 셀로 기본값이 보통 글씨체에 왼쪽 정렬입니다.
▶table border 선두께, 선스타일, 선색상 지정을 css로
html에서는 이렇게 했지요
|
<table width="200px" height="200px" boder="1px" bordercolor="red"> <tr><th width-"20px">월요일</th><th>화요일</th><th>수요일</th></tr> </table> |
css에서는 이렇게 합니다
border: 1px solid red; 선두께, 선모양, 선색상 순입니다.
필요한 것만 써도 되지만 선모양은 반드시 써 주어야 해요
border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)
|
<style>
table,th,td{ border: 1px solid red; } |
▶실행화면
▶table 글자색과 배경색을 css로
css에서는 이렇게 합니다
-color속성: 글자색 지정
-background-color 속성: 배경색 지정
[html/css] 글자색 color 속성, 배경색 background-color 속성 배우기
|
<style>
table,th,td{ border: 1px solid red; color: blue; }
|
다음 시간엔 table을 css로 정렬하는 방법과
cellspacing, cellpadding 을 css로 지정하는 방법을 알아 볼게요
css로 table 속성 지정 2(cellpadding, cellspacing 을 css로)
「함께 읽어 볼만한 글」
'css' 카테고리의 다른 글
| [html/css] 박스 모델 이해하기 (0) | 2014.06.30 |
|---|---|
| css로 table 속성 지정 2(cellpadding, cellspacing 을 css로) (7) | 2014.06.26 |
| table 이미지 공백 없애기 (0) | 2014.06.24 |
| [html/css] div 이미지 공백 없애기 (8) | 2014.06.24 |
| word-break 줄바꿈 속성(break-all, keep-all) (0) | 2014.06.19 |
댓글