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.
Top comments (1)
I still have nightmares about the early 2000s when we used HTML tables for everything—layouts, navigation, even rounded corners. Tables were the duct tape of the web, and we used them like we had no other options. I am glad we have CSS now, but I will never fully recover from seeing a table nested inside another table inside another table just to center a logo. Those were dark times.
This is a really clean introduction to HTML tables. The breakdown of each tag with its purpose is exactly what beginners need—not just "use this tag" but "this is why you use it." I especially appreciate that you included , , , and instead of just the bare minimum. A lot of tutorials skip those, but they make a huge difference for accessibility and maintainability.
One thing I would add for readers who are just starting: always use for headers and pair it with the scope attribute (scope="col" or scope="row"). That small addition tells screen readers which headers belong to which cells, and it costs almost nothing to add. It is one of those accessibility wins that takes five seconds and makes your table usable for everyone.
Also, since you covered the basic structure so well, I would love to see a follow-up on making tables responsive. That is where most beginners struggle—tables look great on desktop and then break completely on mobile. Showing how to use overflow-x: auto or a simple responsive pattern would be a great next step for this series.
Thanks for writing something that actually teaches the fundamentals instead of just dropping a code block and moving on.