스타일시트를 이용하여 테이블 만들기 /웹접근성/CSS/DIV코딩/웹표준코딩/테이블/table/웹디자인/소스/
스타일시트를 이용해서 테이블 만들기
이거 잘 만들어놓으면 활용도가 높아요! 왜냐면,, 컨트럴 씨 컨트럴 브이 ㅋㅋㅋㅋ
쟈 - 스타일시트로 요렇게 테이블을 만들어봅니다.
이건, 게시판 느낌이 물씬 풍기게,,ㅎㅎ 아마도 이렇게 스타일시트를 만들어놓고
프로그래머한테 넘겨주면, 게시판 리스트는 요렇게 보이겠죠..
다양하게활용해서, 표를 예쁘게 꾸며봅시다!!
그러고보니,, 18 18 18 18..수정을 안했네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 왜그랫으까..ㅠㅠ
CSS에 넣을 소스입니다.
/*테이블*/
table.t_01 {width:98%; border-top:2px solid #eb235c; border-bottom:1px solid #dfe0e0; table-layout:fixed; margin:10px auto; border-collapse:collapse;}
table.t_01 tr th {padding:7px 0px 7px 0px; border:none; border-bottom:3px solid #dfe0e0; background: url(/img/sub/bg.gif) repeat-x top; color:#7a7a7a; font-weight:bold; text-align:center; vertical-align:middle;}
table.t_01 tr td {padding:6px 0px 6px 0px; border:none; border-bottom:1px solid #dfe0e0; border-top:none; color:#454545; text-align:center; vertical-align:middle;}
table.t_01 tr th.left_b {border-left:1px solid #dfe0e0 !important;} /*왼쪽선*/
table.t_01 tr th.right_b {border-right:1px solid #dfe0e0 !important;} /*오른쪽선*/
table.t_01 tr td.left {text-align:left !important; padding:6px 0px 6px 15px !important;} /*왼쪽정렬*/
table.t_01 tr td.bold {font-weight:bold !important; color:#7a7a7a !important;} /*글씨두껍게*/
table.t_01 tr td.red {color:#ff0000 !important;} /*빨간글씨*/
테이블이름과, th, td로 구분지어주면 스타일넣기도 편하고, 쓰기도 편해요.
각 th와td마다 다른 스타일을 적용할 수 있어요.
주석처리하면 나중에도 어떤 스타일인지 한눈에 알아보기 쉽겠죠.
테이블 작성을 해볼까요~
- 원래 웹접근성검사에 100% 맞출려면,, 넓이도 지정해줘야 하는데요.. 우선 패스합니다..
- 테이블에 스타일시트만 적용했어요^^ 웹접근성100% 홈페이지 만들땐 요렇게 하면 안돼요,,아니..저렇게 해놓고 테이블에 추가를 더 해줘야 합니다.
- 그건 추후에 계속 추가하도록 하지요!
<table class="t_01">
<tr>
<th class="left_b">No.</th>
<th width="60%">제목</th>
<th>작성일</th>
<th class="right_b">조회수</th>
</tr>
<tr>
<td class="bold">22</td>
<td class="left">심지네 심지네 심지네</td>
<td>2011-08-30</td>
<td class="red">9898</td>
</tr>
<tr>
<td class="bold">21</td>
<td class="left">심지네 테이블 만들기2</td>
<td>2011-08-29</td>
<td class="red">2151</td>
</tr>
<tr>
<td class="bold">20</td>
<td class="left">심지네 웹디자인</td>
<td>2011-08-26</td>
<td class="red">8855</td>
</tr>
<tr>
<td class="bold">19</td>
<td class="left">심지네 새창열기</td>
<td>2011-08-26</td>
<td class="red">1235</td>
</tr>
<tr>
<td class="bold">18</td>
<td class="left">심지네 행복한일탈</td>
<td>2011-08-27</td>
<td class="red">4565</td>
</tr>
<tr>
<td class="bold">17</td>
<td class="left">심지네 간단한 퀵메뉴</td>
<td>2011-08-25</td>
<td class="red">67844</td>
</tr>
<tr>
<td class="bold">16</td>
<td class="left">심지네 한화이글스 홈페이지 </td>
<td>2011-08-20</td>
<td class="red">78426</td>
</tr>
<tr>
<td class="bold">15</td>
<td class="left">심지네 테이블 만들기1</td>
<td>2011-08-15</td>
<td class="red">98555</td>
</tr>
<tr>
<td class="bold">14</td>
<td class="left">심지네 웹접근성이란?</td>
<td>2011-08-10</td>
<td class="red">45484</td>
</tr>
</table>
간단하죠? 이렇게만 해주면 끝!!
th 백그라운드 이미지는 첨부파일에 슝~