Tables

Exercise

  1. In the "index.html" file, write the following code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Web Page</title>
</head>
<body>

</body>
</html>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. Add the following between the opening and closing tags of the body:
<h1>Pizza</h1>
<h3>Table of Pizza Prices</h3>
<table>
  <tr>
    <th>Toppings</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Cheese</td>
    <td>10.00</td>
  </tr>
  <tr>
    <td>Mushrooms</td>
    <td>11.00</td>
  </tr>
  <tr>
    <td>Pepperoni</td>
    <td>12.00</td>
  </tr>
</table>
  1. Save.
  2. In the browser, you should see the following:

    3. Exercise 9 Result

Code Walkthrough and Explanation


<table></table>

The <table> tag in HTML is used to create a table. A table is a data structure that organizes information into rows and columns. Tables are commonly used to display data in a structured manner, such as for displaying information about products in an e-commerce website or for displaying results from a database query.


<tr></tr>

The <tr> tag represents a table row.


<th></th>

The <th> tag represents a table header cell, which is typically used to provide a label for the columns in a table.


<td></td>

The <td> tag represents a table cell.


Experiment with the Code


Video and Code


Questions? Subscribe and ask in the video comments:



GitHub and Other References