Entrance Announcement
MICTE 2080
2080 Magh 07
User:Elina lesson plan 4
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]
- 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 <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 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]
- 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> tages,
- Create a tabe that include header and a few row of data,
Conclusions 1 min:[edit | edit source]
- 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,
- provide additional resource or excercises for further practices(https://www.w3schools.com/html/html_tables.asp)
Assessment:[edit | edit source]
- How to create table in HTML with exampes?
- How to create table in HTML with border?
- create a table using your own personal data(Name,DOB,address and email id).