An HTML table is used when information needs to be presented in a relationship between rows and columns. For example, a student's result can have columns such as Name, Subject, Marks, and Grade. A table makes the relationship between these values clear to the reader.
HTML provides elements such as <table>, <tr>, <th>, and <td> for creating the basic structure. Additional elements such as <caption>, <thead>, <tbody>, and <tfoot> can be used when a table contains logically separated sections.
In this tutorial, we will build tables step by step and then look at cell merging, semantic structure, accessibility, CSS styling, and responsive presentation.
An HTML table is a structured collection of cells arranged into rows and columns. Each cell contains information that belongs to a particular row and column.
Tables are appropriate for information where comparing values across rows or columns is meaningful. They are commonly used for examination results, schedules, specifications, reports, comparison data, and other genuinely tabular information.
A table should not normally be used simply to position unrelated elements on a webpage. Modern webpage layouts are created with CSS layout systems such as Flexbox and Grid.
| Student | Subject | Marks |
|---|---|---|
| Rahul | HTML | 86 |
| Neha | CSS | 91 |
Here, every row represents one record and every column represents a particular type of information.
The <table> element acts as the container. Inside it, <tr> creates a row, while <th> and <td> create cells.
<table>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>Amit</td>
<td>B.Tech</td>
</tr>
</table>
| Element | Role |
|---|---|
| <table> | Contains the complete table. |
| <tr> | Represents one row. |
| <th> | Represents a header cell. |
| <td> | Represents an ordinary data cell. |
The <tr> element represents a table row. A row normally contains a set of cells describing one record or one logical part of the table.
For example, in a student result table, one row can represent the marks of one student.
<tr>
<td>Ravi</td>
<td>Computer Networks</td>
<td>88</td>
</tr>
The <th> element identifies a header cell. A header explains what the corresponding data represents.
For example, the word Marks tells the reader that the values below it represent marks rather than names or course titles.
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
Using actual header cells is preferable to creating visually bold text inside ordinary data cells because semantic table headers provide useful information to assistive technologies.
The <td> element contains ordinary table data. A data cell belongs to a particular row and column.
<tr>
<td>Amit</td>
<td>BCA</td>
<td>82</td>
</tr>
The number of cells in each ordinary row should normally match the logical column structure of the table unless cell merging is being used.
The following example combines a header row with several data rows. This is the basic pattern from which more advanced tables can be developed.
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Amit</td>
<td>B.Tech CS</td>
<td>First</td>
</tr>
<tr>
<td>Neha</td>
<td>BCA</td>
<td>Second</td>
</tr>
</table>
| Name | Course | Year |
|---|---|---|
| Amit | B.Tech CS | First |
| Neha | BCA | Second |
The <caption> element gives a table a visible title that describes its purpose. It is especially useful when a page contains more than one table.
<table border="1">
<caption>
B.Tech Semester Result
</caption>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>HTML</td>
<td>90</td>
</tr>
</table>
A meaningful caption gives readers immediate context before they inspect the individual cells.
For larger or more structured tables, HTML provides elements that identify the header, main data, and footer portions of a table.
| Element | Purpose |
|---|---|
| <thead> | Contains the table's header rows. |
| <tbody> | Contains the primary data rows. |
| <tfoot> | Contains summary or footer information. |
<table border="1">
<caption>Course Fees</caption>
<thead>
<tr>
<th>Course</th>
<th>Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>₹999</td>
</tr>
<tr>
<td>CSS</td>
<td>₹1299</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>₹2298</td>
</tr>
</tfoot>
</table>
The colspan attribute allows a cell to extend across multiple columns. It is useful when a heading or summary applies to several columns.
<table border="1">
<tr>
<th colspan="3">
Student Result
</th>
</tr>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</table>
| Student Result | ||
|---|---|---|
| Name | Subject | Marks |
| Amit | HTML | 90 |
The value of colspan="3" means that the cell occupies the width of three columns.
The rowspan attribute allows one cell to extend vertically across multiple rows.
<table border="1">
<tr>
<th>Course</th>
<th>Topic</th>
</tr>
<tr>
<td rowspan="2">Web Development</td>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
</table>
| Course | Topic |
|---|---|
| Web Development | HTML |
| CSS |
Here, rowspan="2" makes the Web Development cell occupy two rows.
| Attribute | Direction | Purpose |
|---|---|---|
| colspan | Horizontal | Combines multiple columns into one cell. |
| rowspan | Vertical | Combines multiple rows into one cell. |
A simple way to remember the difference is: colspan works across columns, while rowspan works across rows.
When a table contains multiple rows or columns, explicitly describing the relationship between a header and its data can improve accessibility.
The scope attribute can indicate whether a header applies to a column or a row.
<th scope="col"> Student Name </th>
<th scope="row"> Amit </th>
For straightforward tables, scope="col" is commonly used for column headings and scope="row" for headings that identify rows.
HTML defines the meaning and structure of a table, while CSS controls its visual presentation. Keeping structure and presentation separate makes the code easier to maintain.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #999;
padding: 10px;
text-align: left;
}
th {
font-weight: bold;
}
</style>
The border-collapse property is commonly used to make adjacent cell borders appear as a single border.
Cell content becomes difficult to read when it touches the cell border. CSS padding provides space between the content and the boundary of the cell.
th,
td {
padding: 12px;
}
Using CSS padding is preferable to relying on the older HTML cellpadding attribute when building modern webpages.
The text-align property controls horizontal text alignment inside cells.
th {
text-align: center;
}
td {
text-align: left;
}
The best alignment depends on the type of data. For example, descriptive text is usually easier to scan when left-aligned, while short numeric values may be centered or aligned according to the design.
Long tables can become easier to scan when alternate data rows receive a different background style. CSS's nth-child() selector can be used for this purpose.
tbody tr:nth-child(even) {
background-color: #f5f5f5;
}
This technique is sometimes called zebra striping. It is a presentation choice and should not replace meaningful table structure.
For tables that users interact with using a mouse, a subtle hover effect can help identify the row currently being viewed.
tbody tr:hover {
background-color: #eeeeee;
}
Hover styling should be treated as an additional visual aid. Important information should never depend only on hover because touch-screen and keyboard users may not have the same interaction.
A wide table may exceed the available width on a mobile screen. One practical approach is to place the table inside a horizontally scrollable container.
<div style="overflow-x:auto;">
<table>
<tr>
<th>Student</th>
<th>Subject</th>
<th>Internal Marks</th>
<th>External Marks</th>
<th>Total</th>
</tr>
<tr>
<td>Amit</td>
<td>HTML</td>
<td>25</td>
<td>65</td>
<td>90</td>
</tr>
</table>
</div>
The container allows the user to scroll horizontally instead of forcing a wide table to shrink until its content becomes difficult to read.
Older HTML examples often use attributes such as border, cellpadding, cellspacing, width, and height directly on the table.
These attributes are useful for understanding older HTML code, but modern development generally uses CSS for presentation.
| Older Attribute | Modern CSS Approach |
|---|---|
| border | border |
| cellpadding | padding |
| cellspacing | border-spacing or border-collapse |
| width | width / max-width |
| height | height / min-height where appropriate |
Knowing both approaches is useful when learning HTML because students may encounter older examples while maintaining existing websites.
A result table is a useful example because each record has the same set of properties: student name, subject, marks, and grade.
<table>
<caption>Student Result</caption>
<thead>
<tr>
<th scope="col">Student</th>
<th scope="col">Subject</th>
<th scope="col">Marks</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>HTML</td>
<td>91</td>
<td>A+</td>
</tr>
<tr>
<td>Neha</td>
<td>HTML</td>
<td>87</td>
<td>A</td>
</tr>
</tbody>
</table>
| Student | Subject | Marks | Grade |
|---|---|---|---|
| Amit | HTML | 91 | A+ |
| Neha | HTML | 87 | A |
A well-structured table should remain understandable to people who navigate webpages using assistive technologies. Semantic HTML gives browsers and assistive technologies information about the relationships between table headings and data.
In older websites, tables were sometimes used to position logos, menus, columns, and other page elements. This approach mixes content relationships with visual layout and can make a website difficult to maintain.
For modern layouts, CSS Flexbox and CSS Grid are generally better choices. HTML tables should be reserved for information that is genuinely represented as rows and columns.
Displaying a student's marks, where each row represents a record and each column represents a property.
Creating a two-column website layout by placing the entire page inside a table.
Beginners often create tables that work visually but have structural or maintenance problems. The following points are worth checking when writing table markup.
A table is appropriate when the user needs to compare related values across rows and columns.
| Information | Table Appropriate? | Reason |
|---|---|---|
| Student result | Yes | Records contain related columns. |
| Product specifications | Yes | Values can be compared across products. |
| Weekly timetable | Yes | Information follows a row-column relationship. |
| Website navigation | No | Navigation should use semantic navigation elements and links. |
| Page layout | No | CSS layout techniques are more suitable. |
| Element | Meaning |
|---|---|
| <table> | Container for the complete table. |
| <caption> | Describes or names the table. |
| <thead> | Groups header rows. |
| <tbody> | Groups the main data rows. |
| <tfoot> | Groups summary or footer rows. |
| <tr> | Creates a table row. |
| <th> | Creates a table header cell. |
| <td> | Creates a data cell. |
An HTML table is a structure used to present related information in rows and columns. It is useful for displaying data such as student results, prices, schedules, records, and comparisons.
The <table> element is used as the main container for creating an HTML table.
The <tr> tag defines a row in an HTML table. A row can contain heading cells or regular data cells.
The <th> element represents a table heading, while the <td> element represents a normal data cell.
A table heading is created using the <th> element inside a table row.
<tr> <th>Name</th> <th>Marks</th> </tr>
Table data is placed inside the <td> element. Multiple data cells can be placed inside a table row.
<tr> <td>Rahul</td> <td>85</td> </tr>
The <caption> element provides a meaningful title for a table. It helps users understand the purpose of the table before reading its contents.
These elements divide an HTML table into logical sections. The <thead> contains heading rows, <tbody> contains the main data, and <tfoot> can contain summary or final information.
The colspan attribute allows a table cell to span across two or more columns.
<td colspan="2"> Computer Science </td>
The rowspan attribute allows a table cell to extend across multiple rows.
<td rowspan="2"> HTML </td>
Yes. CSS can be used to control table borders, spacing, alignment, width, typography, background styling, and other visual properties.
The border attribute is useful in simple learning examples, but CSS is generally preferred for controlling the appearance of table borders in modern websites.
Large tables may not fit comfortably on small screens. A common solution is to place the table inside a container that allows horizontal scrolling.
<div style="overflow-x:auto;"> <table> ... </table> </div>
Tables should normally be used for presenting tabular data rather than designing the complete webpage layout. Modern webpage layouts are generally created using CSS techniques such as Flexbox and CSS Grid.
The scope attribute helps identify whether a table heading applies to a particular row or column. It can also make table relationships easier for assistive technologies to interpret.
<th scope="col"> Student Name </th>
A nested table is a table placed inside a cell of another table. Although HTML supports this structure, it should only be used when the information genuinely requires another table.
HTML tables are commonly used for structured information such as student results, product comparisons, course details, schedules, attendance records, reports, and pricing information.
The basic elements are <table>, <tr>, <th>, and <td>. Additional elements such as <caption>, <thead>, <tbody>, and <tfoot> can be used to create a more meaningful structure.
Normal table columns are formed by placing corresponding heading or data cells across multiple rows. HTML does not require a separate column tag for creating ordinary table data.
Tables can be made more accessible by using meaningful headings, appropriate table structure, captions where useful, and attributes such as scope when they clarify relationships between headings and data.
An HTML table is intended for information that has a meaningful relationship between rows and columns. CSS layouts such as Flexbox and Grid are designed for arranging webpage components and creating visual page layouts.
Incorrect rowspan or colspan values can produce an uneven or confusing table structure. These attributes should be used carefully so that the number and arrangement of cells remain logically consistent.
No. Tables are appropriate for genuinely tabular information. Lists, paragraphs, cards, Flexbox, or CSS Grid may be more suitable for other types of webpage content.
HTML tables teach beginners how structured data is represented using rows, headings, cells, and relationships between different pieces of information. This knowledge is useful when creating data-driven webpages.
After learning HTML tables, you can study HTML forms, CSS styling, responsive design, and JavaScript. These topics help you create more interactive and professional webpages.
HTML tables provide a semantic way to present information that naturally belongs in rows and columns. The basic structure begins with <table>, <tr>, <th>, and <td>.
For more meaningful tables, elements such as <caption>, <thead>, <tbody>, and <tfoot> help describe the structure. The rowspan and colspan attributes can be used when information needs to span multiple rows or columns.
CSS should normally handle visual presentation such as borders, spacing, alignment, and responsive behavior. At the same time, semantic HTML should be preserved so that the table remains understandable and accessible.
Once these concepts are understood, you can use HTML tables effectively for result sheets, reports, schedules, comparisons, specifications, and other structured datasets.