HTML · Quick Reference

Lesson 15 — Tables Basics Cheat Sheet

HTML

In one line: Tables are for tabular data — information that has a meaningful row/column relationship. They are not for page layout (that's what CSS Grid and Flexbox are for).

Key Ideas

1When to Use Tables. Tables are for tabular data — information that has a meaningful row/column relationship. They are not for page layout (that's what CSS Grid and Flexbox are for).

2Core Table Elements. A basic HTML table uses four elements: <table>, <tr>, <th>, and <td>. Think of it like a spreadsheet — rows contain cells.

3Your First Table HTMLBasic table structureCopy <table> <caption>Web Programming Languages Comparison</caption>  <tr> <th>Language</th> <th>Type</th> <th>Use Case</th> </tr>  <tr> <td>HTML</td> <td>Markup</td> <td>Structure</td> </tr> <tr> <td>CSS</td> <td>Stylesheet</td> <td>Styling</td> </tr> <tr> <td>JavaScript</td> <td>Scripting</td> <td>Interactivity</td> </tr> </table> Rendered with CSS, that code produces: Web Programming Languages Comparison LanguageTypeUse Case HTMLMarkupStructure CSSStylesheetStyling JavaScriptScriptingInteractivity Section 4 th vs td — Semantic Difference. Using <th> for header cells isn't just visual — it adds semantic meaning that screen readers use to associate headers with data cells. Screen readers say "Langua...

4Basic Table Styling. By default HTML tables have no borders or padding. Use CSS border-collapse: collapse to merge borders, and padding on cells for readable spacing.

Code Examples

<table>
  <caption>Web Programming Languages Comparison</caption>

  <!-- Header row -->
  <tr>
    <th>Language</th>
    <th>Type</th>
    <th>Use Case</th>
  </tr>

  <!-...

<table>
  <!-- Column headers (th in first row) -->
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>

  <!-- Row with row header in first cell -->
  <tr>
...

table {
  width: 100%;
  border-collapse: collapse;   /* merge double borders */
  font-size: .9rem;
}

th, td {
  padding: .6rem 1rem;
  text-align: left;
  border: 1px solid #e2e8f0;
}

th {
  background: #1e3260;
  color: white;
  font-wei...