HTML_table과 vertical-align

▶️ 기본적인 table HTML 구성

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

1. table태그 내의 tr은 row, td는 column을 의미한다. 내가 원하는 만큼 row와 column을 넣어주면 표가 완성된다.
2. thead와 tbody는 단순 영역 구분을 위한 태그이다.
3. td대신 td태그를 사용하면 제목처럼 굵게 처리된다.

---

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

  td, th {
    vertical-align : middle;
  }

vertical-align 속성을 이용해 테이블 내에서의 상하정렬을 하실 수 있다. 테이블 안에선 top, bottom, middle만 사용가능

---

▶️ inline 요소 간 상하정렬할 땐 vertical-align

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

display : inline 및 inline-block 요소들을 나란히 배치하면 상하정렬이 이상한 경우가 있다. 큰 이미지와 글, 큰 글씨 옆에 있는 작은 글씨 등을 나란히 배치했을 때 높이가 안맞는 경우에, margin-top 대신 사용하는 속성이다. 테이블 이외 태그에선 super, sub, px 단위로도 사용이 가능하다.

---

▶️ div의 table 화

  .box {
    display : table;
    display : table-row;
    display : table-cell;
  }

가끔 div로 이루어진 요소들을 테이블화 시키고 싶을 때가 있다. 그럴 땐 table태그로 변하길 원하는 요소에 display : table을 적어준 뒤에, tr로 변하길 원하는 요소엔 display : table-row, td로 변하길 원하는 요소엔 display : table-cell 을 넣어주면 된다.