[html, css] 6. Table

table 태그 구성

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

table 태그 내의 tr은 row(가로 행), td는 column(세로 열)을 의미한다. td대신 th를 사용하면 글자가 굵게 처리된다.

원하는 만큼 row, column을 넣으면 표가 완성된다.

tbody, thead는 영역구분을 위해 사용된다.

 

vertical-align 속성

-테이블 셀 내에서 상하정렬

td, th {
  vertical-align : middle;
}

 

-inline 요소 간 상하정렬

<p>
  <span style="font-size : 50px">Greetings</span><span style="font-size : 20px; vertical-align:top;">안녕</span>
</p>

display: inline 혹은 display: inline-block 요소들을 나란히 배치하면 상하정렬이 이상한 경우가 있다.

특히, 큰 이미지와 글, 큰 글씨 옆에 있는 작은 글씨같은 요소들을 나란히 배치했을 때 서로 높이가 맞지 않는 경우가 많다.

이럴 때 vertical-align 속성을 사용한다.