ベースをクリア-(3)tableラベル

49294 ワード
htmlcss テキストリンク

tableタグ


1.基本フォーマット

<table>
  <tr>
    <th>테이블 헤더</th>
    <td>테이블 데이터</td>
  </tr>
</table>

2.例


表の例

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>이름</th>
      <th>개발분야</th>
      <th>기타</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>00001</td>
      <td>프렌치케밥</td>
      <td>프론트엔드</td>
      <td></td>
    </tr>
    <tr>
      <td>00002</td>
      <td>hermine</td>
      <td>풀스택</td>
      <td></td>
    </tr>
  </tbody>
  <!-- <tfoot></tfoot> -->
</table>
結果画面

注意事項

  • 各行は<tr>タグで囲まれている
  • 各列の名前は<thead>で、値は<tbody>です.
  • <tfoot>の場合、累加値などが使用されます.
  • 値が空の場合は<td>の個数を満たす必要があります!

    • 3.深化例


    あなたが叶えたい画面



    画面構想

  • 1行は6グリッドtdを含む.
  • 合計7行を使用します.
    • <table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">월</th>
      <th scope="col">화</th>
      <th scope="col">수</th>
      <th scope="col">목</th>
      <th scope="col">금</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1교시</th>
      <td rowspan="2">왕초보 HTML &amp; CSS</td>
      <td>모각코</td>
      <td rowspan="2">왕초보 HTML &amp; CSS</td>
      <td>모각코</td>
      <td rowspan="2">왕초보 HTML &amp; CSS</td>
    </tr>
    <tr>
      <th scope="row">2교시</th>
      <!-- <td>왕초보 HTML &amp; CSS</td> -->
      <td rowspan="2">JavaScript 스킬업</td>
      <!-- <td>왕초보 HTML &amp; CSS</td> -->
      <td rowspan="2">JavaScript 스킬업</td>
      <!-- <td>왕초보 HTML &amp; CSS</td> -->
    </tr>
    <tr>
      <th scope="row">3교시</th>
      <td>Javascript 시작반</td>
      <!-- <td rowspan="2">JavaScript 스킬업</td> -->
      <td>Javascript 시작반</td>
      <td>Javascript 시작반</td>
    </tr>
    <tr>
      <th colspan="6" scope="row">점심 시간</th>
    </tr>
    <tr>
      <th scope="row">4교시</th>
      <td>SASS 기초반</td>
      <td rowspan="2">HTML &amp; CSS 포트폴리오반</td>
      <td rowspan="2">Open Seminar</td>
      <td rowspan="2">HTML &amp; CSS 포트폴리오반</td>
      <td>SASS 기초반</td>
    </tr>
    <tr>
      <th scope="row">5교시</th>
      <td>모각코</td>
      <!-- <td rowspan="2">HTML &amp; CSS 포트폴리오반</td> -->
      <!-- <td>Open Seminar</td> -->
      <!-- <td rowspan="2">HTML &amp; CSS 포트폴리오반</td> -->
      <td>모각코</td>
    </tr>
  </tbody>
</table>
    結果画面

    注意事項


  • 上下の複数のセルにrowspanプロパティが含まれており、trはtdセルを空白にします.
    (超安全HTML&CSS、Javascriptスキルアップグレード、HTML&CSSポートフォリオ半)

  • 複数の格子を左右に占めるとcolspanプロパティが追加されます.(ランチタイム)

  • scope=「row」プロパティとscope=「column」プロパティを追加することで、ブラウザはthがどのような情報を持っているかをより豊かに知ることができます.

    • cssクラスを塗りつぶす

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>표</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th scope="col">월</th>
          <th scope="col">화</th>
          <th scope="col">수</th>
          <th scope="col">목</th>
          <th scope="col">금</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1교시</th>
          <td rowspan="2" class="html-css-basic">왕초보 HTML &amp; CSS</td>
          <td class="coding">모각코</td>
          <td rowspan="2" class="html-css-basic">왕초보 HTML &amp; CSS</td>
          <td class="coding">모각코</td>
          <td rowspan="2" class="html-css-basic">왕초보 HTML &amp; CSS</td>
        </tr>
        <tr>
          <th scope="row">2교시</th>
          <!-- <td>왕초보 HTML &amp; CSS</td> -->
          <td rowspan="2" class="js-skillup">JavaScript 스킬업</td>
          <!-- <td>왕초보 HTML &amp; CSS</td> -->
          <td rowspan="2" class="js-skillup">JavaScript 스킬업</td>
          <!-- <td>왕초보 HTML &amp; CSS</td> -->
        </tr>
        <tr>
          <th scope="row">3교시</th>
          <td class="js-basic">Javascript 시작반</td>
          <!-- <td rowspan="2">JavaScript 스킬업</td> -->
          <td class="js-basic">Javascript 시작반</td>
          <td class="js-basic">Javascript 시작반</td>
        </tr>
        <tr>
          <th colspan="6" scope="row">점심 시간</th>
        </tr>
        <tr>
          <th scope="row">4교시</th>
          <td class="sass-basic">SASS 기초반</td>
          <td rowspan="2" class="portfolio">HTML &amp; CSS 포트폴리오반</td>
          <td rowspan="2">Open Seminar</td>
          <td rowspan="2" class="portfolio">HTML &amp; CSS 포트폴리오반</td>
          <td class="sass-basic">SASS 기초반</td>
        </tr>
        <tr>
          <th scope="row">5교시</th>
          <td class="coding">모각코</td>
          <!-- <td rowspan="2">HTML &amp; CSS 포트폴리오반</td> -->
          <!-- <td>Open Seminar</td> -->
          <!-- <td rowspan="2">HTML &amp; CSS 포트폴리오반</td> -->
          <td class="coding">모각코</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
    結果画面
    FlutterのElement更新メカニズムの簡単な分析
    [マルチスレッド]