HTML Tables - Complete Guide with Syntax and Examples

What are HTML Tables?

An HTML table is a collection of rows and columns used to display data in a grid-like structure.

Each table contains horizontal sections called rows and vertical sections called columns. The intersection of a row and column creates a cell where data is stored.

Examples of Data Displayed Using Tables:

• Student marks records
• Employee information
• Product price lists
• Course comparison
• Monthly schedules
• Website plans and pricing

HTML tables provide a simple method to arrange related information in a readable format.

Basic Structure of HTML Table

An HTML table is created using the <table> tag. Inside the table element, rows and cells are created using different tags.

Main HTML Table Tags:

HTML <table> Tag

The table tag is the main container used to create a table in HTML.

All rows, headings, and data cells are written inside the table element.

Syntax:

<table>
Table Content
</table>

Example:

<table>
</table>

The table tag itself does not display data. Rows and cells must be added inside it.

HTML Table Row (<tr>)

The tr tag is used to create a row inside an HTML table.

Each row contains one or more heading cells or data cells.

Syntax:

<tr>
Table Row Content
</tr>

Example:

<tr>
<td>
HTML
</td>
<td>
Web Development
</td>
</tr>

A table can contain multiple rows depending on the amount of information.

HTML Table Header (<th>)

The th tag is used to create heading cells in a table.

By default, table headings appear bold and centered in most browsers.

Syntax:

<th>
Heading Name
</th>

Example:

<th>
Student Name
</th>

Common Uses:

• Column headings
• Category names
• Table titles

HTML Table Data Cell (<td>)

The td tag is used to add actual data inside a table.

Each table data cell represents one piece of information.

Syntax:

<td>
Data
</td>

Example:

<td>
Rahul
</td>

Multiple td elements are placed inside a row to create columns.

HTML Table Basic Syntax

<table>
<tr>
<th>
Name
</th>
<th>
Subject
</th>
</tr>
<tr>
<td>
Rahul
</td>
<td>
HTML
</td>
</tr>
</table>

Basic HTML Table Example

HTML Code:

<table border="1">
<tr>
<th>
Name
</th>
<th>
Course
</th>
</tr>
<tr>
<td>
Amit
</td>
<td>
B.Tech CS
</td>
</tr>
<tr>
<td>
Neha
</td>
<td>
BCA
</td>
</tr>
</table>

Output:

Adding Border to HTML Tables

The border attribute is used to display borders around table cells.

Syntax:

<table border="1">
Table Content
</table>

Example:

<table border="1">
<tr>
<td>
HTML
</td>
<td>
CSS
</td>
</tr>
</table>

In modern web development, CSS is preferred for styling table borders.

Rows and Columns in HTML Tables

Rows and columns are the basic building blocks of every HTML table.

Rows:

Rows are horizontal sections of a table created using the tr tag.

Columns:

Columns are vertical sections created by placing multiple cells in each row.

Example:

<table border="1">
<tr>
<td>
HTML
</td>
<td>
CSS
</td>
</tr>
</table>

This table contains one row and two columns.

HTML Table Caption

The caption tag is used to provide a title or description for an HTML table. It helps users understand the purpose of the table before reading the data.

The caption is displayed above the table by default.

Syntax:

<table>
<caption>
Table Title
</caption>
Table Content
</table>

Example:

<table border="1">
<caption>
Student Details
</caption>
<tr>
<th>
Name
</th>
<th>
Marks
</th>
</tr>
<tr>
<td>
Rahul
</td>
<td>
85
</td>
</tr>
</table>

Output:

HTML Table Structure Using thead, tbody and tfoot

HTML provides special tags to divide a table into different sections. These tags improve table organization and readability.

Main Table Section Tags:

HTML thead Tag

The thead tag contains table heading rows. It is mainly used to separate column titles from table data.

Example:

<table border="1">
<thead>
<tr>
<th>
Subject
</th>
<th>
Marks
</th>
</tr>
</thead>
</table>

HTML tbody Tag

The tbody tag contains the main data rows of a table.

Example:

<tbody>
<tr>
<td>
HTML
</td>
<td>
90
</td>
</tr>
</tbody>

HTML tfoot Tag

The tfoot tag represents the summary or final section of a table.

It is commonly used for totals, calculations, or additional information.

Example:

<tfoot>
<tr>
<td>
Total
</td>
<td>
90
</td>
</tr>
</tfoot>

Complete HTML Table Example Using Sections

HTML Code:

<table border="1">
<caption>
Course Details
</caption>
<thead>
<tr>
<th>
Course
</th>
<th>
Duration
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
HTML
</td>
<td>
3 Months
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Total
</td>
<td>
1 Course
</td>
</tr>
</tfoot>
</table>

Cell Padding in HTML Tables

Cell padding defines the space between the content and the border of a table cell.

It improves readability by creating extra space inside cells.

Syntax:

<table cellpadding="10">
Table Content
</table>

Example:

<table border="1" cellpadding="10">
<tr>
<td>
HTML
</td>
<td>
CSS
</td>
</tr>
</table>

A higher cellpadding value increases the space inside each cell.

Cell Spacing in HTML Tables

Cell spacing controls the distance between individual table cells.

Syntax:

<table cellspacing="5">
Table Content
</table>

Example:

<table border="1" cellspacing="5">
<tr>
<td>
HTML
</td>
<td>
CSS
</td>
</tr>
</table>

