EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

HTML Table Tags

Home » Software Development » Software Development Tutorials » HTML Tutorial » HTML Table Tags

HTML Table Tags

Introduction on Html Table Tags

The HTML table provides a way to derive or define the data such as text, images, links etc in terms of rows and columns of cells. The HTML tables can be created by using <table> tag. By default, the table data is left aligned. In this topic, we are going to learn about HTML Table Tags.

The table can be created by using <th>, <td>, and <tr> tags.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  • The <th> tag defines a heading for the table.
  • The <td> tag specifies the table data cells which is used to make the column.
  • The <tr> tag specifies the table rows which is used to make a row.

The table data can be structured within <table>content of the table</table> with numerous table elements.

Syntax

<table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
</table>

Examples of HTML Table Tags

Here are the Examples of HTML Table Tags given below

1. Basic Table Usage

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Save the code with .html extension and open it in the browser. It will display the following output:

HTML Table Tags 1

2. Table Caption

The caption for the table can be specified by using the <caption> tag.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the below output:

HTML Table Tags 2

3. Table Cell Spacing

The space of the table cells can be defined by using the cellspacing attribute. The cellspacing attribute specifies the space between table cells.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the following output:

HTML Table Tags 3

4. Table Cell Padding

The padding of the table cells can be defined by using the cellpadding attribute. The cellpadding attribute distance between table cell border and data.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the below output:

HTML Table Tags 4

5. Column and Row Span Attributes

The two or more table rows can be merged into a single row by using rowspan attribute and table columns can be merged into a single column by using a colspan attribute.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
</body>

The code will display the following output:

HTML output 5

6. Background for Table

The background of the table can be created by using the bgcolor attribute. The table cell border can be specified by using the border-color attribute.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" bordercolor = "red" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Execute the above code and it will display the below output:

HTML output 6

7. Height and Width of the Table

The height and width of the table can be set by using width and height attributes.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

The above code will display the following output:

HTML output 7

8. Styling Table Cells

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
table#mytable tr:nth-child(even) {
background-color: #FAD7A0;
}
table#mytable tr:nth-child(odd) {
background-color: #E67E22;
}
table#mytable th {
color: white;
background-color: teal;
}
</style>
<body>
<table id="mytable" border = "1" width = "450" height = "350">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Execute the above code, you will have the below output:

HTML output 8

8. Nested Tables

You can use one table inside another table is called a nested table.

Let us consider the below example for the nested table:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250">
<tr>
<td>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

The above code will display the following output:

HTML output 9

Attributes of The Table

  • align: This attribute provides the alignment of content inside an element.
  • bgcolor: This attribute specifies the background color for the table.
  • border: This attribute specifies the border for the table cells.
  • cellpadding: This attribute displays the padding between table cells and table content.
  • cellspacing: This attribute displays the space between table cells.
  • frame: It specifies which parts of the outside borders are visible.
  • rules: This specifies which parts of the inside borders are visible.
  • sortable: This attribute informs that the table is sortable.
  • summary: It provides what type of table content is present.
  • width: This attribute tells the width of the table.
  • height: This attribute specifies the height of the table.

Conclusion

So far, we have studied the different types of table tags in HTML. The examples have shown usage of styling the table, nesting one table within another table, setting height and width of the table, adding spacing and padding for the table cells, applying background color for the table and many more.

Recommended Articles

This is a guide to HTML Table Tags. Here we discuss the Examples of HTML Table Tags with syntax and Attributes of the table. You may also have a look at the following articles to learn more –

  1. What is HTML
  2. HTML Frames
  3. HTML Blocks
  4. Table Border in HTML

HTML Training (12 Courses, 19+ Projects, 4 Quizzes)

12 Online Courses

19 Hands-on Projects

89+ Hours

Verifiable Certificate of Completion

Lifetime Access

4 Quizzes with Solutions

Learn More

