HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
HTML Tables
Tables in HTML help organize content into rows and columns. They’re especially useful for displaying structures data like schedules, product features, or contact lists.
Basic Table Structure
A table begin with the table element. Inside it you use rows (tr), headers (th), and data calls (td) to arrange content.
Basic Syntax
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Key Element Explained
table: Defines the start and end of the table.tr: Represents a table row.th: Represents a header cell (bold and centered by default)td: Represents a regular data cell.
Basic Example
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Arshyan</td>
<td>100</td>
</tr>
</table>
Output
| Name | Age |
|---|---|
| Arshyan | 100 |
Merging Cells: rowspan and colspan
Sometimes, you may want a cell to stretch multiple rows or columns.
Visual Representation of Rowspan and Colspan
Colspan Example (merge column):
Effect: The first cell in the first-row spans two columns.
<table border="1">
<tr>
<td colspan="2">Merged Columns</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Rowspan Example (merge row):
Effect: The second cell in the first-row spans two rows.
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td rowspan="2">Merged Rows</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
</tr>
</table>
Conclusion
HTML tables let you display data in a grid layout. By using tr, th, td effectively- and combining them with rowspan or colspan when needed-you can create clear, professional data displays. CSS can further enhance the appearance and responsiveness of tour tables.