Previous
 The World Wide Web 

Going Further With HTML

Next 
No site found for btvca-curriculum.herokuapp.com; using Bootcamp content.

Tables

  • Tables are comprised 4 elements: <table>, <tr>, <th>, and <td>
  • Tables are a way of structuring data into rows and columns.

Example Table structure:

<h1>Grocery List</h1>
<table>
  <tr>
    <th>Fruit</th>
    <th>Grains</th>
    <th>Dairy</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>White Rice</td>
    <td>Milk</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>Oatmeal</td>
    <td>Yogurt</td>
  </tr>
</table>

The Result

Grocery List

Fruit Grains Dairy
Apples White Rice Milk
Bananas Oatmeal Yogurt

Lists

  • Two main types of HTML lists: ordered and unordered.
  • <ul> describes a unordered list
    • this list
    • is unordered
  • <ol> describes an ordered list.
    1. this list
    2. is ordered
<ul>
  <li>Pizza</li>
  <li>Pasta</li>
  <li>Bread</li>
</ul>

The Result

  • Pizza
  • Pasta
  • Bread

Commenting with HTML

  • Commenting is important in any form of coding.
  • Comments help both you and others to better understand the intent of the code.
  • Especially helpful when reviewing large amounts of code.

Comments in HTML are not read by browsers. They use the following syntax:

<!-- This is a comment! -->

  • Note that no closing tag is necessary. Comments can also be used to temporarily disable a block of code. For example:
<!-- I don't want this to be shown because it is silly
<body>
    <div>
        <p>I do not want this content to be shown</p>
        <img src="/images/dog-pic.jpg" alt="this is a doggo" title="Doggo">
    </div>
</body>
-->
  • This code is ignored, as it is within a comment tag.