HTML Table Attributes

Master data organization with powerful table attributes. Learn to create accessible, responsive tables with borders, spacing, alignment, and semantic structure.

Advanced HTML25 min readInteractive DemosData Visualization

📋 Table Mastery Guide

🏗️Basic Structure

📏Border & Spacing

🎯Alignment

♿Accessibility

📱Responsive

🔧Advanced Attributes

👁️Browser Rendering

🎮Interactive Builder

1🏗️ HTML Table Structure

HTML tables organize data into rows and columns using a structured set of elements. Each table is built with specific tags that define headers, data cells, and structural sections.

💡 Key Insight: Modern HTML tables focus on semantic structure and accessibility rather than visual presentation. Use CSS for styling, HTML for structure.

🔧 Table Building Blocks

<table>

Table container

Wraps the entire table structure

<tr>

Table row

Defines a row of cells

<th>

Header cell

Column or row header (bold & centered)

<td>

Data cell

Regular table data cell

<thead>

Table header

Wrapper for header rows

<tbody>

Table body

Wrapper for data rows

<tfoot>

Table footer

Wrapper for footer rows

<caption>

Table caption

Title or description

html

<!-- Basic Table Structure -->
<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Product A</th>
      <th>Product B</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1,200</td>
      <td>$1,800</td>
      <td>$3,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$1,500</td>
      <td>$2,200</td>
      <td>$3,700</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Total</strong></td>
      <td><strong>$2,700</strong></td>
      <td><strong>$4,000</strong></td>
      <td><strong>$6,700</strong></td>
    </tr>
  </tfoot>
</table>

✅ When to Use Tables

• Tabular data display
• Financial reports
• Comparison charts
• Statistical data
• Pricing comparison
• Schedule/timetables

❌ When Not to Use Tables

• Page layout (use CSS Grid/Flexbox)
• Image galleries
• Navigation menus
• Form layouts
• Card components

2📏 Core Table Attributes

🟦 Border Attribute

The border attribute adds borders around table cells. While deprecated in HTML5, it's important to understand for legacy code and demonstrates why CSS is preferred for styling.

HTML Border

Name	Age
John	25
Sarah	30

html

<table border="1">
  <!-- table content -->
</table>

CSS Border (Recommended)

Name	Age
John	25
Sarah	30

html

<table class="border-table">
  <!-- table content -->
</table>

<style>
.border-table, .border-table th, 
.border-table td {
  border: 1px solid #d1d5db;
}
</style>

📐 Cell Spacing & Padding

Control the space between and within table cells using cellspacing and cellpadding attributes.

Default

A1	A2
B1	B2

cellpadding="10"

A1	A2
B1	B2

cellspacing="5"

A1	A2
B1	B2

html

<!-- HTML Attributes (Deprecated but functional) -->
<table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$999</td>
  </tr>
</table>

<!-- Modern CSS Approach -->
<table class="modern-table">
  <!-- table content -->
</table>

