반응형
아직도 게시판이나 관리자 모드쪽에 많이 테이블을 많이 이용하고 있는데,
프로그램 하다 보면 관리자 쪽은 디자인을 너무 안하다 보니 보기 어지러울 때도 있다.
간단히 CSS 써서 조금 편하게 볼수 있도록 하자.
어디선가 가져온 소스를 다시 변경했는데, 어디였는지 잘모르겠어서 죄송...
위에 그림이 실행하였을때 나오는 화면인데, 일딴 3개 단락중 앞에 2개는 CSS가 적용이 안된 것이고
아래는 CSS를 적용한 것이다.
TableCSS.zipCSS 적용은 첨부파일 참조하면 되겠으며, table 태그에 class="tblcss" 만 적어 주면 되겠다.
기존의 테이블 만드는 방식과 다른 것은
2열 3행 테이블 만들때 드림위버에서 만들면 이렇게 만들어 진다.
<table width="550" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
하지만 CSS적용을 위해
<table width="550" border="1" class="tblcss">
<thead>
<tr>
<td> </td>
<td> </td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
</tr>
</tfoot>
</table>
물론 테이블이 무슨 곤충인냥 머리, 몸통, 다리로 안나누어도 되지만
나눠서 하는 편이 좀더 보기에 좋다. ㅋㅋ
caption에 대해서는 직접 해보시길...
한가지 주의 html 선언 맨위에
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
를 안적어주면 마우스 오버 CSS가 안 먹힘