Complete Web Designing Course for Beginners

Lesson 1.8 – Tables in HTML

🗂️ Displaying Data in Rows and Columns Professionally

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand HTML Tables

✅ Create rows and columns

✅ Add headings to tables

✅ Organize structured data

✅ Create student marksheets

✅ Create timetables

✅ Create fee structure tables

✅ Understand table attributes

📖 Introduction

Imagine a college wants to display:

Student Marks
Timetables
Fee Structures
Faculty Information

Can we write everything using paragraphs?

Example:

Rahul 85 90 88

Amit 78 82 80

Riya 92 95 90

Looks confusing.

Now look at this:

Name	Math	Science	English
Rahul	85	90	88
Amit	78	82	80
Riya	92	95	90

Much easier to read.

This is where:

📊 HTML Tables

become useful.

🤔 What is a Table?

A table is used to display information in:

Rows

and

Columns

Real Life Examples

Tables are used for:

✅ Student Marksheets

✅ College Timetables

✅ Fee Structures

✅ Employee Records

✅ Product Lists

✅ Attendance Reports

🏗️ HTML Table Structure

HTML tables use several tags.

Main Table Tag

<table>

Creates the table.

Table Row Tag

<tr>

Creates a row.

Table Heading Tag

<th>

Creates table headings.

Table Data Tag

<td>

Creates table data.

🎯 Basic Structure

<table>

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>Rahul</td>

<td>20</td>

</tr>

</table>

Understanding the Structure

`<table>`

Creates the table.

`<tr>`

Creates rows.

`<th>`

Creates headings.

`<td>`

Creates data cells.

📝 Example 1 – Student Information Table

<table border="1">

<tr>

<th>Name</th>

<th>Branch</th>

<th>Semester</th>

</tr>

<tr>

<td>Rahul</td>

<td>CSE</td>

<td>3rd</td>

</tr>

<tr>

<td>Amit</td>

<td>Mechanical</td>

<td>3rd</td>

</tr>

</table>

Output

Name	Branch	Semester
Rahul	CSE	3rd
Amit	Mechanical	3rd

🎯 Border Attribute

Without border:

Table may look invisible.

Example:

<table border="1">

Meaning

border = 1 pixel

Creates visible table borders.

🏫 Example 2 – Student Marksheet

<table border="1">

<tr>

<th>Name</th>

<th>Math</th>

<th>Science</th>

<th>English</th>

</tr>

<tr>

<td>Rahul</td>

<td>85</td>

<td>90</td>

<td>88</td>

</tr>

<tr>

<td>Amit</td>

<td>78</td>

<td>82</td>

<td>80</td>

</tr>

</table>

Output

Name	Math	Science	English
Rahul	85	90	88
Amit	78	82	80

🏫 Example 3 – College Timetable

<table border="1">

<tr>

<th>Day</th>

<th>Subject</th>

</tr>

<tr>

<td>Monday</td>

<td>HTML</td>

</tr>

<tr>

<td>Tuesday</td>

<td>CSS</td>

</tr>

<tr>

<td>Wednesday</td>

<td>JavaScript</td>

</tr>

</table>

Output

Day	Subject
Monday	HTML
Tuesday	CSS
Wednesday	JavaScript

🎯 Table Headings

Headings are created using:

<th>

Example

<th>Name</th>

Difference Between TH and TD

TH	TD
Heading	Data
Bold Text	Normal Text
Usually Top Row	Data Rows

Example

<tr>

<th>Name</th>

<th>Age</th>

</tr>

Heading Row

<tr>

<td>Rahul</td>

<td>20</td>

</tr>

Data Row

🧱 Multiple Rows

Tables can contain many rows.

Example:

<tr>

<td>Rahul</td>

<td>20</td>

</tr>

<tr>

<td>Amit</td>

<td>21</td>

</tr>

<tr>

<td>Riya</td>

<td>19</td>

</tr>

📏 Table Width

We can control table size.

Example:

<table border="1" width="500">

Meaning

Table width becomes:

500 pixels

🎯 Cell Padding

Cell padding creates space inside cells.

Example:

<table border="1" cellpadding="10">

Benefit

Makes tables easier to read.

🎯 Cell Spacing

Creates space between cells.

Example:

<table border="1" cellspacing="5">

Benefit

Improves appearance.

💻 Complete Example

<!DOCTYPE html>

<html>

<head>

<title>Student Records</title>

</head>

<body>

<h1>Student Information</h1>

<table border="1" cellpadding="10">

<tr>

<th>Name</th>

