본문 바로가기

html 드림위버

css 테이블 - 2

<style type="text/css">
<--<link rel="stylesheet" type="text/css" href="" />-->


/*Table Style*/
.tableWrap{border-top:3px solid #cb972d;width:707px;padding-bottom:20px;}
.tableWrap table.tableStyle{border-collapse:collapse;}
.tableWrap table th{border:1px solid #cbc6bb;color:#716044;background:#f6f4f0;padding:5px 0 4px 0;}
.tableWrap table td{border:1px solid #cbc6bb;text-align:center;padding:3px 5px;line-height:16px;}
.tableWrap table td.backBg{background:#e3eaf2;}
.tableWrap table td.valignTop{vertical-align:top;}
.tableWrap .tableList{text-align:left;margin-left:22px;line-height:16px;}

.tableWrapL{border-top:3px solid #cb972d;width:707px;padding-bottom:20px;}
.tableWrapL table.tableStyleL{border-collapse:collapse;}
.tableWrapL table th{border:1px solid #cbc6bb;color:#716044;background:#f6f4f0;padding:5px 0 4px 0;}
.tableWrapL table td{border:1px solid #cbc6bb;text-align:left;padding:3px 5px;line-height:16px;}
.tableWrapL table td.valignTop{vertical-align:top;}
.tableWrapL .tableList{text-align:left;margin-left:22px;line-height:16px;}*

.tableWrap330{border-top:3px solid #cb972d;width:330px;padding-bottom:20px;}
.tableWrap330 table.tableStyle{border-collapse:collapse;}
.tableWrap330 table th{border:1px solid #cbc6bb;color:#716044;background:#f6f4f0;height:27px;}
.tableWrap330 table td{border:1px solid #cbc6bb;text-align:center;padding:3px;line-height:16px;}
.tableWrap330 table td.valignTop{vertical-align:top;}
.tableWrap330 .tableList{text-align:left;margin-left:22px;line-height:16px;}


</style>

</head>
 
<body>

<div class="tableWrap">
 <table width="707" cellpadding="0" cellspacing="0" class="tableStyle" summary="개월수에 따른 예방접종별 접종시기 안내표입니다.">
  <caption>영유아 표준 예방 접종표</caption>
  <thead>
   <tr>
    <th></th>
    <th scope="col">출생</th>
    <th scope="col">1개월</th>
    <th scope="col">2개월</th>
    <th scope="col">4개월</th>
    <th scope="col">6개월</th>
    <th scope="col">12개월</th>
    <th scope="col">15개월</th>
    <th scope="col">18개월</th>
    <th scope="col">24개월</th>
    <th scope="col">36개월</th>
    <th scope="col">4~6세</th>
    <th scope="col">12세</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td scope="row">BCG</td>
    <td colspan="2">1차</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td scope="row">B형간염</td>
    <td>1차</td>
    <td>2차</td>
    <td></td>
    <td></td>
    <td>3차</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td scope="row">DTap</td>
    <td></td>
    <td></td>
    <td>1차</td>
    <td>2차</td>
    <td>3차</td>
    <td></td>
    <td colspan="2">추가1차</td>
    <td></td>
    <td></td>
    <td>추가2차</td>
    <td>추가Td</td>
   </tr>
   <tr>
    <td scope="row">소아마비</td>
    <td></td>
    <td></td>
    <td>1차</td>
    <td>2차</td>
    <td>3차</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>추가1차</td>
    <td></td>
   </tr>
   <tr>
    <td scope="row">MMR</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="2">1차</td>
    <td></td>
    <td></td>
    <td></td>
    <td>2차</td>
    <td></td>
   </tr>
   <tr>
    <td scope="row">일본뇌염</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="4">1, 2차</td>
    <td>3차</td>
    <td>추가1차</td>
    <td>추가2차</td>
   </tr>
   <tr>
    <td scope="row">수두</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>1차</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tbody>
 </table>
</div>

실용예제 --------------------------------------------------------------------------------------------------------

영유아 표준 예방 접종표
출생 1개월 2개월 4개월 6개월 12개월 15개월 18개월 24개월 36개월 4~6세 12세
BCG 1차
B형간염 1차 2차 3차
DTap 1차 2차 3차 추가1차 추가2차 추가Td
소아마비 1차 2차 3차 추가1차
MMR 1차 2차
일본뇌염 1, 2차 3차 추가1차 추가2차
수두 1차

'html 드림위버' 카테고리의 다른 글

이미지맵에 링크표시 없애기/ 선없애기  (0) 2012.11.05
배경 css  (0) 2012.11.02
폰트에 css주는법 html/css  (0) 2012.11.01
css 테이블  (0) 2012.10.24
기본 css/style.css----웹표준 css  (0) 2012.10.24