1/8
REC
1
8

HTML Tables Data Organization Structured Content

Part 10: Mastering Table Structure & Layout

Instructor

Simegnew Destew

Senior Full-Stack Developer

Part 10: HTML Tables

Table Basics

Understanding Table Structure
📊

What are HTML Tables?

Structured data organization

HTML tables allow you to arrange data into rows and columns. They're perfect for displaying structured information like schedules, pricing, and comparisons.

<!-- Basic table structure -->
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
🏗️

Table Elements

Building blocks of tables

<table>

Container for the entire table

<tr>

Table row - horizontal container

<th>

Table header - bold and centered

<td>

Table data - regular cell content

Name Age City
John 25 New York
Sarah 30 London

Table Structure Rules:

  • <table> wraps the entire table structure
  • <tr> defines each row (table row)
  • <th> defines header cells (bold and centered by default)
  • <td> defines regular data cells
  • Rows are built horizontally, cells vertically within rows
  • Always include proper headers for accessibility
Part 10: HTML Tables

Table Attributes

Controlling Table Layout & Appearance
🔀

colspan

Merges cells horizontally

<td colspan="2">Merged Cells</td>
<th colspan="3">Wide Header</th>
Merged Header
Cell 1 Cell 2

Usage:

  • Number specifies how many columns to span
  • Use in <td> or <th> elements
  • Great for section headers
⬇️

rowspan

Merges cells vertically

<td rowspan="2">Vertical Merge</td>
<th rowspan="3">Tall Header</th>
Vertical Header Data A
Data B

Usage:

  • Number specifies how many rows to span
  • Use in <td> or <th> elements
  • Perfect for categories
🎨

bgcolor

Sets background color (deprecated)

<td bgcolor="yellow">Yellow Cell</td>
<tr bgcolor="#f0f0f0">Gray Row</tr>
<table bgcolor="lightblue">Blue Table</table>
Light Blue Yellow

Note:

  • Deprecated in HTML5
  • Use CSS instead: background-color
  • Still works in browsers
📐

align

Horizontal alignment (deprecated)

<td align="center">Centered</td>
<tr align="right">Right Row</tr>
<table align="center">Centered Table</table>
Left Center Right

Values:

  • left, center, right
  • Deprecated in HTML5
  • Use CSS: text-align

Spacing & Padding Attributes:

📏

cellpadding

Space between cell content and borders

<table cellpadding="10">
  <tr><td>Padded Cell</td></tr>
</table>
More Padding Around Content
  • Creates internal spacing
  • Deprecated - use CSS padding
  • Improves readability
🔄

cellspacing

Space between table cells

<table cellspacing="5">
  <tr><td>Spaced Cells</td></tr>
</table>
More Space Between Cells
  • Creates gaps between cells
  • Deprecated - use CSS border-spacing
  • Affects entire table
🎯

border

Table border width

<table border="1">
  <tr><td>Bordered Table</td></tr>
</table>
Thicker Borders
  • Sets border width in pixels
  • 0 = no border, 1+ = border width
  • Deprecated - use CSS border
Part 10: HTML Tables

Interactive Table Builder

Create and Customize Tables in Real-Time
Table Configuration
<!-- Configure your table here --> <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Product</th> <th>Price</th> <th>Stock</th> </tr> <tr> <td>Laptop</td> <td>$999</td> <td>15</td> </tr> <tr> <td>Mouse</td> <td>$25</td> <td>50</td> </tr> </table>
Live Preview
1px
5px
0px

How to Use:

  1. Set the number of rows and columns
  2. Adjust border thickness
  3. Control cell padding and spacing
  4. Choose whether to include header row
  5. Click "Generate Table" to see changes
  6. Copy the generated HTML code for your projects
Part 10: HTML Tables

Practical Table Examples

Real-World Table Implementations

Pricing Table

Perfect for showcasing product plans and features

Feature Basic Pro Enterprise
Storage 5GB 50GB Unlimited
Users 1 5 Unlimited
Support Email Priority 24/7 Phone
Price $9.99 $29.99 $99.99
<table class="pricing-table">
  <tr>
    <th>Feature</th>
    <th>Basic</th>
    <th>Pro</th>
    <th>Enterprise</th>
  </tr>
  <tr>
    <td>Storage</td>
    <td>5GB</td>
    <td>50GB</td>
    <td>Unlimited</td>
  </tr>
</table>

Class Timetable

Ideal for schedules and time-based data

Time Monday Tuesday Wednesday
9:00-10:00 Math Science English
10:00-11:00 History Art Workshop Geography
11:00-12:00 Physics Chemistry
12:00-1:00 Lunch Break
<table class="timetable">
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <td class="time-slot">9:00-10:00</td>
    <td>Math</td>
    <td>Science</td>
  </tr>
  <tr>
    <td class="time-slot">10:00-11:00</td>
    <td>History</td>
    <td rowspan="2">Art Workshop</td>
  </tr>
</table>

Advanced Table Features:

📋

Employee Directory

ID Name Department Salary
001 John Smith Engineering $85,000
002 Sarah Johnson Marketing $65,000
🏪

Product Inventory

Product ID Name Category Quantity
P1001 Wireless Mouse Electronics 150
P1002 Mechanical Keyboard Electronics 75
📊

Survey Results

Question Yes No Undecided
Like our product? 75% 15% 10%
Would recommend? 80% 12% 8%
Part 10: HTML Tables

Modern Table Styling

CSS for Beautiful, Responsive Tables

Styled Table with CSS

Modern tables use CSS instead of deprecated HTML attributes for styling:

