Scribd
Upload
9 views

HTML Table

this is book for HTML table

Uploaded by

iagrimagrawal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HTML Table

this is book for HTML table

Uploaded by

iagrimagrawal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Lesson:

HTML Table

</>
Topics Covered
Introduction to table tag and its Attribute
Simple Tabl
Expanding Cell
Adding Captio
Giving Structure to Table (thead, tfoot, tbody)

Introduction to <table> Tag


A table is a structural set of data made up of rows and columns. A table allows you to quickly and easily look up
values that indicate some kind of connection between different types of data.

For example : Storing tabular data, like a person and their age, or a day of the week, or the timetable for a local
swimming pool.

The HTML table tag has a lot of attributes like bgcolor, bordercolor, cellborder, frame, rules, width, height,
align, valign etc. but majority of them are deprecated in favour of using CSS to style the table.

Simple Table
Lets understand with this one example,

Name Age City

John 25 New York

Jane 30 Los Angeles

Michael 22 Chicago
Suppose, we want to display the above table in HTML. To construct tables in HTML, we use <table>, <tr>, <th>,
and <td> tags.

table.html

Full Stack Web Development


Browser Output:

In above example
The <table> element is used to create a table in HTML
The <tr> element represents a row in the table
The <th> element represents a header cell in the table, and is typically used in the first row to label the
columns
The <td> element represents a data cell in the table, and is used to display the actual data in the table.

Expanding Cells
We can expand any table cells across multiple columns and rows using attributes rowspan and colspan, 

Lets understand it through example,

demo.html

Full Stack Web Development


Full Stack Web Development
Browser Output:

In the above example, the last row 1st cell is expanded across two columns, using colspan=”2” attribute.

Similarly we can expand any cell across multiple rows also, using rowspan attribute.

Adding a caption
To add a caption to your table, simply enclose the caption text within a <caption> element and place it within
the <table> element.

Let's add a caption to out product table,

Full Stack Web Development


Browser Output:-

Giving Structure to Table


As your tables become more complicated in structure, it can be beneficial to provide them with additional
structural definition. 

One effective approach is to utilise HTML elements such as <thead>, <tfoot>, and <tbody>, which enable you to
designate a header, footer, and body section for your table, respectively.

Full Stack Web Development


Let’s add structure to our products table,

demo.html

Full Stack Web Development


Browser Output:-

In above example
<thead>: This element is used to define the header section of a table, which typically contains one or more
rows that serve as labels for the columns of the table
<tbody>: This element is used to group the body content of a table, which includes the actual data rows
<tfoot>: This element is used to define the footer section of a table, which typically contains summary or
aggregate information about the data in the table. 

But Wait! There is no difference in browser output after applying structural tags in the products table. 

Yes, these elements do not make any semantic or visual difference, they are just used to style different parts of
the table effectively.

Full Stack Web Development

You might also like