HTML · Tables

Table Attributes

Learn to use attributes to control table appearance and behavior

Find videos you like?

Save to resource drawer for future reference!

Table Attributes

Control table layout and cell behavior

HTML table attributes allow you to control how cells span across rows and columns, and how content is aligned within cells. Common attributes include colspan,rowspan, andalign.

Modern Approach

While HTML attributes exist, it's often better to use CSS for styling and alignment. HTML5 focuses on semantic meaning.

Essential Table Attributes

Important attributes for table cells

colspan

Merge cells horizontally across columns

<td colspan="2">Spans 2 columns</td>

rowspan

Merge cells vertically across rows

<td rowspan="2">Spans 2 rows</td>

align

Align content (left, center, right)

<td align="center">Centered</td>

width

Set column width (use CSS instead)

<td width="200">Wide cell</td>

Colspan and Rowspan

Merge cells across multiple columns and rows

colspan - Horizontal Merge

Combines multiple columns into one cell

<td colspan="3">
  Spans 3 columns
</td>

rowspan - Vertical Merge

Combines multiple rows into one cell

<td rowspan="2">
  Spans 2 rows
</td>

Merged Cells Example

Using colspan and rowspan for complex tables

Frontend

<h3>Schedule with Merged Cells</h3>
<table>
  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9:00 AM</td>
      <td colspan="2">Team Meeting</td>
      <td>Workshop</td>
    </tr>
    <tr>
      <td>1:00 PM</td>
      <td rowspan="2">Project Work</td>
      <td>Review</td>
      <td rowspan="2">Training</td>
    </tr>
    <tr>
      <td>3:00 PM</td>
      <td>Lunch Break</td>
    </tr>
  </tbody>
</table>

Live Preview

Loading preview...

Border Collapse and Spacing

Control how table borders appear

border-collapse: collapse

Borders merge into single lines

table {
  border-collapse: collapse;
}

border-collapse: separate

Space between cell borders

table {
  border-collapse: separate;
  border-spacing: 8px;
}

Spacing Styles

Compare border-collapse and border-spacing

Frontend

<h3>Tables with Different Spacing</h3>
<div class="table-wrapper">
  <h4>Border Collapse</h4>
  <table class="collapse-table">
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
    </tr>
  </table>
</div>
<div class="table-wrapper">
  <h4>Border Separate</h4>
  <table class="separate-table">
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
    </tr>
  </table>
</div>

Live Preview

Loading preview...

Cell Alignment

Align content within table cells

While HTML align attribute still works, it's better to use CSS text-align and vertical-align properties for modern websites.

Cell Alignment

Aligning content in table cells

Frontend

<h3>Table with Data Attributes</h3>
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th data-type="number">Price</th>
      <th data-type="number">Quantity</th>
      <th data-type="number">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td align="right">$999</td>
      <td align="center">2</td>
      <td align="right">$1998</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td align="right">$25</td>
      <td align="center">5</td>
      <td align="right">$125</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td align="right">$75</td>
      <td align="center">3</td>
      <td align="right">$225</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Totals</th>
      <td colspan="2" align="right">10 items</td>
      <td align="right">$2348</td>
    </tr>
  </tfoot>
</table>

Live Preview

Loading preview...

Best Practices

✅ Do This

✓ Use CSS for styling
✓ Use colspan/rowspan sparingly
✓ Align with text-align CSS
✓ Test with colspan/rowspan
✓ Keep tables simple

❌ Avoid This

✗ Don't use align attribute
✗ Don't overuse colspan/rowspan
✗ Don't use table layout
✗ Don't mix old and new attrs
✗ Don't skip responsive design

Modern Recommendation

Use CSS Grid or Flexbox for complex layouts instead of nested tables or excessive colspan/rowspan attributes.

Previous Topic

Table Structure

<thead>, <tbody>, <tfoot>, <colgroup>, <col> for organized tables.

Next Topic

Table Captions

<caption> element for table titles and descriptions.

Ask a Question

Have a question about Table Attributes? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Tables

Table Attributes

Learn to use attributes to control table appearance and behavior

Find videos you like?

Save to resource drawer for future reference!

Table Attributes

Control table layout and cell behavior

