본문 바로가기

■ 블로그꾸미기/HTML/css

[ HTML ] 테이블에 색상을 넣어보자/ 테두리도 꾸미기

 테이블에 색을 입혀서 꾸며보기
<table border bgcolor="#ffcccc">
<tr>
<td>희야의웹하우스</td>
</tr>
</table>

<table> 옆에 bgcolor= 소스를 넣으면 테이블 전체에 색이 들어갑니다.



<table border>
<tr>
<td bgcolor="#ffeecc">희야의웹하우스</td>
</tr>
</table>

<td> 안에 bgcolor= 소스를 넣으면 해달 셀 부분만 배경색이 입혀집니다.



<table border bgcolor="#ffcccc">
<tr>
<td bgcolor="#ffeecc">희야의웹하우스</td>
</tr>
</table>

<table> 와 <td>에 각각 bgcolor 색을 넣었습니다.
셀부분의 색이 바깥쪽 테이블 색을 덮었더니, <table>에 넣은 배경색이 테두리 색으로 보입니다.

<table bgcolor="#ffcccc">
<tr>
<td bgcolor="#ffeecc">희야의웹하우스</td>
</tr>
</table>

위쪽 테이블과의 차이점이 보이시나요 ?
위쪽 테이블은 기본적인 border(테두리) 소스가 들어가있고, 아랫쪽에는 테두리 소스가 없습니다.
그랬더니 왠지 더 매끄럽고 깔끔한 테이블이 만들어졌습니다.


 테이블 테두리 가늘게 만들어보자


<table bgcolor="#ff0000" cellspacing=1>
<tr>
<td bgcolor="#ffeecc">희야의웹하우스</td>
</tr>
</table>

뒤쪽에 cellspacing=1 이라는 소스가 들어가서 테이블의 테두리를 가늘게 만들어주는 역활을 하고 있습니다.

<table bgcolor="#000000" cellspacing=1 cellpadding=5>
<tr>
<td bgcolor="#ffeecc">희야의웹하우스</td>
</tr>
</table>