UNIT- 4
HTML Tables
An HTML Table is an arrangement of data in rows and columns in tabular
format. Tables are useful for various tasks, such as presenting text
information and numerical data. A table is a useful tool for quickly and easily
finding connections between different types of data. Tables are also used to
create databases.
HTML Table Code Example
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
Tags used in HTML Tables
HTML Tags Descriptions
Defines the structure for organizing data
<table>
in rows and columns within a web page.
Represents a row within an HTML
<tr>
table, containing individual cells.
Shows a table header cell that typically
<th>
holds titles or headings.
Represents a standard data cell,
<td>
holding content or data.
Provides a title or description for the
<caption>
entire table.
Defines the header section of a table,
<thead>
often containing column labels.
Represents the main content area of a
<tbody> table, separating it from the header or
footer.
Specifies the footer section of a table,
<tfoot>
typically holding summaries or totals.
Defines attributes for
<col> table columns that can be applied to
multiple columns at once.
Groups together a set of columns in a
<colgroup> table to which you can apply formatting
or properties collectively.
Defining Tables in HTML
An HTML table is defined with the “table” tag. Each table row is defined
with the “tr” tag. A table header is defined with the “th” tag. By default, table
headings are bold and centered. A table data/cell is defined with the “td” tag.
Table Cells
Table Cell are the building blocks for defining the Table. It is denoted with
<td> as a start tag & </td> as a end tag.
Syntax
</td> Content...</td>
Table Rows
The rows can be formed with the help of combination of Table Cells. It is
denoted by <tr> and </tr> tag as a start & end tags.
Syntax
</tr> Content...</tr>
Table Headers
The Headers are generally use to provide the Heading. The Table Headers
can also be used to add the heading to the Table. This contains the <th> &
</th> tags.
Syntax
</th> Content...</th>
Ex: Creating a simple table in HTML using a table tag.
<html>
<body>
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
</body>
</html>
Output:
HTML <caption> Tag
The <caption> tag is used to specify the caption of a table. Only one caption
can be specified for one table. It is by default aligned to the center and Specifically
placed immediately after the <table> tag and before any <tr> or <th> tag elements.
.
Syntax:
<caption align = "value" ></caption>
Attributes:
Attribute Value Description
This attribute is used to specify the
align alignment of text content but is deprecated
from HTML5.
Example 1: In this example we will add a caption to the table i.e. by default aligned
to the center.
<html >
<head>
<title>HTML5 caption Tag</title>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>HTML <Caption Tag></h2>
<table>
<!-- Adding caption to the table -->
<caption>Students</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
HTML <td> align Attribute
The HTML <td> align attribute is used to set the horizontal alignment of text
content. It uses the align attribute in HTML <td> to horizontally align text content
within a table cell and it sets “left,” “center,” or “right” to control horizontal
alignment.
.
Syntax:
<td align ="left | right | center | justify | char ">
Attribute Values:
The <td> align attributes have the following attributes which are as:
Attributes Description
left It sets the text left-aligned of a container.
right It sets the text right-align of the container.
center It sets the text center-align.
It stretches the text of paragraph to set the
justify
width of all lines equal.
char It sets the text-align to a specific character.
Example:
In this example, we will see the implementation of the <td> align tag with an
example.
<html>
<head>
<title>
HTML td align Attribute
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML td align Attribute</h2>
<table width="500" border="1">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td align="center">BITTU</td>
<td align="left">22</td>
<td align="right">CSE</td>
</tr>
<tr>
<td align="center">RAKESH</td>
<td align="left">25</td>
<td align="right">EC</td>
</tr>
</table>
</body>
</html>
Output:
HTML Table Colspan and Rowspan
In HTML, the rowspan attribute specifies how many rows a table cell should
span, determining its vertical position. On the other hand,
the colspan attribute specifies the number of columns a cell should span, determining
its horizontal position. Defining together, they provide a powerful mechanism for
cells to cover multiple rows and columns, offering flexibility in structuring complex
tables.
HTML Table with Colspan
HTML Table with Colspan allows you to merge or combine adjacent table cells
horizontally, creating a single, wider cell that spans across multiple columns.
Note: The colspan is defined as the <th> element.
Example: The element illustrates the HTML Table with colspan.
<html >
<title>HTML Table with Colspan</title>
<title>HTML Table</title>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with Colspan
</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>Gupta</td>
<td>1</td>
</tr>
<tr>
<td>Sri</td>
<td>Krishn</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>Goyal</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
HTML Table with Rowspan
The HTML attribute rowspan determines how many rows a specific cell in a
table should cover. When a cell spans multiple rows, it occupies the space of those
rows within the table. Applied within a <td> or <th> element.
Example: The element illustrates the HTML Table with Rowspan.
<html>
<title>HTML rowspan</title>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML Table Rowspan</h2>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th rowspan="3">MVM School</th>
</tr>
<tr>
<td>Radha</td>
<td>10</td>
</tr>
<tr>
<td>Ankur</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Output:
Adding Cell Padding in an HTML Table
Cell padding specifies the space between the cell content and its
borders. If we do not specify a padding, the table cells will be displayed
without padding.
Syntax
th, td {
padding: 20px;
}
Example: Addition of Table cell padding in HTML.
<html>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
