thinkNote

▶ HTML 표는 각 열, 행 또는 전체 표에 대해 서로 다른 크기를 가질 수 있다.

▶ "style" 속성에 "width" 혹은 "height" 속성을 사용하면 표, 행, 열의 크기를 지정한다.

■ 표 너비

▶ 표의 너비를 설정하고 싶다면, <table> 요소에 "style" 속성을 추가한다.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_width 

※ 너비의 크기 단위로 백분율을 사용하면 이 요소가 부모 요소 (이 경우 부모 요소)와 비교되는 너비를 의미한다.

■ 표 열 너비

▶ 지정한 열의 크기를 설정하고 싶다면 <th> 혹은 <td> 요소에 "style" 속성을 추가한다.

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_column_width 

■ 표 행 높이

▶ 지정한 행의 높이를 설정하고 싶다면, 표 행 요소에 "style" 속성을 추가한다.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

출처 : https://www.w3schools.com/html/html_table_sizes.asp