HTML Tables

How to Create Tables in HTML

HTML tables are used to display data in rows and columns. They make information easy to read and understand by organizing it into a structured format. Tables are commonly used to display student details, employee records, product lists, marks, timetables, and many other types of data.

For example, instead of writing student information like this:

Name: Abishek
Age: 22
City: Chennai

Name: Abi
Age: 21
City: Madurai

the same information can be displayed in a table:

Name Age City Abishek 22 Chennai Abi 21 Madurai

This format is easier to read because the related information is organized into rows and columns.

HTML provides several tags to create a structured table, and each tag has a specific purpose.

• The <table> tag is the main container that creates the table and holds all other table elements.
• The <caption> tag adds a title to the table, helping users understand what the table is about.
• The <thead> tag groups the header section of the table.
• Inside the <thead>, the <tr> tag creates a table row.
• The <th> tag creates the header cells that define the headings for each column.
• The <tbody> tag contains the main content of the table.
• Inside the <tbody>, the <tr> tag is used again to create each data row.
• The <td> tag creates the data cells that store the actual information in each row.
• The <tfoot> tag groups the footer section of the table and is commonly used to display totals, summaries, or remarks.
• The <colgroup> tag groups one or more columns together for applying common formatting.
• The <col> tag defines properties for individual columns, such as width, visibility, or background color.

Using the correct table tags makes the HTML code more organized, easier to read, and easier to maintain. It also improves accessibility by helping browsers and screen readers understand the structure of the table.