In modern websites, CSS border-spacing is preferred instead of the cellspacing attribute.

Table Width and Height Attributes

HTML allows developers to define table size using width and height attributes.

Syntax:

<table width="100%" height="200">
Table Content
</table>

Example:

<table border="1" width="80%">
<tr>
<td>
HTML Table
</td>
</tr>
</table>

Today, CSS is recommended for controlling table dimensions.

Rowspan Attribute in HTML Tables

The rowspan attribute is used to merge two or more rows into a single cell.

Syntax:

<td rowspan="number">
Content
</td>

Example:

<table border="1">
<tr>
<td rowspan="2">
HTML
</td>
<td>
Basic
</td>
</tr>
<tr>
<td>
Advanced
</td>
</tr>
</table>

Output:

Colspan Attribute in HTML Tables

The colspan attribute is used to merge two or more columns into a single cell.

Syntax:

<td colspan="number">
Content
</td>

Example:

<table border="1">
<tr>
<td colspan="2">
Computer Science
</td>
</tr>
</table>

Output:

CSS Styling for HTML Tables

HTML creates the basic structure of tables, but CSS is used to improve the appearance and design of tables. CSS helps developers control borders, colors, spacing, alignment, and responsive behavior.

Modern websites generally use CSS instead of old HTML attributes for designing tables.

Example:

<style>
table{
width:100%;
border-collapse:collapse;
}

th,td{
border:1px solid black;
padding:10px;
text-align:center;
}
</style>
<table>
<tr>
<th>
Name
</th>
<th>
Course
</th>
</tr>
<tr>
<td>
Rahul
</td>
<td>
B.Tech
</td>
</tr>
</table>

Output:

Border Collapse Property

The border-collapse property is used to combine table borders into a single border. It removes the extra space between table cells.

Syntax:

table{

border-collapse:collapse;

}

Example:

<style>
table{
border-collapse:collapse;
}
</style>

This property creates a cleaner and professional table design.

Text Alignment in HTML Tables

The text-align property is used to control the horizontal alignment of table content.

Common Values:

• left - Aligns content to the left side
• center - Places content in the center
• right - Aligns content to the right side

Example:

td{
text-align:center;
}

Adding Background Style to Tables

CSS can be used to add background colors to table headings and rows to make important information more visible.

Example:

th{
background-color:lightgray;
}

td{
background-color:white;
}

Proper styling improves user experience and makes tables easier to understand.

Adding Hover Effect to Table Rows

The hover effect highlights a table row when the user moves the mouse pointer over it.

Example:

tr:hover{
background-color:#eeeeee;
}

Hover effects are commonly used in data tables, dashboards, and admin panels.

Responsive HTML Tables

A responsive table automatically adjusts according to different screen sizes such as mobile phones, tablets, and desktops.

Large tables may not fit properly on small screens. A responsive design allows users to scroll horizontally when required.

Example:

<div style="overflow-x:auto;">
<table border="1">
<tr>
<th>
Name
</th>
<th>
Department
</th>
</tr>
<tr>
<td>
Amit
</td>
<td>
Computer Science
</td>
</tr>
</table>
</div>

The overflow-x property helps tables work properly on smaller devices.

Nested Tables in HTML

A nested table is a table placed inside another table cell. It is useful when complex information needs multiple levels of organization.

Syntax:

<table>
<tr>
<td>
    <table>
    Inner Table
    </table>
</td>
</tr>
</table>

Example:

<table border="1">
<tr>
<td>
Main Table
<table border="1">
<tr>
<td>
Nested Table
</td>
</tr>
</table>
</td>
</tr>
</table>

Nested tables should be used carefully because excessive nesting can make HTML structure difficult to maintain.

Practical Uses of HTML Tables

HTML tables are used in many real-world applications for displaying structured information.

• Student Result Tables
• Employee Records
• Product Comparison Tables
• Pricing Plans
• Course Details
• Attendance Reports
• Financial Reports
• Sports Statistics
• Database Information Display

Practical Example: Student Result Table

HTML Code:

<table border="1">
<tr>
<th>
Name
</th>
<th>
Subject
</th>
<th>
Marks
</th>
</tr>
<tr>
<td>
Amit
</td>
<td>
HTML
</td>
<td>
90
</td>
</tr>
<tr>
<td>
Neha
</td>
<td>
CSS
</td>
<td>
85
</td>
</tr>
</table>

Output:

HTML Table Accessibility

Accessibility helps all users, including users who use screen readers, understand table information properly.

Accessibility Practices:

• Always use table headings using the th tag.
• Use meaningful column names.
• Avoid unnecessary complex table structures.
• Use caption for explaining table purpose.
• Maintain proper row and column order.
• Use scope attribute for better screen reader support.

Example:

<th scope="col">
Name
</th>

Common Mistakes While Creating HTML Tables

• Using tables for webpage layout design.
• Not adding table headings.
• Creating very large tables without proper structure.
• Ignoring mobile responsiveness.
• Using incorrect rowspan and colspan values.
• Not using CSS for modern table design.

Advantages of HTML Tables

• Organizes large information clearly.
• Improves data readability.
• Useful for displaying comparisons.
• Supports structured information presentation.
• Easy integration with CSS and JavaScript.
• Useful for reports and dashboards.
• Improves user understanding of complex data.

HTML Table Complete Summary