Product Category Price Rating
Wireless Earbuds Electronics $79.99 ★★★★☆
Smart Watch Wearables $199.99 ★★★★★
Tablet Computers $329.99 ★★★★☆
Smartphone Mobile $699.99 ★★★★★
<style>
.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.styled-table th {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-weight: 600;
  padding: 0.75rem;
  text-align: left;
}

.styled-table tr:nth-child(even) {
  background: #f8f9fa;
}

.styled-table tr:hover {
  background: #e3f2fd;
}
</style>

CSS Alternatives to Deprecated Attributes:

🎨

Background & Colors

/* Instead of bgcolor */
background-color: #f0f8ff;

/* Header background */
th {
  background: #4a90e2;
  color: white;
}

/* Zebra striping */
tr:nth-child(even) {
  background: #f8f9fa;
}
📐

Spacing & Alignment

/* Instead of cellpadding */
td, th {
  padding: 0.75rem;
}

/* Instead of cellspacing */
table {
  border-spacing: 5px;
}

/* Instead of align */
td {
  text-align: center;
}
🎯

Borders & Effects

/* Instead of border */
table {
  border: 1px solid #ddd;
}

/* Cell borders */
td, th {
  border: 1px solid #e1e1e1;
}

/* Hover effects */
tr:hover {
  background: #e3f2fd;
  transition: background 0.3s;
}

Making Tables Responsive:

For mobile devices, tables can be challenging. Here are some solutions:

/* Horizontal scroll for small screens */
.responsive-table {
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

/* Stack rows on mobile */
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
}
Part 10: HTML Tables

Best Practices

Creating Effective & Accessible Tables
♿

Use Proper Headers

Always use <th> for header cells and scope attribute for accessibility

📱

Responsive Design

Ensure tables work on mobile devices with horizontal scroll or stacked layout

🎨

CSS for Styling

Use CSS instead of deprecated HTML attributes for colors, spacing, and borders

📊

Semantic Structure

Use <thead>, <tbody>, <tfoot> for better structure and printing

🎯

Clear Purpose

Only use tables for tabular data, not for page layout

⚡

Performance

Avoid extremely large tables; consider pagination for big datasets

Accessibility Features:

🔤

Scope Attribute

Helps screen readers understand table structure

<th scope="col">Product Name</th>
<th scope="col">Price</th>
<th scope="row">Total</th>
  • scope="col" for column headers
  • scope="row" for row headers
  • Essential for complex tables
🏷️

Caption & Summary

Provides context for table content

<table>
  <caption>Monthly Sales Report</caption>
  <tr>...</tr>
</table>
  • <caption> provides table title
  • Helps users understand table purpose
  • Important for data tables
📝

Headers Attribute

Links data cells to their headers

<th id="name">Product Name</th>
<td headers="name">Wireless Mouse</td>
  • Use for complex tables with multiple headers
  • Links <td> to <th> via id/headers
  • Advanced accessibility feature

Do's and Don'ts:

✅ Do This

Use for Tabular Data

Tables for data, CSS for layout

Include Headers

Always use <th> for header cells

Make Responsive

Ensure tables work on mobile

Use CSS Styling

Modern CSS instead of deprecated attributes

❌ Don't Do This

Use for Page Layout

Tables shouldn't control page structure

Nest Tables Deeply

Avoid complex table nesting

Use Deprecated Attributes

Avoid bgcolor, align, etc.

Ignore Accessibility

Always consider screen readers

COMPLETE

Tables Mastered!

You've Learned HTML Tables

What We Covered in Part 10:

📊

Table Basics

table, tr, th, td elements

🔀

Cell Merging

colspan and rowspan attributes

🎨

Styling Attributes

bgcolor, align, border

📏

Spacing

cellpadding and cellspacing

💵

Practical Examples

Pricing tables, timetables

🎯

Best Practices

Accessibility and modern CSS

Practice Exercise:

Create a Complete Course Schedule

Build a comprehensive weekly timetable with:

  • Header row with days of the week
  • Time slots in the first column
  • Merged cells for double-period classes
  • Different background colors for subjects
  • Lunch break spanning all columns
  • Proper spacing and borders

Key Takeaways:

Semantic Structure

Tables are for tabular data, not page layout

Modern Styling

Use CSS instead of deprecated HTML attributes

Accessibility First

Always include proper headers and structure

Responsive Design

Ensure tables work on all devices

Next: Learn about creating forms, input fields, buttons, and user interaction

Presenter Notes - Video 10

Intro Slide: Emphasize that tables are essential for displaying structured data but should not be used for page layout. They're perfect for schedules, pricing, and data comparison.
Table Basics: Demonstrate the basic table structure. Show how rows and cells work together to create the grid layout.
Table Attributes: Show practical examples of colspan and rowspan. Emphasize that many styling attributes are deprecated but still work.
Interactive Builder: Let students experiment with different table configurations. Show how attributes affect table appearance.
Practical Examples: Demonstrate real-world table uses. Show how to create pricing tables and schedules with merged cells.
Modern Styling: Emphasize using CSS instead of deprecated attributes. Show beautiful, accessible table designs.
Best Practices: Focus on accessibility and semantic structure. Show how to make tables work on mobile devices.
Recap: Summarize key table concepts. Assign the timetable exercise. Preview forms for next video.
🎓 HTML Tables - DevVoltz Academy 🌐 Website: www.devvoltz.com 📱 Telegram: @devvoltz 📸 Instagram: @devvoltz 👥 Facebook: facebook.com/devvoltz 💻 Next: HTML Forms & Input
//replace