HTML TUTORIALS
HTML TUTORIALS
HTML5 Tables
HTML table is a structured set of data arranged in rows and columns, defined using the <table> tag. Although tables are no longer used for layout (thanks to CSS), they are still vital for displaying tabular data.
Basic HTML Table Structure
Here’s a quick breakdown of the core HTML table elements:
<table>: Defines the table. Wraps all table content.<tr>: Table row. Defines each row inside the table.<th>: Table header cell (bold and centered by default). Used for header cells. These are bold and centered by default, and help with accessibility and SEO by defining column titles.<td>: Table data cell. Defines individual cells of data in rows.<caption>: Table title/caption (optional). Provides a title or description of the table.
<table border=”1″>
<caption>Student Grades</caption>
<tr>
<th>Student</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>Science</td>
<td>B+</td>
</tr>
</table
Advanced Table Features
Colspan and Rowspan
When working with HTML5 tables, there are times when you want a single cell to span across multiple columns or rows. That’s where colspan and rowspan attributes come into play.
These attributes help you merge cells to create more complex and readable table layouts — essential for dashboards, reports, calendars, and comparison charts.
What is colspan?
The colspan attribute is used in a <td> or <th> element to make the cell span across two or more columns.
<table border=”1″>
<tr>
<th colspan=”2″>Student Info</th>
</tr>
<tr>
<td>Name</td>
<td>Grade</td>
</tr>
</table>
What is rowspan?
The rowspan attribute is used to make a cell span multiple rows vertically.
<table border=”1″>
<tr>
<th rowspan=”2″>Student</th>
<th>Subject</th>
</tr>
<tr>
<td>Math</td>
</tr>
</table>