<th>Branch</th>

<th>Semester</th>

</tr>

<tr>

<td>Rahul</td>

<td>CSE</td>

<td>3rd</td>

</tr>

<tr>

<td>Amit</td>

<td>Mechanical</td>

<td>3rd</td>

</tr>

<tr>

<td>Riya</td>

<td>Civil</td>

<td>3rd</td>

</tr>

</table>

</body>

</html>

🎯 Expected Output

Name	Branch	Semester
Rahul	CSE	3rd
Amit	Mechanical	3rd
Riya	Civil	3rd

🔗 Rowspan Attribute

Used to merge rows.

Example:

<td rowspan="2">Rahul</td>

Means:

This cell occupies 2 rows.

Example

<table border="1">

<tr>

<td rowspan="2">Rahul</td>

<td>Math</td>

</tr>

<tr>

<td>Science</td>

</tr>

</table>

🔗 Colspan Attribute

Used to merge columns.

Example:

<th colspan="3">
Student Marksheet
</th>

Example

<table border="1">

<tr>

<th colspan="3">
Student Details
</th>

</tr>

<tr>

<th>Name</th>

<th>Branch</th>

<th>Semester</th>

</tr>

</table>

Output

A heading spanning three columns.

🏆 Real World Project – Fee Structure Table

<table border="1">

<tr>

<th>Course</th>

<th>Duration</th>

<th>Fee</th>

</tr>

<tr>

<td>DCA</td>

<td>6 Months</td>

<td>₹5000</td>

</tr>

<tr>

<td>Web Designing</td>

<td>3 Months</td>

<td>₹4000</td>

</tr>

<tr>

<td>Python</td>

<td>4 Months</td>

<td>₹6000</td>

</tr>

</table>

🌟 Real World Uses

Tables are used in:

Student Marksheets

College Timetables

Employee Records

Product Listings

Attendance Reports

Billing Systems

Course Details

Fee Structures

⚠️ Common Beginner Mistakes

Mistake 1

Using TD Instead of TH

Wrong:

<td>Name</td>

for heading.

Correct:

<th>Name</th>

Mistake 2

Missing TR Tags

Wrong:

<table>

<td>Rahul</td>

</table>

Correct:

<table>

<tr>

<td>Rahul</td>

</tr>

</table>

Mistake 3

Forgetting Closing Tags

Wrong:

<td>Rahul

Correct:

<td>Rahul</td>

🌟 Best Practices

✅ Use headings with <th>

✅ Use borders during learning

✅ Keep tables organized

✅ Use meaningful column names

✅ Use rowspan and colspan when required

🏆 Mini Project – Student Marksheet

<!DOCTYPE html>

<html>

<head>

<title>Marksheet</title>

</head>

<body>

<h1>Student Marksheet</h1>

<table border="1">

<tr>

<th>Subject</th>

<th>Marks</th>

</tr>

<tr>

<td>Math</td>

<td>85</td>

</tr>

<tr>

<td>Science</td>

<td>90</td>

</tr>

<tr>

<td>English</td>

<td>88</td>

</tr>

</table>

</body>

</html>

📝 Practical Activity

Create:

Student Marksheet

Columns:

Subject
Marks

College Timetable

Columns:

Day
Subject

Fee Structure Table

Columns:

Course
Duration
Fee

Run all pages in Chrome.

📋 Assignment

Assignment 1.8

Answer the following:

What is a table?
Which tag creates a table?
Which tag creates a row?
Which tag creates a heading?
Which tag creates table data?
What is colspan?
What is rowspan?

🧠 Quiz

Q1. Which tag creates a table?

A. <tab>

B. <table>

C. <tr>

D. <td>

✅ Answer: B

Q2. Which tag creates a row?

A. <row>

B. <td>

C. <tr>

D. <table>

✅ Answer: C

Q3. Which tag creates table headings?

A. <td>

B. <th>

C. <table>

D. <head>

✅ Answer: B

Q4. Which tag creates table data?

A. <data>

B. <th>

C. <tr>

D. <td>

✅ Answer: D

Q5. Which attribute merges columns?

A. rowspan

B. colspan

C. border

D. width

✅ Answer: B

📌 Lesson Summary

✅ Tables organize information into rows and columns.

✅ <table> creates a table.

✅ <tr> creates rows.

✅ <th> creates headings.

✅ <td> creates data cells.

✅ border creates visible borders.

✅ colspan merges columns.

✅ rowspan merges rows.

✅ Tables are widely used for marksheets, timetables, fee structures, and data management.