쓸데 많은 Table 레이아웃과 vertical-align 속성

기본적인 table HTML 구성

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

table 태그 내에 tr은 행, td는 열을 의미한다. 내가 원하는 만큼 행과 열을 넣어주면 표를 완성시킬 수 있다. thead, tbody는 헤드 부분과 바디 부분을 구분하기 위해 사용하며 td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 표기된다.

테이블 셀 내에서 상하정렬할 땐 vertical-align

td, th {
  vertical-align : middle;
}

vertical-align 속성을 이용하여 테이블의 상하를 조절할 수 있다. top, middle, bottom 사용 가능.

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

display: inline 혹은 inline-block 요소들을 배치하면 상하정렬이 이상한 경우가 종종 있다. 특히, 큰 이미지와 글 혹은 큰 글씨 옆에 있는 작은 글씨. 이런 것들이 나란히 배치했을 때 높낮이가 서로 다른 경우가 많기 때문에 margin-top 속성 대신에 쓰이는 속성이다.

top, middle, bottom 말고도 super, sub, px 단위로도 사용 가능하다.