User:Elina lesson plan 4

From ICTED-WIKI
Jump to navigation Jump to search

Subject: Computer Science

Class: 7

Unit: 7

Topic: HTML table

Period: 2nd

Time: 10min

Specific Objectives:[edit | edit source]

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

  • Understand the concepts of HTML table,
  • Create a table and assign data in tabular form.

Teaching Materials:[edit | edit source]

  • Whiteboard
  • marker
  • Computer with text editor (such as Sublime text,VS code and notepad++)
  • Browser for testing (chrome & ms edge)

Introduction 2min:[edit | edit source]

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

HTML table tag 2 min:[edit | edit source]

Tag Descriptions
<table> Define a table
<th> Define a header cell in a 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 columns in a table for formatting
<col> Specifies column 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 5min:[edit | edit source]

  1. Have student open their prefered text editor and create a new HTML document,
  2. Demonstarte how to create a simple table structure using <table> , <tr>, <td> , and <th> tages,
  3. Create a tabe that include header and a few row of data,

for example:

Conclusions 1 min:[edit | edit source]

  1. Summarize a ey points about HTML tables discussed during the lesson,
  2. Encourage students to practice table on their own and explore more advanced table functionalities,
  3. provide additional resource or excercises for further practices(https://www.w3schools.com/html/html_tables.asp)

Assessment:[edit | edit source]

  1. How to create table in HTML with exampes?
  2. How to create table in HTML with border?
  3. create a table using your own personal data(Name,DOB,address and email id).