Scribd
Upload
8 views1 page

HTML Tables: Structure and Styling Guide

The document provides an overview of HTML tables, explaining their structure using rows and columns, and the relevant tags such as <table>, <tr>, <td>, and <th>. It includes examples of basic tables, tables with captions and styling, and demonstrates the use of rowspan and colspan for merging cells. The homework assignment is to create a timetable using HTML tables incorporating these concepts.

Uploaded by

bhattrohit2636
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views1 page

HTML Tables: Structure and Styling Guide

The document provides an overview of HTML tables, explaining their structure using rows and columns, and the relevant tags such as <table>, <tr>, <td>, and <th>. It includes examples of basic tables, tables with captions and styling, and demonstrates the use of rowspan and colspan for merging cells. The homework assignment is to create a timetable using HTML tables incorporating these concepts.

Uploaded by

bhattrohit2636
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Day 7 – Full Stack Web Development

What is a Table?
A table in HTML is used to represent data in rows and columns. It is created using the tag. - : Table
Row - : Table Data (cell) - : Table Header (bold + centered by default) Tables are useful for
structured data such as marksheets, schedules, and records.

Example 1 – Basic Table


NameAge Rohit22 Aman23 This produces a simple table with two rows and two columns.

Example 2 – Table with Caption & Styling


Student Details NameClassMarks Anita10th85 Vikas12th90 Here, adds a heading above the table.

Example 3 – Rowspan and Colspan


Rowspan merges rows, Colspan merges columns. NameMarks MathScience Ravi8070

Example 4 – Styled Table with CSS


We can style tables using CSS: table { border-collapse: collapse; width: 60%; text-align: center; } th,
td { border: 1px solid black; padding: 8px; } th { background-color: lightgray; } This produces a neat
table with spacing and header background color.

Homework
Create your own timetable using HTML tables. Include days as columns, periods as rows, and use
rowspan and colspan for merging break/lunch cells. Example structure: Day1st Period2nd
PeriodBreak3rd Period MondayMathEnglishLunchScience

Revision
✔ Tables = rows + columns with tag. ✔ = row, = data, = header. ✔ Captions give title. ✔ Rowspan
& Colspan merge cells. ✔ CSS styling makes tables professional. ✔ Homework: Create a full Time
Table using these concepts.

You might also like