HTML Tables

16430 ワード
Dream Coding テキストリンク
  • table要素テーブルを作成します.
  • tr要素は、ローをテーブルに追加します.
    • td要素を使用して
  • 行にデータを追加します.
  • 表のタイトルは、データの意味を明確にしています.th要素のあるタイトルが追加されます.
  • テーブルデータはcolspanプロパティを使用してカラムをマージできます.
  • テーブルデータはrowspanプロパティを使用して行をマージできます.
  • 表は、頭部、本体、プッシュロッドの3つの主要な部分に分けることができます.
  • テーブルのヘッダはthead要素によって作成されます.
  • テーブルのボディは、tbody要素によって作成されます.
  • テーブルのツイッターは、tfoot要素によって作成されます.
  • CSSプロパティは、テーブルおよびデータに適用できます.
    • <!DOCTYPE html>
<html>
<head>
  <title>Ship To It - Company Packing List</title>
  <link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <ul class="navigation">
    <li><img src="https://content.codecademy.com/courses/web-101/unit-9/htmlcss1-img_logo-shiptoit.png" height="20px;"></li>
    <li class="active">Action List</li>
    <li>Profiles</li>
    <li>Settings</li>
  </ul>
  <div class="search">Search the table</div>
  <table>
    <thead>
      <tr>
        <th>Company Name</th>
        <th>Number of Items to Ship</th>
        <th>Next Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Adam's Greenworks</th>
        <td>14</td>
        <td>Package Items</td>
      </tr>
      <tr>
        <th>Davie's Burgers</th>
        <td>2</td>
        <td>Send Invoice</td>
      </tr>
      <tr>
        <th>Baker's Bike Shop</th>
        <td>3</td>
        <td>Send Invoice</td>
      </tr>
      <tr>
        <th>Miss Sally's Southern</th>
        <td>4</td>
        <td>Ship</td>
      </tr>
      <tr>
        <th>Summit Resort Rentals</th>
        <td>4</td>
        <td>Ship</td>
      </tr>
      <tr>
        <th>Strike Fitness</th>
        <td>1</td>
        <td>Enter Order</td>
      </tr>
      </tbody>
  </table>
</body>
</html>
    2021-06-18講義第2類、アクセス制限者
    BOJ 2096降格