When to Use Tables

Technical Deep Dive & Specifications

The 2D Relational Data Decision Framework

Before writing a single line of HTML, run your proposed dataset through this three-step decision tree:

                  [Does the data represent a 2D matrix?]
                                    |
                    +---------------+---------------+
                    |                               |
                   NO                              YES
                    |                               |
       [Use Flexbox, Grid, or List]                 v
                                  [Does cell meaning depend on BOTH]
                                  [intersecting Row AND Col headers?]
                                                    |
                                    +---------------+---------------+
                                    |                               |
                                   NO                              YES
                                    |                               |
                   [Use CSS Grid or Definition List]                v
                                                    [USE SEMANTIC <TABLE>!]

The 3 Critical Test Questions:

1. The Header Dependency Test: If you remove the top column header and left row label, does the cell value lose its entire meaning?
   • Example: The number "98.4%" means nothing without knowing it is "Node B" (Row) and "CPU Load" (Col). $\rightarrow$ USE TABLE.
2. The Matrix Reversal Test: Would this dataset make sense if imported directly into a spreadsheet application (CSV, Excel, Google Sheets)?
   • Example: An e-commerce product catalog with image, title, and "Add to Cart" button is NOT a spreadsheet. $\rightarrow$ USE CSS GRID.
3. The Linearity Test: Can the content be read in a single linear sequence without losing context?
   • Example: A user profile card with avatar, name, and bio reads linearly. $\rightarrow$ USE SEMANTIC ARTICLE / FLEXBOX.

Comparative Architecture: <table> vs CSS Grid vs Flexbox

Common Anti-Patterns and Refactoring Guide

Anti-Pattern 1: The Form Layout Table

<!-- ANTI-PATTERN: Using a table to align form labels and inputs -->
<table>
  <tr>
    <td><label for="name">First Name:</label></td>
    <td><input type="text" id="name"></td>
  </tr>
</table>

<!-- MODERN REFACTOR: Pure CSS Grid or Flexbox -->
<form class="form-layout">
  <div class="form-group">
    <label for="name">First Name</label>
    <input type="text" id="name">
  </div>
</form>

Why it fails: A form is not a 2D coordinate dataset; using a table forces screen readers to announce "Table with 2 columns and 4 rows" when users just want to fill out their name.

Anti-Pattern 2: The E-Commerce Product Card Grid

<!-- ANTI-PATTERN: Placing product cards in table cells -->
<table>
  <tr>
    <td><div class="product-card">Product A</div></td>
    <td><div class="product-card">Product B</div></td>
  </tr>
</table>

<!-- MODERN REFACTOR: Semantic List with CSS Grid -->
<ul class="product-grid">
  <li><article class="product-card">Product A</article></li>
  <li><article class="product-card">Product B</article></li>
</ul>

Why it fails: Products are discrete standalone entities, not intersecting coordinate data points. CSS Grid (grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))) allows responsive multi-column wrapping without rigid table rows.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 21–28 (.toolbar-flex): Demonstrates Flexbox for a 1D horizontal component where items align along a single axis without coordinate dependencies.
• Line 31–38 (.card-grid): Demonstrates CSS Grid with an unordered list (<ul>) and semantic <article> cards for responsive, multi-column visual content.
• Line 41–52 (.data-table): Demonstrates a semantic <table> where data cells explicitly relate to both a column header (scope="col") and row header (scope="row").

Expected Browser Render Output

1. Use Flexbox for 1D Navigation / Toolbars:
Dashboard / Reports                           [Export] [Filter]

2. Use CSS Grid for 2D Visual Cards:
[ Analytics Pro ]        [ Cloud Shield ]       [ Edge Cache ]
Deep-dive telemetry.     Automated DDoS prot.   Global sub-10ms CDN.

3. Use HTML <table> for 2D Relational Data:
MICROSERVICE       INSTANCES    ERROR RATE
------------------------------------------
Payment API        12           0.001%
Auth Gateway       24           0.000%