HTML|Css|Javascript @ 11:00 AM (IST) by Mr.Ram Kumar Day-8

Summary

Review of the Previous Lesson

The class briefly reviewed HTML lists:

• The three list types are ordered lists, unordered lists, and description lists.
• Ordered lists use the type, start, and reversed attributes. The start value must be numeric.
• Unordered-list marker types include disc, circle, and square.

What Tables Are For

A table organizes information into rows and columns. The space where a row and column meet is a cell. The instructor described the <table> element as a paired, block-level tag.

The main table elements introduced were:

• <table> — creates the table.
• <tr> — creates a table row.
• <td> — creates a regular data cell.
• <th> — creates a header cell, which browsers generally display with bold, centered text by default.
• <caption> — provides a table title.

Rows are built with <tr>, with one or more <td> or <th> cells inside each row.

Building and Formatting a Table

The instructor demonstrated a student report-card table with a caption, column headings, student names and scores, and a total of 276. The example illustrated how to plan the table’s rows and cells before writing the markup.

The following table attributes were demonstrated:

• border — displays a border and controls its thickness.
• cellspacing — adds space between cells.
• cellpadding — adds space between a cell’s content and its edges.
• height and width — set table dimensions. A width of 100% makes the table fill the page width.

The instructor noted that these presentational HTML attributes are outdated and should be replaced with CSS once CSS is being used. The obsolete <center> tag was also demonstrated as a way to center a table, with the same warning that modern pages should use CSS instead.

Merging Cells

Two attributes can be applied to <td> or <th>:

• colspan merges cells across multiple columns.
• rowspan merges cells across multiple rows.

The instructor showed how to set the span on the starting cell and remove the now-redundant cells from the markup.

Two Table Structures

The lesson compared a basic table structure with one divided into semantic sections:

• Basic structure: Rows and cells are placed directly inside <table>.
• Sectioned structure: Use <thead> for the header, <tbody> for the main data, and <tfoot> for the footer.

The instructor recommended the sectioned approach because it clearly separates the table’s header, body, and footer. This makes the markup easier to understand and keeps changes within one section distinct from the others. Multiple rows can be used within these sections.

Practice and Project Work

Students were asked to create a school or college timetable using table markup. The instructor also assigned two further table exercises through Google Classroom.

A larger HTML project was introduced:

• Build a realistic website, either based on the instructor’s example or on the student’s own idea.
• Use HTML concepts already covered, such as tables, images, paragraphs, and div elements.
• The instructor suggested tables as one approach for arranging elements side by side and mentioned   as another way to insert spacing. These approaches were demonstrated in the lesson; modern page layouts are generally handled with CSS.
• The example site included home, login, and registration pages. Linking or redirecting between pages would be taught in a later lesson.
• The instructor said images and icons would be provided. A <marquee> tag was mentioned for scrolling content.
• The project was to be submitted the following Saturday. The instructor also said HTML instruction would be completed by the following Wednesday.

Students without laptops were advised to write their code in a notebook and seek help through the class administrators or lab support.

Speakers and Sources Featured

• Mr. Ram Kumar (instructor): Led the lesson, demonstrated table markup and attributes, and assigned practice and project work.
• Students: Asked and answered questions during the class. Several names are audible in the subtitles, including Sana, Abby, Lakshmi/Laxmikant, Shivani, and Shivam. Some names or spellings may be unreliable because the subtitles are auto-generated.