HTML - Tables
Anzeige
Tummy Tuck Surgery in Turkey: Expert
Care at Low Prices
HTML Tables allow us to present data in a organized way by providing row and column facility. Also offer a
visual structure that aids in clarity and comprehension, making them a fundamental element in web
development.
Plan Your Next Mexico Vacation - The
Adventure Awaits!
Mexico Vacation | Search Ads
Sponsored by: Mexico Vacation LEARN MORE
Why Tables are Used in HTML?
Tables are included in HTML 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.
How to create a Table in HTML?
Creating tables in HTML involves several elements that define the structure and content. The primary tags
used are <table>, <tr>, <td>, and <th>.
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.
Anzeige
Tummy Tuck Surgery in Turkey: Expert
Care at Low Prices
All about HTML Tables
Geeting started with HTML tables - from "how we can define a table" to "Creating Nested Tables". Tables
are very useful for brief textual content, numeric and non-numeric data. Most useful application of a table
is database.
Define an HTML Table Table Width and Height
Styling HTML Table Nested HTML Table
Table Background Color & Image
Try to click the icon run button to run the following HTML code to see the output.
De ne an HTML Table
An HTML table is defined using <table> tag, to create row <tr> tag, <th> & <td> are used to create table
header and table data cell.
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
<!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>
Product Category Price
Laptop Electronics $800
Bookshelf Furniture $150
Coffee Maker Appliances $50
Plan Your Next Mexico Vacation - The Adventure
Awaits!
Mexico Vacation | Search Ads
Sponsored by: Mexico Vacation LEARN MORE
Styling HTML Table
To add apply css we will use the internal css approach and a few basic CSS properties to decorate the
HTML table.
Example:
Here's an example illustrating the basic HTML table which will be designed with CSS to make it look good.
Open Compiler
<!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>
HTML Table
This table is 3*3 cells including table header.
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6
Plan Your Next Mexico Vacation - The Adventure
Awaits!
Mexico Vacation | Search Ads
Sponsored by: Mexico Vacation LEARN MORE
Table Background Color & Image
We can use CSS to set the background color or image or we can use the HTML attributes for the same,
here in both the example we will use the HTML attribute.
HTML bgcolor Attribute: We can set background color for whole table or just for one cell.
HTML background Attribute: We can set background image by using the HTML background attribute.
You can also set border color also using bordercolor attribute.
Example 1:
Here is an another example of using bgcolor & bordercolor attribute to color the table background and
border of the table.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Color</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<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>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
Example 2:
Here is an another example of using background attribute. Here we will use an image available in our
"images" directory.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Image</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/[Link]">
<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>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
Plan Your Next Mexico Vacation - The
Adventure Awaits!
Mexico Vacation | Search Ads
Sponsored by: Mexico Vacation LEARN MORE
Table Width and Height
You can set a table size by mentioning width and height using HTML width and height attributes. You can
specify table width or height in terms of pixels or in terms of percentage of available screen area.
Example:
In this example we will set the table with and height 400 and 150 by using HTML width and height
attribute.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Anzeige
Best Liposuction Surgeons Turkey 2024
(See Prices)
Nested HTML Table
Creating a nested HTML table is quite easy, we just need to create table inside of HTML table.
Example:
In this example we will create nested table with border of 1.
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>
</table>
</td>
<td> First Column of Outer Table </td>
</tr>
</table>
</body>
</html>
First row of Inner Table
First Column of Outer Table
Second row of Inner Table
First row of Inner Table
First Column of Outer Table
Second row of Inner Table
HTML Tables Related Tags
Following is the list of all the HTML tags related to HTML Tables
Tag Descriprtion Example
<table> This is used to create HTML table. Try It
<th> This tag define the header of the table. Try It
<tr> This tag define table row. Try It
<td> This tag is used to store table data of each cell. Try It
<caption> This tag specify a caption for the table element. Try It
<colgroup> This tag describe the collection of one or more columns in a table for formattig. Try It
<col> This tag is used to offer information about columns. Try It
<thead> This tag is used to define table header section. Try It
<tbody> This tag is used to define table body section. Try It
<tfoot> This tag is used to define the table footer section. Try It
Video - HTML Tables
