Scribd
Upload
2 views

HTML - Tables

The document provides an overview of HTML tables, explaining their structure, purpose, and how to create and style them using various HTML tags and CSS properties. It details the use of tags such as <table>, <tr>, <td>, and <th> for organizing data in rows and columns, and discusses techniques for setting table attributes like width, height, and background color. Additionally, it covers nested tables and includes examples to illustrate the concepts.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML - Tables

The document provides an overview of HTML tables, explaining their structure, purpose, and how to create and style them using various HTML tags and CSS properties. It details the use of tags such as <table>, <tr>, <td>, and <th> for organizing data in rows and columns, and discusses techniques for setting table attributes like width, height, and background color. Additionally, it covers nested tables and includes examples to illustrate the concepts.

Uploaded by

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

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>.

HTML <table> Tag: This tag is used to create the table that wrap the rows and columns within
it.
Page 2 of 12

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

<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Category</th>
Page 3 of 12

<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

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
Page 4 of 12

}
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

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

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.
Page 6 of 12

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>
<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>
<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>
Page 7 of 12

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');
}
</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>
<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>
Page 8 of 12

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.

<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>
Page 9 of 12

<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>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</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>
Page 10 of 12

<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>

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>
Page 11 of 12

</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>

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
Page 12 of 12

Try
<caption> This tag specifies the caption for the table.
It

This tag describes the collection of one or more columns in a table for Try
<colgroup>
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

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

You might also like