2.
0 HTML Table:Creating and using Tables,Basic Table Structure,Table
Headers and Captions
2.0.0 HTML Table
An HTML table is a way to organize data in rows and columns. We create it with
the <table> element in HTML. Tables mainly show tabular data like schedules,
product lists, or reports.
Basic HTML Table Structure
An HTML table is created using the <table> tag. Inside the table, we use:
<tr>: Table Row
<th>: Table Header
<td>: Table Data
86
Basic Example:
87
Output:
Tag Description
<table> Defines the structure for organizing data in rows and
columns on a web page.
<tr> Represents a row in an HTML table that contains individual
cells.
<th> Shows a table header cell, which usually holds titles or
headings.
<td> Represents a standard data cell that holds content or data.
<caption> Provides a title or description for the entire table.
<thead> Defines the header section of a table, often containing
column labels.
<tbody> Represents the main content area of a table, separating it
from the header or footer.
<tfoot> Specifies the footer section of a table that typically holds
summaries or totals.
<col> Defines attributes for table columns that can apply to
multiple columns at once.
<colgroup> Groups together a set of columns in a table so you can apply
formatting or properties to all of them at once.
88
2.0.1 Basic Table Structure in HTML
HTML tables are not just a collection of rows and columns; they can be
logically grouped into sections for better organization, accessibility, and
styling. The three main grouping tags are:
1) <thead>: Groups header rows.
2) <tbody>: Groups body rows.
3) <tfoot>: Groups footer rows.
Example:
Output
89
2.0.2 Table Headers and Captions
Headers and captions help organize and present data in tables.
The table heading is important because it labels the columns. The <th> (table
header) element defines these headings.
Captions give a title or explanation for the table. The <caption> element is
placed right after the opening table tag.
Syntax to Create Table's Header and Caption:
The following is the syntax to create a header and caption for an HTML table:
2.1 HTML Table: Rowspan and Colspan, Table Attributes, Responsive
Tables
2.1.0 HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.
90
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
Example:
91
Output:
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
Example:
92
Output:
2.1.1 HTML Table Attributes
HTML tables can be customized using attributes to control appearance, spacing,
and alignment. Many of these attributes are outdated in HTML5, but they still
help in understanding older code. For modern projects, CSS is the preferred
option.
Most common attributes are:
border: The HTML <table> border Attribute is used to specify the
border of a table. It sets the border around the table cells. This attribute
defines the visual presentation of the table by setting the thickness of the
borders. A higher value results in a thicker border. Alternatively, setting
the border attribute to "0" removes the borders entirely.
Syntax:
<table border="value">
The value represents the thickness of the border in pixels.
border="1": This means the table will have a border of 1 pixel.
border="0": This will remove the borders from the table, leaving it
borderless.
93
Output:
94
Cellpadding: The HTML <table> cell padding Attribute is used
to specify the space between the cell content and cell wall. The cellpadding
attribute is set in terms of pixels. By default, the padding is set to 0.
Syntax: <table cellpadding="pixels">
Note: The <table> cellpadding Attribute is not supported by HTML5.
Output:
95
Cellspacing: The cellspacing attribute in HTML is used to define the
space between cells in a table. It controls the amount of space, in pixels,
between the table cells. This spacing can make the table's content more
readable by adding extra room between cells.
Syntax: <table cellspacing="pixels">
96
Output:
Align: The HTML <table> align Attribute specify the table's alignment
but CSS properties like margin and text-align are preferred for table
alignment. To align content within table rows or cells, use
the align attribute within <tr> and <td> tag or apply CSS styles
Syntax:
<table align="left | right | center">
97
Example:
Output:
98
2.2 HTML Table: Nested Tables, Accessibility in Tables, Practical
2.2.0 Nested Tables
In HTML, tables are created using the <table> tag. To nest a table, put one table
inside another. The outer table is your main table, while the inner table is the one
you are nesting inside.
To create nested Table:
First, you create the outer table using the <table> tag.
Then, within one of the <td> tags (which are used to define individual cells
in the table), you insert another <table> tag to create the inner table.
Example:
99
Output:
100
2.2.1 HTML Table Accessibility
Tables help organize data visually, but screen readers require additional
information to interpret them correctly. Without proper markup, users with
visual impairments cannot understand the relationship between rows and columns
as easily as sighted users. This is why semantic HTML elements are crucial.
Main Accessibility Features:
1. Use Semantic Tags (<thead>, <tbody>, <tfoot>)
These tags provide structure and meaning to your table:
a) <thead>: Groups the header rows of the table.
b) <tbody>: Contains the main body rows (data rows).
c) <tfoot>: Groups the footer rows, often used for totals or
summaries.
Using these tags helps assistive technologies and search engines
understand the role of each section. It also improves styling and layout
control with CSS.
2. Add scope Attribute for Headers
The scope attribute clarifies whether a header cell applies to a row, a
column, or a group:
a) scope="col" → Column header
b) scope="row" → Row header
c) scope="colgroup" → Multiple columns
d) scope="rowgroup" → Multiple rows
This ensures that screen readers can associate the correct headers with
data cells, improving accessibility for visually impaired users.
3. Use <caption> for Description
The <caption> tag provides a brief description of the table’s purpose and
content.
Placed immediately after the <table> tag.
Helps users (including those using screen readers) understand the context
without reading all the data.
101
Example:
<table>
<caption>Student Attendance Report</caption>
</table>
4. Add aria-describedby for Screen Readers
The aria-describedby attribute can link the table to additional descriptive
text (like a summary or explanation) outside the table.
Example:
<div id="table-info">This table shows student attendance for the month
of July.</div>
<table aria-describedby="table-info">
...
</table>
5. Avoid Using Tables for Layout Purposes
Tables should only be used for displaying tabular data—not for page
layout.
Using tables for layout creates confusion for screen readers and breaks
semantic structure.
For layouts, use CSS grid or flexbox instead.
2.2.2 Practical Questions
Creating and Using Tables
1. Create a simple HTML table to display the following student data:
Name, Roll No, Subject, Marks for at least 5 students.
2. Add a caption to the table describing the data.
3. Apply basic table structure with <thead>, <tbody>, and <tfoot> tags.
102
Output:
103
Rowspan and Colspan
Create a timetable for your class using HTML tables:
1. Use rowspan for subjects that cover multiple time slots.
2. Use colspan for breaks or combined sessions.
Output:
104
Nested Tables
Create a table where one of the cells contains another table (nested table)
showing additional details.
Output:
105