Tables in HTML
FREE
Overview
To organise data into rows and columns Tables in HTML are used. Tables are used to organise information such as images, text, and links. Suppose you want to show data of a student and just writing in a text format will be very untidy therefore using tables will become tedious and understandable for the user.
HTML Tables
Tables in HTML are a collection of data organised in rows and columns, or a more complicated form tables are commonly used in data analysis, research, and communication. Tables can be used for a variety of purposes like showing text and numerical data. It is used in a tabular form layout to differentiate between two or more topics. Databases are built using tables.
To create a Table in HTML <table> tag is used which is the main container of the table.
Syntax
Example
Output
| Name | Course | Application Number |
|---|---|---|
| Aliana | B.Tech CSE | 17218 |
| Maria | Fashion Tech | 17219 |
| Sarah | Journalism | 17272 |
| Elena | MBA | 17291 |
We will be looking at <tr>, <th> and <td> tags in this article.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
Table Cells
The <td> tag is defined as a cell in Tables in HTML which contain data.
Syntax
Example
Output
| Sarah | 20 | B.Tech |
|---|
From the following output, we can see that a table row is created containing three table cells which are created in a row using <td> tag.
Table Rows
To arrange data horizontally in different table cells are called table rows.
To create a table row we use <tr> tag.
Syntax
Example
Output
| Name | Age | Course |
|---|---|---|
| Sarah | 20 | B.Tech |
From the output, we can say that 2 rows are created with 3 columns using data cells i.e., the <td> tag.
Table Header
To represent a table cell we use table headers. Tables in HTML can have headers horizontally as well as vertically.
To create a table header <th> tag is used.
Syntax
Here is an example of horizontal and vertical headers, where we will be creating a simple time-table.
Example
Output
| Time/Days | Monday | Tuesday |
|---|---|---|
| 8:00am | Python | Java |
| 12 noon | Spanish | English |
| 3:00 PM | Data Structures | Networking |
As we can see table headers are added vertically as well as horizontally to do so we have added <th> tag in every <tr> tag.
HTML Table Tags
These are the different HTML tags used in a table.
| Tags | Description |
|---|---|
| <table> | Used to create a table. |
| <tr> | Used to create table rows. |
| <td> | Used to create table data/cells. |
| <th> | Used to create table header. |
| <caption> | A table caption is defined. |
| <colgroup> | It is used to format a group of one or more columns in a table. |
| <col> | Used with the <colgroup> element to define column characteristics for each column. |
| <tbody> | The table body is grouped together using it. |
| <thead> | Table head is grouped together using this tag. |
| <tfooter> | Footer content is grouped together using this tag. |
Example of Tables in HTML
As we have gone through the basics of Tables in HTML, let's create a simple table that will include data of a students Marksheet.
Example
Output
| Name | Physics | Chemistry | Maths | Total Marks |
|---|---|---|---|---|
| Abhishek | 60 | 87 | 59 | 100 |
| Anirudh | 63 | 80 | 45 | 100 |
| Aditi | 55 | 40 | 86 | 100 |
| Prakarsh | 64 | 90 | 85 | 100 |
A table is created which contains five rows and the first row contains the heading part only which is created using <th> tag.
Supported Browsers
Tables in HTML are supported by the following browsers -
- Chrome
- Microsoft Edge
- Safari
- Firefox
- Internet explorer
- Opera
Conclusion
- Data is organised into rows and columns using HTML tables. Tables are used to organise data like photographs, text, and hyperlinks.
- <tr> tag is used to create table rows, <th> tag is used to define table headers while <td> tag is used for table data/cells.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more