Lab 3: Creating Tables in HTML

Introduction

Welcome to the hands-on lab for creating tables in HTML! Tables are a great way to organize and display data on a webpage. In this lab, we will learn how to create and style tables using HTML. We will be using the JDoodle HTML editor for this exercise.

Objectives

By the end of this lab, you will be able to:

  1. Understand the basic structure of an HTML table.
  2. Create a simple table with rows and columns.
  3. Use various HTML tags to enhance the table.

Lab Steps

Step 1: Access the JDoodle HTML Editor

  1. Open your web browser and go to JDoodle HTML Editor.
  2. You will see a blank editor where you can write your HTML code.

Step 2: Basic Table Structure

  1. In the editor, type the following code to create the basic structure of an HTML document:

    <!DOCTYPE html>
<html>
<head>
    <title>HTML Tables</title>
</head>
<body>
    <!-- Table content will go here -->
</body>
</html>

  2. This code sets up a basic HTML document with a <head> and <body> section.

Step 3: Creating a Simple Table

  1. Inside the <body> tags, add the following code to create a simple table:

    <table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>Los Angeles</td>
    </tr>
</table>

  2. This code creates a table with a border and three columns:

    • <table>: The container for the table.
    • <tr>: Defines a table row.
    • <th>: Defines a header cell in a table.
    • <td>: Defines a standard data cell in a table.

Step 4: Adding More Rows

  1. Add more rows to your table by inserting additional <tr> tags with <td> elements:

    <tr>
    <td>Emily Davis</td>
    <td>22</td>
    <td>Chicago</td>
</tr>
<tr>
    <td>Michael Brown</td>
    <td>28</td>
    <td>Houston</td>
</tr>

  2. Add this code inside the <table> tags after the existing rows.

Step 5: Enhancing the Table

  1. Add a caption to your table to provide a title:

    <table border="1">
    <caption>Student Information</caption>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <!-- Existing rows go here -->
</table>

  2. Add some inline CSS to improve the table's appearance:

    <style>
    table {
        width: 50%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    th, td {
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

  3. Insert this <style> block inside the <style> tags in the Jdoodle Editor.

Step 6: Running Your Code

  1. Click the "Execute" button in the JDoodle editor.
  2. You should see a preview of your table with the added rows and styling.

Summary

Congratulations! You have successfully created a table in HTML and enhanced it with additional rows and basic styling. You now know how to set up a table structure, add data, and apply simple styles to make it more visually appealing. Keep experimenting with different table properties and styles to further improve your skills. Happy coding!