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