테이블 그리기, 표안에 표넣기,cellpadding, cellspacing, margin

테이블기본

 

구조

<table border>
  <tr>
    <td></td>
  </tr>
</table>

아래쪽으로 칸을 만들떈 을 추가세로 칸을 나눌땐 추가

td에도 align(left, right, center) 
         valign(top, bottom, middle) 속성 사용가능

 

 

표 안에 표 만들기

 

구조

<table border="1" width="500px" height="500">
  <tr>
    <td align="center">
      <table border="1" width="300px" height="300px">
        <tr>
          <td>af</td>
        </tr>
      </table>
    </td>   
  </tr>     
</table>

 

테이블 색상과 이미지 넣기

 

구조

 

<table width="400 px" height="400 px" align="center">
  <tr>
    <td bgcolor="#FFFF00" width="50" height="50"></td>
    <td></td>
    <td bgcolor="#FF0000" width="50" height="50"></td>
  </tr>
  
  <tr>
    <td></td>
    <td><img src="../이미지자료/13029f5cd815a1e1008f933ee93583f6.jpg" /></td>
    <td></td>
  </tr>
  
  <tr>
    <td bgcolor="#FF00FF" width="50" height="50"></td>
    <td></td>
    <td bgcolor="#00FF00" width="50" height="50"></td>
  </tr>
</table>

 

cellpadding, cellspacing

 

cellpadding 안쪽으로 여백

cellspacing 표와 표 사이 보더라인의 간격

 

 

※기본 브라우저 여백을 없애주는 작업해야된다.
4방향의 마진값을 0으로 입력
CSS로 적용됨

body {
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      margin-bottom: 0;
}