ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML_codecademy] Tables
      Language/HTML&CSS 2022. 8. 11. 18:16

      Learn all the syntax you need to create tables in your HTML documents.

      <!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 scope="col">Company Name</th>
    <th scope="col">Number of Items to Ship</th>
    <th scope="col">Next Action</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adam's Greenworks</td>
      <td>14</td>
      <td>Package Items</td>
    </tr>
    <tr>
      <td>Davie's Burgers</td>
      <td>2</td>
    <td>Send Invoice</td>
    </tr>
    <tr>
      <td>Baker's Bike Shop</td>
      <td>3</td>
      <td>Send Invoice</td>
    </tr>
    <tr>
      <td>Miss Sally's Southern</td>
      <td>4</td>
      <td>Ship</td>
    </tr>
    <tr>
      <td>Summit Resort Rentals</td>
      <td>4</td>
      <td>Ship</td>
    </tr>
    <tr>
      <td>Strike Fitness</td>
      <td>1</td>
      <td>Enter Order</td>
   </tr>
  </tbody>
  <tfoot>
   <td>Total</td>
   <td>28</td>
  </tfoot>
</table>
</body>
</html>

      Great job! In this lesson, we learned how to create a table, add data to it, and section the table into smaller parts that make it easier to read.

      Let’s review what we’ve learned so far:

      • The <table> element creates a table.
      • The <tr> element adds rows to a table.
      • To add data to a row, you can use the <td> element.
      • Table headings clarify the meaning of data. Headings are added with the <th> element.
      • Table data can span columns using the colspan attribute.
      • Table data can span rows using the rowspan attribute.
      • Tables can be split into three main sections: a head, a body, and a footer.
      • A table’s head is created with the <thead> element.
      • A table’s body is created with the <tbody> element.
      • A table’s footer is created with the <tfoot> element.
      • All the CSS properties you learned about in this course can be applied to tables and their data.

      Congratulations on completing HTML Tables!

      'Language > HTML&CSS' 카테고리의 다른 글

      [HTML_codecademy] Semantic HTML  (0) 2022.08.11
      [HTML_codecademy] Forms  (0) 2022.08.11
      [HTML_codecademy] Elements and Structure  (0) 2022.08.11
      CSS_생활코딩 : BOX 개념, GRID 개념, 반응형 웹  (0) 2022.07.25
      CSS_생활코딩 : 웹페이지에 CSS를 삽입하는 2가지 방법  (0) 2022.07.25

      관련글 관련글 더보기

      댓글

    티스토리툴바