User:Elina Real Teaching Lesson Plan 15

Subject:Computer Science Class:8"A"
Unit:17 Topic:Table in HTML
Period:7th Time:45min
School:Adarsha Secondary School no of student:64

Specific Objective:

At the end of this class, student will be able to:

  • Understand the concept of the HTML table,
  • create a table and assign data in tabular form.

Teaching Material:

  • Whiteboard, marker,
  • computer with text editor(noteppad,vs code).
  • Browser for testing(chrome and ms edge).

Introduction:

  • Start by asking a questions about HTML tags,
  • Encourage them to share their thought,
  • HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
  • We can create a table to display data in tabular form, using element, using <table> element, with the help of <tr> , <td>, and <th> elements.
  • In each table , table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
  • HTML table used to manage the layout of the page e.g header section, navigation bar, body content, footer section etc
  • But it is recommended to use div tag over table to manage the layout of the page .

HTML table tag:

Tag Description
<table> Define a table
<th> Define a header cell in table
<tr> Define a row in a table
<td> Define a cell in a table
<caption> Define a table caption
<colgroup> Specifies a group of one or more column in a table for formating
<col> Specifies a colum properties for each column within a <colgroup> element.
<thead> Group the header content in a table.
<tbody> Group the body content in a table.
<tfoot> Group the footer content in a table.

Class Room Activity:

  • Have student open their prefered text editor and create a new HTML document.
  • Demonstarte how to create a simple table structure using <table>, <tr>, <td> and <th> tags.
  • Create a table that include header and a few row of data.
  • Table:

Conclusion:

  • Summarize a ey points about HTML tables discussed during the lesson,
  • Encourage students to practice table on their own and explore more advanced table functionalities,

Assessment:

  1. How create table in web page ?write a step.
  2. How to create table in HTML document with border.
  3. Create a table using your personal data( Name,DOB,Address,email id).