HTML - Tables

Page 1 of 12
HTML - Tables
HTML tables represent data, such as text, images, etc. in a structured format with rows
and columns.
HTML tables offer a visual structure that aids in clarity and comprehension, making
them a fundamental element in web development.
Why HTML Tables are Used?

HTML tables are used for various reasons, primarily centered around organizing and
presenting data effectively. Some key purposes include −
Structuring Data − Tables provide a coherent structure for organizing and

displaying data, making it easier for users to interpret information.
Comparative Presentation − When there is a need to compare different sets of

data side by side like difference between two concepts, tables offer a clear and
visually accessible format.
Tabular Data Representation − Information that naturally fits into rows and
columns, such as schedules, statistics, or pricing tables, can be well-represented
using HTML tables.
Creating an HTML Table

You can create a table in HTML by using the <table> tag along with several tags that
define the structure and content inside the table. The primary tags that are used with
the <table> tag are <tr>, <td>, and <th>.
Creating tables in HTML involves several elements that define the structure and content.
The primary tags used are <table>, <tr>, <td>, and <th>.
Page 2 of 12
HTML <table> Tag: This tag is used to create the table that wrap the rows and
columns within it.
HTML <tr> Tag: Stands for "table row" and is used to create a row within the
table.
HTML <td> Tag: Represents "table data" and is used to create standard cells
within a row.
HTML <th> Tag: Represents "table header" and is used to create header cells
within a row.
Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.
HTML Table Structure - Rows and Columns
Rows: Each row in an HTML table is defined using the `<tr>` tag. It contains a
set of table cells (`<td>` or `<th>`), representing the individual elements
within that row.
Columns: The actual data or header information is contained within the table
cells. Cells in the same position in different rows form a column.
A table row is defined by the <tr> tag. To set table header, we use <th> tag. To
insert data in table cell, use the <td> tag.
A table in HTML consists of table cells inside rows and columns of the table.
Table heading is defined by the <th>...</th>. Data inside the <th> are the
headings of the column of a table.
Each table cell is defined by a <td>...</td> tag. Data inside the <td> tag are
the content of the table rows and columns.
Each table row starts with a <tr> ....</tr> tag.
We use style sheet to create border for the table.
Example
Consider a table representing a simple list of products with their respective categories
and prices. This basic table structure organizes data in a clear, tabular format, making it
easy to read and understand. Here, the border is an attribute of <table> tag and it is
used to put a border across all the cells. If you do not need a border, then you can use
border="0".
Open Compiler
Page 3 of 12
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$800</td>
</tr>
<tr>
<td>Bookshelf</td>
<td>Furniture</td>
<td>$150</td>
</tr>
<tr>
<td>Coffee Maker</td>
<td>Appliances</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Styling HTML Tables

You can also style an HTML table using CSS properties to give it a custom appearance.
Either you can create classes to apply styles on a table, or you can simply write internal
CSS properties to style the table.
Example
In the example below, we are styling the table with some CSS properties to make it
stylish:
Open Compiler
Page 4 of 12
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<p>This table is 3*3 cells including table header.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
Page 5 of 12
Table Background Color and Image

You can set the background color and background image of an HTML table by using the
CSS and attributes of the <table> tag.
Using Attributes
The following are the attributes that can be used with <table> tag to set the
background color and/or image:
bgcolor: The bgcolor attribute sets the table's background color.
<table bgcolor="#f0f0f0">
background: The background attribute sets a background image.
<table background="image.jpg">
Using CSS Properties
Using table tag's attributes is an old (outdated) style. It is recommended that you should
use CSS to style an HTML table. The background-color and background-image
properties are used to set background color and image respectively.
table {
background-color: #f0f0f0;
background-image: url('image.jpg');
}
Example to set table's background color and image using

attributes
Here we are setting background color and image for a table using the attributes of
<table> tag:
Open Compiler
<!DOCTYPE html>
<html>
Page 6 of 12
<head>
<title>HTML Table Background Color</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow"
background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Example to set table's background color and image using CSS
Here we are setting background color and image for a table using the CSS properties:
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Color</title>
<style>
table {
background-color: yellow;
background-image: url('/images/test.png');
Page 7 of 12
}
</style>
</head>
<body>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Table Width and Height

The table's width and height can be set using either attributes or CSS properties. These
values can be defined in pixels or percentages.
Using Attributes
The following attributes can set the width and height of a table:
width: It defines the width of the table.
<table width="80%">
height: It defines the height of the table.

Page 8 of 12
<table height="200">
Using CSS
The following CSS properties can set the width and height of a table:
width: It defines the width of the table.
table { width: 80%; }
height: It defines the height of the table.
table { height: 400px; }
Example to set table's width and height using attributes
Here we are setting width (80%) and height (400px) of the table using the <table> tag's
attributes:
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="80%" height="400">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
Page 9 of 12
</tr>
</table>
</body>
</html>
Example to set table's width and height using CSS
Here we are setting width (80%) and height (400px) to the table using the CSS
properties:
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
<style>
table{
width: 80%;
height: 400px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Page 10 of 12
HTML Nested Tables

Nested HTML tables refer to create tables inside a table. You can create tables inside a
table by using the <table> tab inside any <td> tag, it creates another table in the main
table's cell.
Example
In the following example, we are creating nested tables:
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Tables</title>
</head>
<body>
<table border=1>
<tr>
<td> First Column of Outer Table </td>
<td>
<table border=1>
<tr>
<td> First row of Inner Table </td>
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=1>
<tr>
<td> First row of Inner Table </td>
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
Page 11 of 12
</table>
</td>
<td> First Column of Outer Table </td>
</tr>
</table>
</body>
</html>
Table-related Tags Reference

The following are the table-related tags. You can click on the link to read about the
specific tag and click on "Try It" to practice its example:
Tag Descriprtion Example
Try
<table> It is used to create HTML table.
It
Try
<th> This tag defines the header of the table.
It
Try
<tr> This tag defines a table row.
It
Try
<td> This tag is used to store table data of each cell.
It
Try
<caption> This tag specifies the caption for the table.
It
This tag describes the collection of one or more columns in Try

<colgroup>
a table for formattig. It
Try
<col> This tag is used to offer information about columns.
It
Try
<thead> This tag is used to define table header section.
It
Page 12 of 12
Try
<tbody> This tag is used to define table body section.
It
Try
<tfoot> This tag is used to define the table footer section.
It

HTML - Tables

Uploaded by

HTML - Tables

Uploaded by

Page 1 of 12

Why HTML Tables are Used?

Structuring Data − Tables provide a coherent structure for organizing and

Comparative Presentation − When there is a need to compare different sets of

Creating an HTML Table

HTML Table Structure - Rows and Columns

Each table row starts with a <tr> ....</tr> tag.

We use style sheet to create border for the table.

Styling HTML Tables

Table Background Color and Image

bgcolor: The bgcolor attribute sets the table's background color.

background: The background attribute sets a background image.

Using CSS Properties

Example to set table's background color and image using

Example to set table's background color and image using CSS

Table Width and Height

width: It defines the width of the table.

height: It defines the height of the table.

width: It defines the width of the table.

table { width: 80%; }

height: It defines the height of the table.

table { height: 400px; }

Example to set table's width and height using attributes

Example to set table's width and height using CSS

HTML Nested Tables

In the following example, we are creating nested tables:

Table-related Tags Reference

Tag Descriprtion Example

This tag describes the collection of one or more columns in Try

You might also like