[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>