HTML table attributes allow you to control how cells span across rows and columns, and how content is aligned within cells. Common attributes include colspan,rowspan, andalign.

Modern Approach

While HTML attributes exist, it's often better to use CSS for styling and alignment. HTML5 focuses on semantic meaning.

Essential Table Attributes

Important attributes for table cells

colspan

Merge cells horizontally across columns

<td colspan="2">Spans 2 columns</td>

rowspan

Merge cells vertically across rows

<td rowspan="2">Spans 2 rows</td>

align

Align content (left, center, right)

<td align="center">Centered</td>

width

Set column width (use CSS instead)

<td width="200">Wide cell</td>

Colspan and Rowspan

Merge cells across multiple columns and rows

colspan - Horizontal Merge

Combines multiple columns into one cell

<td colspan="3">
  Spans 3 columns
</td>

rowspan - Vertical Merge

Combines multiple rows into one cell

<td rowspan="2">
  Spans 2 rows
</td>

Merged Cells Example

Using colspan and rowspan for complex tables

Frontend

<h3>Schedule with Merged Cells</h3>
<table>
  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9:00 AM</td>
      <td colspan="2">Team Meeting</td>
      <td>Workshop</td>
    </tr>
    <tr>
      <td>1:00 PM</td>
      <td rowspan="2">Project Work</td>
      <td>Review</td>
      <td rowspan="2">Training</td>
    </tr>
    <tr>
      <td>3:00 PM</td>
      <td>Lunch Break</td>
    </tr>
  </tbody>
</table>

Live Preview

Loading preview...

Border Collapse and Spacing

Control how table borders appear

border-collapse: collapse

Borders merge into single lines

table {
  border-collapse: collapse;
}

border-collapse: separate

Space between cell borders

table {
  border-collapse: separate;
  border-spacing: 8px;
}

Spacing Styles

Compare border-collapse and border-spacing

Frontend

<h3>Tables with Different Spacing</h3>
<div class="table-wrapper">
  <h4>Border Collapse</h4>
  <table class="collapse-table">
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
    </tr>
  </table>
</div>
<div class="table-wrapper">
  <h4>Border Separate</h4>
  <table class="separate-table">
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
    </tr>
  </table>
</div>

Live Preview

Loading preview...

Cell Alignment

Align content within table cells

While HTML align attribute still works, it's better to use CSS text-align and vertical-align properties for modern websites.

Cell Alignment

Aligning content in table cells

Frontend

<h3>Table with Data Attributes</h3>
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th data-type="number">Price</th>
      <th data-type="number">Quantity</th>
      <th data-type="number">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td align="right">$999</td>
      <td align="center">2</td>
      <td align="right">$1998</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td align="right">$25</td>
      <td align="center">5</td>
      <td align="right">$125</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td align="right">$75</td>
      <td align="center">3</td>
      <td align="right">$225</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Totals</th>
      <td colspan="2" align="right">10 items</td>
      <td align="right">$2348</td>
    </tr>
  </tfoot>
</table>

Live Preview

Loading preview...

Best Practices

✅ Do This

✓ Use CSS for styling
✓ Use colspan/rowspan sparingly
✓ Align with text-align CSS
✓ Test with colspan/rowspan
✓ Keep tables simple

❌ Avoid This

✗ Don't use align attribute
✗ Don't overuse colspan/rowspan
✗ Don't use table layout
✗ Don't mix old and new attrs
✗ Don't skip responsive design

Modern Recommendation

Use CSS Grid or Flexbox for complex layouts instead of nested tables or excessive colspan/rowspan attributes.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Table Structure

Table Captions

HTML Code Editor

Building Your Learning Module...

Table Attributes

Modern Approach

colspan

rowspan

align

width

colspan - Horizontal Merge

rowspan - Vertical Merge

Merged Cells Example

border-collapse: collapse

border-collapse: separate

Spacing Styles

Cell Alignment

✅ Do This

❌ Avoid This

Modern Recommendation

Table Structure

Table Captions

HTML Code Editor

Table Attributes

Modern Approach

colspan

rowspan

align

width

colspan - Horizontal Merge

rowspan - Vertical Merge

Merged Cells Example

border-collapse: collapse

border-collapse: separate

Spacing Styles

Cell Alignment

✅ Do This

❌ Avoid This

Modern Recommendation