본문 바로가기
css

css로 table 속성 지정(너비,높이,글자색,배경색,선그리기)

by 지구별에 2014. 6. 25.

 

 

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>
<html>

<head>

</head>

<body>

<table width="200px" height="200px">

<tr><th heigth="20px">월요일</th><th>화요일</th><th>수요일</th></tr>
<tr><td>음악</td><td>미술</td><td>체육</td></tr>

</table>

</body>

 

 

css에서는 이렇게 합니다

 

<!DOCTYPE html>
<html>

<head>
<style>
table {
width: 200px;
height: 200px;
}
th{height: 20px;}
 </style>

</head>

<body>

<table><tr><th>월요일</th><th>화요일</th><th>수요일</th></tr>
<tr><td>음악</td><td>미술</td><td>체육</td></tr></table>

</body>
</html>

 

실행화면

 

선이 아직 없으니 이상하게 보이네요 ㅎㅎ

 

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>
<tr><td>음악</td><td>미술</td><td>체육</td></tr>

</table>

 

 

css에서는 이렇게 합니다

 

border: 1px solid red; 선두께, 선모양, 선색상 순입니다.

 

필요한 것만 써도 되지만 선모양은 반드시 써 주어야 해요

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

<style>
table {
width: 200px;
height: 200px;
}
th{height: 20px;}

 

table,th,td{

border: 1px solid red;

}
 </style>


 

 

실행화면

 

 

 

table 글자색과 배경색을 css로

 

 

css에서는 이렇게 합니다

 

-color속성:  글자색 지정

-background-color 속성: 배경색 지정

 

[html/css] 글자색 color 속성, 배경색 background-color 속성 배우기

 

<style>
table {
width: 200px;
height: 200px;
}
th{height: 20px;}

 

table,th,td{

border: 1px solid red;

color: blue;
background-color: yellow;

}


 </style>

 

 

 

다음 시간엔 table을 css로 정렬하는 방법과

 

cellspacing, cellpadding 을 css로 지정하는 방법을 알아 볼게요

 

css로 table 속성 지정 2(cellpadding, cellspacing 을 css로)

 

 

「함께 읽어 볼만한 글」

 

table 이미지 공백 없애기

 

div 이미지 공백 없애기


 

 

 

반응형

댓글