Table Tag in HTML – Full Details with suitable example

The <table> tag in HTML is used to display data in rows and columns (a tabular format). It helps organize data neatly for easy reading and comparison.

Table Tag in HTML used to create table on web browser. Here <tr> tag define table heading and <td> tag define table data.

Each and every cell close must contained <td> tag and <td> tag always define with in <tr> tag and each <tr> tag must iinclude with in table tag.

Note : <tr> and <td> tags indivusually can not have any adjestince.

                <tr> = table row
                <td> = table data
                <th> = table heading

 

A table in HTML is made up of several tags that work together to define the structure and content of the table.

Purpose of Table Tag

The <table> tag helps organize data neatly so that it can be easily read and compared. It is especially useful when we want to show a relationship between different sets of data.

For example, a student record table can show each student’s roll number, name, and marks in one row.

 

Basic Structure of an HTML Table

<table>

<tr>

<th>S. No.</th>

<th>Name</th>

<th>Marks</th>

</tr>

<tr>

<td>Data / Item 1</td>

<td>Data / Item 2</td>

<td>Data / Item 3</td>

</tr>

<tr>

<td>Data / Item 4</td>

<td>Data / Item 5</td>

<td>Data / Item 6</td>

</tr>

</table>

Explanation of Table Tags

Tag Description
<table> Defines the start and end of the table.
<tr> Defines a table row.
<th> Defines a table header cell (bold and centered by default).
<td> Defines a table data cell (normal text).
<caption> Provides a title or description for the table. (Optional)
<thead> Groups the header content in a table. (Optional)
<tbody> Groups the main body content in a table. (Optional)
<tfoot> Groups the footer content in a table. (Optional)

Common Table Attributes

Attribute Description Example
border Specifies the border width of the table. <table border=”1″>
cellpadding Space inside a cell between the text and the border. <table cellpadding=”10″>
cellspacing Space between two table cells. <table cellspacing=”5″>
width Defines table width in pixels or percentage. <table width=”80%”>
align Aligns table to left, right, or center. <table align=”center”>
bgcolor Sets the background color of the table. <table bgcolor=”lightblue”>

Note: Many of these attributes (like border, cellpadding, cellspacing, bgcolor) are deprecated in HTML5. It’s better to use CSS for styling.

Example with All Features

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Example</title>

<style>

table {

border-collapse: collapse; /* removes cell spacing */

width: 70%;

margin: auto;

}

th, td {

border: 2px solid #000;

padding: 10px; /* same as cellpadding */

text-align: center;

}

th {

background-color: #f2f2f2;

}

caption {

font-weight: bold;

font-size: 18px;

margin-bottom: 10px;

}

</style>

</head>

<body>

<table>

<caption>Student Information</caption>

<tr>

<th>Roll No.</th>

<th>Name</th>

<th>Course</th>

<th>Marks</th>

</tr>

<tr>

<td>1011</td>

<td>LAV PRATAP</td>

<td>MCA</td>

<td>98</td>

</tr>

<tr>

<td>1012</td>

<td>Prince</td>

<td>MCA</td>

<td>92</td>

</tr>

<tr>

<td>1013</td>

<td>Rohit</td>

<td>MCA</td>

<td>85</td>

</tr>

</table>

</body>

</html>

Cell Spacing and Cell Padding

Term Definition Affects Example
Cell Padding The space inside each cell, between the text and the cell border. Inside the cell. <table cellpadding=”10″>
Cell Spacing The space between adjacent cells. Between cells. <table cellspacing=”5″>

Visual Difference

Without Padding/Spacing With Padding and Spacing
Text touches cell borders More readable spacing inside & between cells

Quick Example Showing Difference

<table border=”1″ cellpadding=”10″ cellspacing=”5″>

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>LAV PRATAP</td>

<td>25</td>

</tr>

</table>

In CSS:

Instead of using cellpadding and cellspacing attributes, you can use:

table {

border-collapse: separate;

border-spacing: 5px; /* same as cellspacing */

}

th, td {

padding: 10px; /* same as cellpadding */

}

Summary – Table Tag in HTML

  • <table> creates tabular data layout.
  • <tr>, <th>, and <td> define rows, headers, and data cells.
  • Cell padding adds space inside a cell.
  • Cell spacing adds space between cells.
  • Use CSS for modern table design instead of HTML attributes.