Interactive HTML Tables Tutorial

Part A — Table Skeleton

Mark as complete

A1) Understanding Table Structure

Goal: Build the basic structure of your HTML element reference table.

Tables organize information into rows and columns. Before you start coding, think about what you're organizing: element names, their purposes, and example contexts.

📚 Research checkpoint: Read MDN: HTML Table Basics through the "Adding headers" section.

Key concepts to understand:

<table> — The container for your entire table
<tr> — Table row (each row needs one)
<th> — Table header cell (for column headers)
<td> — Table data cell (for actual content)

💡 Think about it: What's the difference between <th> and <td>? Header cells tell you what the data means, while data cells contain the actual information.

A2) Build Your First Table

Your task: In the CodePen workspace on the right, create your table structure:

Inside the  comment, create a <table> element
Add three rows using <tr> (table row)
In the first row, create three header cells using <th> for: "Element", "Purpose", "Example Use"
In the next two rows, create three data cells using <td> for two HTML elements of your choice

Example structure:

<table>
  <tr>
    <th>Element</th>
    <th>Purpose</th>
    <th>Example Use</th>
  </tr>
  <tr>
    <td>&lt;p&gt;</td>
    <td>Paragraph text</td>
    <td>Body copy, descriptions</td>
  </tr>
  <tr>
    <td>&lt;h1&gt;</td>
    <td>Main heading</td>
    <td>Page title, section headers</td>
  </tr>
</table>

📝 Note about HTML entities: To display HTML tags like <p> in your table without the browser interpreting them as actual tags, use HTML entities: < for < and > for >

✅ Checkpoint A

Table has at least 3 rows (1 header, 2 data)
First row uses <th> tags
Following rows use <td> tags
Table displays in the preview

🤔 Reflect (2–3 sentences):

In your own words: Why does HTML distinguish between header cells and data cells? What would happen if you used only <td> for everything?

Part B — Semantic Sections

Mark as complete

B1) Add `<thead>` and `<tbody>`

Goal: Add semantic structure with <thead> and <tbody> to help browsers and assistive technology understand your table.

Right now your table works, but it's just a flat list of rows. Let's give it meaningful sections.

📚 Research checkpoint: Read MDN: Continue through the HTML Table Basics article (stop before "Allowing columns and rows to span").

Your task:

Wrap your header row (the one with <th> tags) in <thead> tags
Wrap your data rows (the ones with <td> tags) in <tbody> tags

Your structure should now look like:

<table>
  <thead>
    <tr>
      <th>Element</th>
      <th>Purpose</th>
      <th>Example Use</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&lt;p&gt;</td>
      <td>Paragraph text</td>
      <td>Body copy, descriptions</td>
    </tr>
    <!-- more rows here -->
  </tbody>
</table>

💡 Why does this matter? Separating headers from data helps screen readers understand your table structure. It also makes it easier to style different parts of the table separately with CSS.

B2) Add More Content

Add 5-8 more rows to your <tbody> with additional HTML elements. Use the sample content provided below to fill your table quickly.

✅ Checkpoint B

Table has <thead> wrapper around header row
Table has <tbody> wrapper around data rows
At least 7 total data rows in <tbody>

🤔 Reflect (2–3 sentences):

Why might separating headers from data matter for accessibility or printing? What does a screen reader gain from this structure?

Part C — Scope and Context

Mark as complete

C1) Add the `scope` Attribute

Goal: Use the scope attribute to explicitly tell assistive technology what each header describes.

Your headers are in <th> tags, which is good. But we can be even more explicit about what they describe.

📚 Research checkpoint: Read MDN: Advanced features and accessibility.

Your task: Add scope="col" to each <th> in your header row.

Example:

<thead>
  <tr>
    <th scope="col">Element</th>
    <th scope="col">Purpose</th>
    <th scope="col">Example Use</th>
  </tr>
</thead>

💡 What does scope="col" mean? It tells screen readers "this header describes a column." There's also scope="row" for row headers. This helps people using assistive technology understand the relationship between headers and data.

✅ Checkpoint C

All column headers have scope="col"
Table still displays correctly

🤔 Reflect (2–3 sentences):

How does scope help someone using a screen reader navigate your table? Try to imagine hearing this table read aloud.

Part D — Visual Styling

Mark as complete

D1) Understanding Table Styling

Goal: Make your table readable and professional with CSS.

Unstyled tables are hard to scan. Let's add visual structure: borders, spacing, and alternating row colors.

📚 Research checkpoint: Read MDN: Styling tables.

Key CSS properties you'll use:

border-collapse: collapse; — Removes double borders between cells
border — Adds borders to table, th, and td
padding — Adds space inside cells
background-color — Colors for headers and alternating rows
:nth-child(even) or :nth-child(odd) — Selects alternating rows

D2) Style Your Table

Your task: In the CSS panel of your CodePen, add styles to make your table readable. Replace the comment placeholders with actual CSS.

Add border-collapse: collapse; and width: 100%; to your table
Add borders to th and td elements
Add padding to cells for breathing room
Style the header row with background color and bold text
Add alternating row colors (zebra striping)

CSS Solution:

/* Student table styles */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 2rem 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

thead th {
  background-color: #667eea;
  color: white;
  font-weight: 600;
}

tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

tbody tr:hover {
  background-color: #e0e7ff;
}

📝 Customize it: Feel free to change colors! Try different shades for the header and row backgrounds to match your style.

✅ Checkpoint D

Table has visible borders
Cells have padding
Header row has distinct styling
Rows have alternating colors
No double borders (border-collapse working)

🤔 Reflect (2–3 sentences):

What makes a table easy to scan? Which styling choices had the biggest impact on readability?

