HTML

HTML table태그

브레드jung 2021. 4. 8. 18:56

Table = 표를 만들기 위한 테그 
<table>테이블을 만드는 태그
<th>테이블의 헤더부분을 만드는 태그
<tr>테이블의 행을 만드는 태그
<td> 테이블의 열을 만드는 태그

border 속성은 테이블의 테두리를 설정해주는 속성입니다. ex (border="1") 숫자가 높을수록 테두리가 두꺼워집니다. 

bordercolor는 테두리의 색상을 지정하는 속성입니다. ex(bordercolor="blue") default값은 검정색입니다. 

width와 height는 테이블의 크기를 결정해주는 속성입니다. ex(width=50px width=100%)픽셀단위로 크기,비율로 줄 수 있습니다. 

align은 테이블안에있는 값들을 정렬시키는 기능을 합니다. 

bgcolor속성으로 원하는 태그의 배경색을 지정해줄 수 있습니다. 

colspan, rowspan은 셀을 합병(행/열)시키는 기능을 합니다. 

 

 

<html>

  <head>

    <title>table</title>

  </head>

  <body>

     <center>

       <table align="center" border="1" bordercolor="brown" width="100%" height= "100%">

       <tr>

       <td align="center" colspan="2" width="66%" height="33%">1</td>

 

       <td align="center" rowspan="2" width="33%" height="66%">2</td>

      </tr>

      <tr>

      <td align="center" rowspan="2" width="33%" height="66%">4</td>

      <td><img src ="img/e.jpg"/></td>

      </tr>

 

 

      <table border="1" bordercolor="red" width="50%" height= "100%">

      <tr bgcolor="orange">

      <td align="center" colspan="2">A</td>

 

      </tr>

      <tr>

      <td align="center" rowspan="3">B</td>

      <td align="center">C</td>

      </tr>

      <tr>

 

      <td align="center">D</td>

      </tr>

      <tr>

      <td align="center">E</td>

 

      </tr>

    </table>

  </center>

  </body>

</html>

반응형