본문 바로가기

CSS/CSS with TABLE

CSS with TABLE

CSS를 TABLE에 적용하는 예

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> CSS 로 테이블 다루는 예 </TITLE>
<style type="text/css">

 tr.tablehead{
  width:50px; height:50px; background-color:rgb(200,200,200);
  font-weight:bolder; font-size:17pt; text-align:center; vertical-align:
  bottom; color:red
 }

 td{
  width:50px; height:50px; border-bottom:1px dotted black;
  border-right:1px dotted black; text-align:center;
 }
</style>

<script>
 on = true;
 function changeV(){
  if(on){
   document.getElementById("p1").style.visibility="hidden";
   on = !on;
  }else {
   document.getElementById("p1").style.visibility="visible";
   on = !on;
  }
 }
</script>
 </HEAD>

 <BODY>

  <table style="border:1px solid green; border-collapse:collapse;">
 <tr class="tablehead"><td >1</td><td>2</td><td>3</td></tr>
 <tr><td>A</td><td>B</td><td>C</td></tr>
 <tr><td>D</td><td>E</td><td>F</td></tr>
  </table>

<p>
<a style="text-decoration:none;" href="javascript:changeV();">ON/OFF</a><p>

  <p id="p1" style="visibility:visible">
  Hello DOM
  </p>
 </BODY>
</HTML>