[HTML] Table

tableタグ

<table>:表全体、枠なし<tr>:行<th>:タイトルセル<td>:電池

<table border="1">
  <tr>
    <th>1행 1열(제목)</th>
    <td>1행 2열</td>
  </tr>
  <tr>
    <th>2행 1열(제목)</th>
    <td>2행 2열</td>
  </tr>
</table>

表タイトル

<caption>見出しの中央

<table border="1">
  <caption>표 제목 연습</caption>
  <tr>
  </tr>
</table>

<figure> , <figcaption> <figcaption>位置に応じて表の上または下に見出しを表示
(画像またはビデオに使用可能)

<figure>
  <figcaption>표 제목 연습</figcaption>
  <table border="1">
    <tr>
    </tr>
  </table>
</figure>

セルの編集

<colspan> , <rowspan>行または列のマージ

<table border="1">
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 300px;">
    <col style="width: 100px;">
    <col style="width: 300px;">
  </colgroup>
  <tr>
    <th>이름</th>
    <td></td>
    <th>연락처</th>
    <td></td>
  </tr>
  <tr>
    <th>주소</th>
    <td colspan="3"></td>
  </tr>
  <tr>
    <th>자기소개</th>
    <td colspan="3"></td>
  </tr>
</table>

テーブル構造の定義

<thead> , <tbody> , <tfoot>

列ごとにグループ化してスタイルを指定

<col>

同じ列のすべてのセルに適用する場合に使用する

クローズラベルなし

span属性は複数の列を組み合わせることができる

<colgroup>

バンドルされた列数に応じて使用<col>ラベル

関連閉鎖ラベル

<caption>表記後、<tr>・<td>表記前使用

<table border="1">
  <caption>colgroup 연습</caption>
  <colgroup>
    <col>
    <col span="2" style="background-color:blue;">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>