HTML tableに垂直に整列

▶▼基本的な表HTML構成

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

テーブルタグ内のtrはrowを表し、tdはcolumnを表す.私が望むように、rowとcolumnを加えると、表が完成します.

theadおよびtbodyは、単純な領域分割のためのタグである.

tdの代わりにtdタグを使用すると、タイトルのように太字処理が行われます.

▶▼▼表セル内で上下揃えの場合は垂直揃え

  td, th {
    vertical-align : middle;
  }

垂直位置合わせアトリビュートを使用して、表の上下に位置合わせできます.テーブルにはtop、bottom、middleのみが表示されます
▶πinline要素間を上下に揃えた場合垂直に揃える

  <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のテーブル絵

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

時々divの要素を表化したいです.この場合、tableラベルにしたい要素にdisplay:tableを書き、trにしたい要素にdisplay:table-row、tdにdisplay:table-cellを入れればよい.