1 Shares
Share
Tweet
Share
Primary Sidebar
HTML Tutorial
  • Tags
    • Types of Tags in HTML
    • Basic HTML Tags
    • HTML Format Tags
    • HTML object Tag
    • HTML Image Tags
    • HTML Table Tags
    • Meta Tag in HTML
    • Caption Tag in HTML
    • Aside Tag in HTML
    • Style Tag in HTML
    • Cite Tag in HTML
    • HTML Legend Tag
    • Quotation Tag in HTML
    • Datalist in HTML
    • map Tag in HTML
    • HTML Marquee Tag
    • Footer Tag in HTML
    • HTML nav Tag
    • HTML figure Tag
    • Option Tag in HTML
    • Inline Tags in HTML
    • Pre Tag in HTML
    • Span Tag in HTML
    • HTML samp Tag
    • SUP Tag in HTML
    • Div Tag in HTML
    • HTML tr Tag
    • HTML abbr Tag
    • HTML Address Tag
    • Small Tag in HTML
    • PHP Tag in HTML
    • Canvas Tag in HTML
    • Font Tag in HTML
    • Select Tag in HTML
    • HTML Picture Tag
    • Fieldset Tag in HTML
    • HTML Code Tag
    • kbd Tag in HTML
    • TextArea Tag in HTML
    • HTML Article Tag
    • HTML Button Tag
    • HTML time Tag
    • THead Tag in HTML
    • HTML frameset Tag
    • HTML checkbox Tag
    • Address Tag in HTML
    • Area Tag in HTML
    • HTML Strike Tag
    • HTML section Tag
    • HTML Umlaute
    • Frame Tag in HTML
    • tfoot in HTML
    • Embed Tag in HTML
    • href tag in HTML
    • Alt Tag in HTML
    • HTML Audio Tag
  • Basic
    • Introduction to HTML
    • What is HTML
    • HTML stands for
    • Advantages of HTML
    • Applications of HTML
    • Career In HTML
    • How HTML Works
    • Versions of Html
    • Symbols in HTML
    • HTML Commands
    • HTML Events
    • HTML Fonts Styles
    • HTML Form Controls
    • HTML Form Elements
    • HTML Frames
    • HTML Layout
    • HTML Entities
    • HTML List Styles
    • HTML Style Sheets
    • HTML Text Formatting Tags
    • What is XHTML?
    • HTML Section vs Div
    • DHTML
    • Cheat Sheet HTML
  • Attributes
    • HTML Attributes
    • HTML Event Attributes
    • HTML Style Attribute
    • HTML Text Attributes
    • HTML Block Elements
    • HTML Inline-Block
    • Block Level Elements in HTML
    • HTML Form Attribute
    • HTML Padding vs Margin
  • Color
    • HTML Colors 
    • RGB Color Model
    • Color Name in HTML
    • HTML Color Picker
    • Scrollbar Color
  • HTML5
    • What is HTML5
    • HTML5 Elements
    • Html5 New Elements
    • HTML5 Tags
    • HTML5 Semantics
    • HTML5 Web Workers
    • HTML5 Semantic Elements
  • Advance
    • Create Tables in HTML
    • Drag and Drop in HTML
    • Dropdown List in HTML
    • HTML Align Center
    • HTML Display Block
    • HTML Blocks
    • HTML Canvas
    • HTML SVG
    • HTML Text Editors
    • HTML Text Link
    • HTML Text Decoration
    • HTML URL Encoding
    • Iframes in HTML
    • HTML Tooltip
    • HTML Reset Button
    • HTML Hide Element
    • Image Link in HTML
    • Web Templates HTML
    • HTML Ordered List
    • HTML Unordered List
    • HTML Description List
    • HTML Form Validation
    • HTML Form Action
    • Registration Form in HTML
    • HTML Justify Text
    • Date in HTML
    • Vertical Table HTML
    • DOCTYPE HTML
    • Moving Text in HTML
    • Scrollbar in HTML Table
    • Responsive in HTML
    • HTML Inline-Style
    • HTML Progress Bar
    • HTML Colspan
    • HTML Favicon
    • HTML margin-left
    • Combobox in HTML
    • HTML Table Background
    • Table Without Border in HTML
    • Nested Table in HTML
    • Table Border in HTML
    • HTML onclick Button
    • HTML Image Padding
    • HTML Padding
    • HTML Border Style
    • HTML Float Left
    • File Path in HTML
    • HTML Geolocation
    • Linking Pages in HTML
    • Embed PHP in HTML
    • How to Add CSS in HTML?
    • Design Web Page in HTML
    • HTML Schriftart
    • Cursor in HTML
    • Scrollbar in HTML
    • HTML Sonderzeichen
    • HTML Search Bar
  • Interview Questions
    • HTML interview Questions
    • HTML5 Interview Questions And Answers

Related Courses

Online HTML Course

Bootstrap Training Course

XML Training Course

CSS Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - HTML Training (12 Courses, 19+ Projects, 4 Quizzes) Learn More