Part E — Stretch Goals

Mark as complete

E1) Add a Caption

Goal: Add a caption and explore advanced features.

Your task: Add a <caption> element as the first child of your <table> (right after the opening <table> tag).

Example:

<table>
  <caption>Common HTML Elements Reference</caption>
  <thead>
    <!-- ... -->
  </thead>
  <!-- ... -->
</table>

Style your caption with CSS:

caption {
  caption-side: top;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1e293b;
}

💡 Why captions matter: Captions provide context for your table. They're especially helpful for accessibility—screen readers announce the caption before reading the table content.

E2) Add a Footer (Optional)

Add a <tfoot> with a note about your sources or last updated date.

Example:

<table>
  <caption>Common HTML Elements Reference</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <td colspan="3">Source: MDN Web Docs, 2024</td>
    </tr>
  </tfoot>
</table>

📝 Note about colspan: The colspan="3" attribute makes this cell span across all three columns. This is useful for footer notes that apply to the entire table.

Footer Styling:

tfoot td {
  background-color: #f1f5f9;
  font-size: 0.875rem;
  font-style: italic;
  color: #64748b;
  text-align: center;
}

E3) Explore on Your Own

Continue experimenting in your CodePen:

Try adding more HTML elements to your reference table
Experiment with different color schemes
Add :hover effects for better interactivity
Research responsive table techniques — what happens when your table is wider than a mobile screen?
Try using rowspan to group related elements

💡 Challenge yourself: Can you categorize your elements? Try adding row headers with scope="row" to group elements by type (Text Elements, Structure Elements, Media Elements, etc.).

🤔 Final Reflection (2–3 sentences):

When should you use a table vs. a list? What kinds of data belong in tables?

Part F — Save Your Reflections

F1) Copy reflections to your CodePen

Save your reflections directly in your CodePen HTML so they're preserved with your work.

📋 Steps:

Click the "Copy All Reflections" button below
Go to your CodePen HTML editor
Scroll to the very bottom of your HTML (after the closing </table> tag)
Paste your reflections
Your reflections are now saved as an HTML comment in your code!

💡 Why save reflections in HTML? By pasting them as an HTML comment at the bottom of your code, they're permanently saved with your project. When you submit your CodePen link, your instructor can view both your code and reflections in one place.

📤 Submission

What to submit to Canvas

Your CodePen link — Make sure your pen is saved and public
That's it! Your reflections are already in your HTML at the bottom

⚠️ Before submitting:

Verify your CodePen is saved (not showing "unsaved changes")
Test that your CodePen link opens correctly in a new browser tab
Confirm your reflections are pasted at the bottom of your HTML
Check that your table displays correctly with all styling

Final Checklist

Table has <thead> and <tbody> sections
Header cells use <th> with scope="col"
At least 7 data rows with HTML elements
Table has borders, padding, and proper styling
Header row stands out visually
Rows have alternating colors for readability
Table has a caption (if you completed Part E)
All reflections are saved in your HTML

Grading Rubric (10 pts)

3 pts — Table structure (correct use of table, thead, tbody, tr, th, td)
2 pts — Semantic HTML (scope attributes, proper header/data distinction)
3 pts — Visual styling (borders, padding, colors, readability)
1 pt — Content completeness (at least 7 HTML elements with accurate descriptions)
1 pt — Reflection quality (clear, specific, shows understanding)

What You'll Build

Part A — Table Skeleton

A1) Understanding Table Structure

A2) Build Your First Table

Hints:

✅ Checkpoint A

🤔 Reflect (2–3 sentences):

Part B — Semantic Sections

B1) Add `<thead>` and `<tbody>`

B2) Add More Content

Sample HTML Elements to Add:

✅ Checkpoint B

🤔 Reflect (2–3 sentences):

Part C — Scope and Context

C1) Add the `scope` Attribute

Hints:

✅ Checkpoint C

🤔 Reflect (2–3 sentences):

Part D — Visual Styling

D1) Understanding Table Styling

D2) Style Your Table

CSS Solution:

✅ Checkpoint D

🤔 Reflect (2–3 sentences):

Part E — Stretch Goals

E1) Add a Caption

E2) Add a Footer (Optional)

Footer Styling:

E3) Explore on Your Own

🤔 Final Reflection (2–3 sentences):

Part F — Save Your Reflections

F1) Copy reflections to your CodePen

📤 Submission

What to submit to Canvas

Final Checklist

Grading Rubric (10 pts)

Your Workspace

Interactive HTML Tables Tutorial

What You'll Build

Part A — Table Skeleton

A1) Understanding Table Structure

A2) Build Your First Table

Hints:

✅ Checkpoint A

🤔 Reflect (2–3 sentences):

Part B — Semantic Sections

B1) Add <thead> and <tbody>

B2) Add More Content

Sample HTML Elements to Add:

✅ Checkpoint B

🤔 Reflect (2–3 sentences):

Part C — Scope and Context

C1) Add the scope Attribute

Hints:

✅ Checkpoint C

🤔 Reflect (2–3 sentences):

Part D — Visual Styling

D1) Understanding Table Styling

D2) Style Your Table

CSS Solution:

✅ Checkpoint D

🤔 Reflect (2–3 sentences):

Part E — Stretch Goals

E1) Add a Caption

E2) Add a Footer (Optional)

Footer Styling:

E3) Explore on Your Own

🤔 Final Reflection (2–3 sentences):

Part F — Save Your Reflections

F1) Copy reflections to your CodePen

📤 Submission

What to submit to Canvas

Final Checklist

Grading Rubric (10 pts)

Your Workspace

B1) Add `<thead>` and `<tbody>`

C1) Add the `scope` Attribute