✨ HTML Table Attributes Explained: Colspan, Rowspan & More (With Examples)

HTML table attributes are essential for displaying structured data on the web. But to create complex layouts, you need more than rows and columns-powerful table attributes! In this guide, we’ll demystify the most important HTML table attributes like colspan, rowspan, and others, helping you craft flexible, accessible tables with ease.

---

🔹 What Are HTML Table Attributes?

HTML table attributes are special properties you can add to table elements (<table>, <tr>, <th>, <td>, etc.) to control their appearance and behavior. Among the most important are colspan and rowspan, which allow you to merge cells across columns or rows, creating sophisticated table layouts.

---

🛠️ Key Table Attributes Explained

⭐ colspan Attribute

Purpose:
Merges a cell across multiple columns.

How to use:
Add colspan="n" to a <td> or <th> tag, where n is the number of columns the cell should span.

Example:

<tr>
  <td colspan="2">Merged Cell</td>
  <td>Regular Cell</td>
</tr>

This merges the first two columns into one cell.

⭐ rowspan Attribute

Purpose:
Merges a cell across multiple rows.

How to use:
Add rowspan="n" to a <td> or <th> tag, where n is the number of rows the cell should span.

Example:

<tr>
  <td rowspan="2">Merged Cell</td>
  <td>Row 1, Col 2</td>
</tr>
<tr>
  <td>Row 2, Col 2</td>
</tr>

This merges the first cell vertically across two rows.

---

📝 Other Useful Table Attributes

• align: Aligns cell content horizontally (deprecated in HTML5; use CSS).
• valign: Aligns cell content vertically (deprecated in HTML5; use CSS).
• width & height: Sets cell dimensions (deprecated; use CSS).
• scope: Improves accessibility by specifying whether a header cell applies to a row, column, or group.

---

🎨 Visual Example: Table with Colspan and Rowspan

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>jane@example.com</td>
    <td>123-456-7890</td>
  </tr>
</table>

Name	Email	Phone
Jane Doe	jane@example.com	123-456-7890

In the first row, “Name” spans two rows (rowspan="2"), and “Contact” spans two columns (colspan="2").

---

💡 Pro Tips for Table Attributes

• Use colspan and rowspan to create headers or group related data for better readability.
• Prefer CSS for styling (width, alignment) instead of deprecated HTML attributes.
• Always use <th> for header cells and <td> for data cells for semantic clarity and accessibility.

---

🚀 Table of Key Table Attributes

🛠️ Attribute	📄 Applies To	📝 Purpose	💻 Example
colspan	<td>, <th>	Merge cell across columns	<td colspan="3">
rowspan	<td>, <th>	Merge cell across rows	<td rowspan="2">
scope	<th>	Defines header scope for accessibility	<th scope="col">
align	<td>, <th>	Horizontal alignment (deprecated)	<td align="center">
valign	<td>, <th>	Vertical alignment (deprecated)	<td valign="top">
width/height	<td>, <th>	Set cell size (deprecated)	<td width="100">

---

🎯 Summary

HTML table attributes like colspan and rowspan are essential tools for building complex, readable, and accessible data tables. While some older attributes are now best handled with CSS, mastering these core table features will let you create flexible layouts that work beautifully across devices.

Primary Keywords: HTML table attributes, colspan, rowspan
Secondary Keywords: HTML table, merge cells, table layout, HTML table example, table accessibility

---

❓ Frequently Asked Questions

---

📝 SEO Metadata

SEO Title:
HTML Table Attributes Explained: Colspan, Rowspan & More (With Examples)

Meta Title:
HTML Table Attributes: Master Colspan, Rowspan & More

Meta Description:
Learn how to use HTML table attributes like colspan and rowspan to merge cells and create advanced table layouts. Includes clear examples, pro tips, and accessibility advice.

URL Slug:
html-table-attributes-colspan-rowspan-explained

Meta Keywords:
HTML table attributes, colspan, rowspan, HTML table, merge cells, table layout, HTML table example, table accessibility, HTML tips, web development

Share Now :