Day 5 – HTML Tables & Forms

πŸ“ Day 5 – HTML Tables & Forms

πŸ“₯ Download Notes + Example Code (PDF):
πŸ‘‰ Click here to download Day 5 Notes


πŸ“š Introduction

In this lesson, you’ll learn how to create tables and forms using HTML. These elements are essential for displaying structured data (like results) and collecting user input (like in shopping or login forms). Mastering them will help you build real-world, functional web pages.


πŸ“Š HTML Tables

Tables in HTML help organize data in rows and columns. They are created using the <table> tag, and within that, you define rows and cells.

πŸ”Ή Table Structure:

<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Phani</td>
<td>95</td>
</tr>
</table>

πŸ”Ή Explanation of Tags:

  • <table>: Starts the table

  • <tr>: Creates a new row

  • <th>: Creates a header cell (bold & centered)

  • <td>: Adds data to the row

πŸ“ Use Case:

Used for displaying:

  • Exam results

  • Timetables

  • Product lists


πŸ“ HTML Forms

Forms are used to collect user inputs. Common use cases include contact forms, login forms, and checkout forms in e-commerce websites.

πŸ”Ή Basic Form Example:

<form>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<button type="submit">Submit</button>
</form>

πŸ”Ή Explanation of Tags:

  • <form>: Defines the form area

  • <label>: Describes the input field

  • <input>: Accepts user data

  • <button>: Submits the form

πŸ“ Use Case:

Used in:

  • Sign-up forms

  • Feedback forms

  • Booking or order pages


βœ… Summary

In this lesson, you learned how to:

  • Use <table>, <tr>, <td>, and <th> to structure tabular data

  • Use <form>, <input>, <label>, and <button> to create interactive forms

These tags form the backbone of data presentation and user interaction in HTML.

Stay tuned for the next lesson where we’ll start learning CSS to style our HTML content!

Leave a Reply

Your email address will not be published. Required fields are marked *