<style>
.modern-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.modern-table th,
.modern-table td {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

📏 Width & Alignment

Control table dimensions and content alignment using width and alignment attributes.

Width Control

Category	Description
HTML	Structure and content
CSS	Styling and layout

html

<table width="100%">
  <tr>
    <th width="30%">Category</th>
    <th width="70%">Description</th>
  </tr>
</table>

Alignment

Left	Center	Right
Data	Data	Data

html

<td align="left">Left aligned</td>
<td align="center">Centered</td>
<td align="right">Right aligned</td>

3🔧 Advanced Table Attributes

⚡ Powerful Features

Advanced attributes provide better control over table layout, accessibility, and complex data relationships.

🔀 Colspan & Rowspan

Merged Columns
Merged Rows	Cell B
	Cell C

html

<table>
  <tr>
    <td colspan="2">Merged Columns</td>
  </tr>
  <tr>
    <td rowspan="2">Merged Rows</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
  </tr>
</table>

🏷️ Scope Attribute

Name	Age
John	25

html

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <th scope="row">John</th>
    <td>25</td>
  </tr>
</table>

scope helps screen readers understand header relationships.

🎯 Advanced Attributes Reference

Attribute	Purpose	Values	Status
colspan	Merge cells across columns	number (e.g., 2, 3)	Active
rowspan	Merge cells across rows	number (e.g., 2, 3)	Active
scope	Define header cell scope	col, row, colgroup, rowgroup	Active
headers	Associate cells with headers	space-separated ID list	Active
abbr	Abbreviated header text	string	Active
axis	Categorize cells	string	Deprecated

5👁️ How Browsers Process Tables

🖥️ Browser Table Rendering Process

📥 Parse Table Structure

Browser identifies <table>, <tr>, <td>, and <th> elements, building the table's DOM structure.

🔍 Process Attributes

Applies border, cellspacing, cellpadding,colspan, and rowspan attributes to determine layout.

📊 Calculate Layout

Determines column widths, row heights, and handles merged cells based on content and attributes.

🎨 Apply Styling

Renders borders, spacing, and applies any CSS styles. Builds accessibility tree for screen readers.

✅ HTML Input

<tr>

</tr>

<tr>

</tr>

</table>

👀 Browser Output

Name	Age
John	25

💡Modern approach: Use CSS for styling, HTML for structure!

4♿ Accessibility & Semantics

🔍 Making Tables Accessible

Proper table semantics are crucial for screen readers and assistive technologies to correctly interpret and navigate tabular data.

✅ Accessible Table

html

<table>
  <caption>Student Grades Spring 2024</caption>
  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Math</th>
      <th scope="col">Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">John Doe</th>
      <td>95%</td>
      <td>88%</td>
    </tr>
    <tr>
      <th scope="row">Jane Smith</th>
      <td>92%</td>
      <td>95%</td>
    </tr>
  </tbody>
</table>

✓ Screen reader: "Student Grades Spring 2024 table with 3 columns and 3 rows"

❌ Inaccessible Table

html

<table border="1">
  <tr>
    <td><b>Student</b></td>
    <td><b>Math</b></td>
    <td><b>Science</b></td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>95%</td>
    <td>88%</td>
  </tr>
</table>

✗ Screen reader: "Table with 3 columns and 2 rows" - No context!

🎯 Key Accessibility Features

Caption

Table title/description

Screen readers announce caption first

Scope attribute

Define header relationships

Helps navigate complex tables

Headers attribute

Explicit cell-header association

For complex multi-header tables

thead/tbody/tfoot

Semantic table sections

Better structure understanding

6🎮 Interactive Table Builder

Configure Your Table

🏗️ Table Structure

Rows

Columns

⚡ Table Attributes

Add borderInclude header rowAdd caption

🔧 Advanced Options

Cellpadding

Cellspacing

Live Preview & Code

Sample Data Table
Name	Age	City
John Doe	28	New York
Jane Smith	32	Los Angeles

<table border="1" cellpadding="5" cellspacing="2">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

💡 Browser Processing

The browser automatically calculates column widths, applies borders and spacing, and creates an accessible structure for screen readers.

Your Learning Progress

Table Attributes80%

5/6

Topics Done

20m

Time Spent

📚 Quick Reference

border="1"

Add table borders

cellpadding="5"

Inner cell spacing

cellspacing="2"

Cell spacing

colspan="2"

Merge columns

✅ Best Practices

Use CSS for styling

Avoid deprecated attributes

Always use scope

For accessibility

Include captions

For context

Semantic structure

Use thead, tbody, tfoot

🎯 Common Use Cases

Data Reports

Sales, analytics

Pricing Tables

Product comparisons

Schedules

Timetables, calendars

Comparison

Feature comparisons

Statistics

Sports, financial data

Directories

Contact lists

🚀 Continue Learning

Advanced Tables →Table Styling with CSS →HTML Forms →