👋 Introduction
HTML tables are essential for presenting structured information like pricing charts, scoreboards, or admin dashboards. Even in the age of CSS Grid and Flexbox, knowing how to build flexible table layouts is still vital. In this tutorial, you’ll learn all about core table tags, how colspan and rowspan work, and how to style tables for clarity and visual appeal.
🧱 Core HTML Table Tags
| Tag | Description |
|---|---|
| <table> | Defines the table structure |
| <tr> | Defines a row |
| <td> | Defines a data cell |
| <th> | Defines a header cell |
| <thead> | Header section |
| <tbody> | Main content section |
| <tfoot> | Footer section |
✨ What Is colspan and rowspan?
Colspan allows a table cell to span across multiple columns. Example: colspan="3" lets one cell take the width of three columns.
Rowspan allows a cell to span multiple rows vertically. Example: rowspan="2" stacks the cell across two rows.
These attributes are vital for creating well-structured layouts like invoices, dashboards, and schedules.
🧪 Example Table Layout
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<div class="table-container">
<table border="1" cellpadding="10" cellspacing="5" width="100%" align="center">
<thead>
<tr>
<td colspan="6">Table Layout (colspan = 6)</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3" class="adjusted">7</td>
<td colspan="3" class="adjusted">8</td>
</tr>
<tr>
<td rowspan="2" class="adjusted">9</td>
<td>10</td>
<td rowspan="2" class="adjusted">11</td>
<td>12</td>
<td rowspan="2" class="adjusted">13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td colspan="4" rowspan="3" class="adjusted">25 (colspan="4" rowspan="3")</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">Table Layout (colspan = 6)</td>
</tr>
</tfoot>
</table>
</div>🎨 CSS Styling
Here’s some CSS you can apply globally or inline using a style tag in your header or block editor:
body {
font-family: 'Poppins', sans-serif;
}
.table-container {
background: #fff;
padding: 10px;
box-shadow: 0px 0px 10px #00000017;
width: 400px;
margin: 0 auto;
}
table {
text-align: center;
}
thead, tfoot {
background: #7ac3d9;
color: #fff;
font-weight: bold;
}
.adjusted {
background: #e75f78;
color: #fff;
font-weight: bold;
}
tbody td {
background: #f9f9f9;
}
📌 Tips for Responsive Tables
- Wrap your tables in a div with
overflow-x: auto;to make them scrollable on mobile - Use semantic headers (e.g.,
<th scope="col">) for accessibility - Avoid nesting tables — keep layout logic clean
🧠 Conclusion
Mastering HTML tables boosts your ability to present structured data beautifully. With colspan and rowspan, your layouts become more dynamic and readable. Combine these with CSS and responsive practices, and your tables are ready to shine in any environment — especially WordPress!
Need this same format for the next tutorial — Flexbox vs. Tables, WooCommerce order tables, or Gutenberg table blocks? Let’s keep the productivity flowing! 🚀
0 comments