HTML part3

Introduction to HTML Part3

Tables

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.

Examples:

~~~ <!DOCTYPE html>

Ship To It - Company Packing List

Search the table

Company Name	Number of Items to Ship	Next Action
Adam's Greenworks	14	Package Items
Davie's Burgers	2	Send Invoice
Baker's Bike Shop	3	Send Invoice
Miss Sally's Southern	4	Ship
Summit Resort Rentals	4	Ship
Strike Fitness	1	Enter Order
Total	28

~~~

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Aguillar Family Wine Festival</title>
  <link rel="stylesheet" type="text/css" href="reset.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<body>
  <header>
    <h1>Annual Aguillar Family Wine Festival</h1>
  </header>
  
  <div class="container">
    <table>
      <thead>
        <tr>
          <th colspan="2"><h1>Wine Festival Schedule</h1></th>
        </tr>
        <tr>
          <th><h2>Time</h2></th>
          <th><h2>Event</h2></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="lest"><h3>12:00 PM</h3></td>
          <td><h3>Welcome Reception</h3></td>
        </tr>
        <tr>
          <td class="lest"><h3>01:00 PM</h3></td>
          <td><h3>Storytelling & Tasting</h3></td>
        </tr>
        <tr>
          <td class="lest"><h3>02:00 PM</h3></td>
          <td><h3>Wine Luncheon</h3></td>
        </tr>
        <tr>
          <td class="lest"><h3>03:00 PM</h3></td>
          <td><h3>Aguillar Family Wines</h3></td>
        </tr>
        <tr>
          <td class="lest"><h3>04:00 PM</h3></td>
          <td><h3>Wine & Cheese Tasting</h3></td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <footer>
    <h3>Contact</h3>
    <h3>Location</h3>
    <h3>Privacy Policy</h3>
  </footer>
</body>

</html>

Introduction to HTML Part3

Tables

Examples: