On Day 2, you will build two essential HTML structures: a data table and a navigation region. Use <table> only when information has meaningful row-and-column relationships; use <nav> to identify a major group of navigation links. HTML supplies the meaning, while CSS controls colors, spacing, borders, direction, and page layout.
By the end, you will have a compact learning schedule with correctly associated headers, a navigation list that works with or without styling, and a clear rule for deciding when a table is appropriate.
As an Amazon Associate I earn from qualifying purchases.
What you are building
Start with a small schedule. Each row represents one module, and each column represents the same kind of fact for every module. That repeated relationship is what makes the information tabular.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute<table>
<caption>Day 2 learning schedule</caption>
<thead>
<tr>
<th scope='col'>Module</th>
<th scope='col'>Topic</th>
<th scope='col'>Minutes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table structure</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Header relationships</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>Navigation semantics</td>
<td>15</td>
</tr>
</tbody>
</table>The browser can display this without CSS. More importantly, the markup tells assistive technology which cells are headings and which are data. A person scanning the page sees a grid; a screen-reader user can understand the same relationships from the elements and attributes.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
When an HTML table is the right tool
Use a table for data that can be understood by comparing values across rows and columns: a timetable, an invoice, exam results, a product-specification matrix, or a set of measurements. The column meaning remains consistent from one row to the next, and each data cell belongs to one or more headers.
Do not use a table merely to position a logo, create columns, or force unrelated blocks to line up. Tables used for visual page layout make the document harder to adapt to small screens and obscure the page’s real structure. CSS Grid, Flexbox, margins, and padding are the layout tools; <table> is the data tool.
| Question | Use a table | Use CSS layout |
|---|---|---|
| Do rows and columns represent repeated categories of data? | Yes. A schedule or set of results has meaningful relationships. | No. Separate content blocks do not become data just because they are aligned. |
| Does a visitor need to compare values? | Yes. Headers explain what each value means. | No. Arrange the content with Flexbox or Grid. |
| Would the structure still make sense if visual styling disappeared? | Yes. The data remains understandable in reading order. | Use semantic sections and CSS rather than table markup. |
Why layout tables cause problems
Visual positioning alone does not expose relationships to assistive technology. A cell made bold with CSS is not automatically a header, and an item placed at the top of a column is not automatically connected to the values below it. When the content is genuinely tabular, structural markup removes that ambiguity.
Understand the table building blocks
<table>
This is the container for the complete data grid. Put the rows and cells inside it; do not use it as a generic wrapper for page sections.
<caption>
A caption gives the table a short name, such as “Day 2 learning schedule.” It is associated with that table rather than being an unrelated heading elsewhere on the page. Write a caption when a user benefits from knowing the table’s purpose before exploring its cells.
<tr>, <th>, and <td>
<tr> creates a row. Use <th> for a header cell and <td> for an ordinary data cell. The difference is semantic, not merely visual: browsers usually bold and center a <th> by default, but its important job is to identify a heading in the accessibility tree.
<thead>, <tbody>, and <tfoot>
These elements group rows into a header, body, and footer section. They make the source easier to read, give CSS clear targets, and can help browsers handle long tables. They do not, by themselves, create all of the header relationships required for an accessible table. You still need correct <th> cells and, where appropriate, scope or explicit associations.
Make simple header relationships explicit
For a straightforward grid with one header row, add scope='col' to each column heading. It tells the user agent that the heading describes cells below it in the same column.
<th scope='col'>Topic</th>
<th scope='col'>Minutes</th>If the first cell in each row labels that row, use scope='row' instead.
<tr>
<th scope='row'>Module 1</th>
<td>Table structure</td>
<td>25</td>
</tr>A browser can often infer a simple horizontal or vertical pattern, but adding scope documents your intent and makes the direction unambiguous. Never replace these semantics with a bold <td> or a styled paragraph.
Complex tables: use id and headers
Some grids have grouped headings, such as sales figures divided into “First quarter” and “Second quarter,” with subcolumns beneath each group. If a cell is related to several headers and the pattern is not obvious from its position, give each header a unique id. Then list the relevant IDs in the data cell’s headers attribute.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →<table>
<tr>
<th id='quarter' colspan='2'>Quarter 1</th>
</tr>
<tr>
<th id='sales' scope='col'>Sales</th>
<th id='returns' scope='col'>Returns</th>
</tr>
<tr>
<th scope='row'>January</th>
<td headers='quarter sales'>120</td>
<td headers='quarter returns'>4</td>
</tr>
</table>Use this technique only when the relationships really are complex. For a normal one-row header, scope is clearer and easier to maintain.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Style the table with CSS, not extra markup
Keep the HTML focused on meaning, then add a stylesheet for presentation.
table {
border-collapse: collapse;
width: 100%;
}
caption {
font-weight: 700;
margin-bottom: 0.5rem;
text-align: left;
}
th,
td {
border: 1px solid #b8c0cc;
padding: 0.6rem;
text-align: left;
}
thead th {
background: #eef2f7;
}
CSS can change borders, spacing, colors, alignment, and responsive behavior without changing the data relationships. On a narrow screen, consider allowing horizontal scrolling around a wide table or redesigning the presentation with a separate small-screen view; do not remove headers simply to make the grid fit.
Add a semantic navigation bar
Navigation is a major group of links that helps people move within the current page or to other documents. Wrap that group in <nav> so browsers, assistive technology, and developers can identify its purpose.
<nav aria-label='Tutorial sections'>
<ul>
<li><a href='#tables'>HTML tables</a></li>
<li><a href='#headers'>Header relationships</a></li>
<li><a href='#navigation'>Navigation</a></li>
</ul>
</nav>The unordered list expresses that these are a set of links. The fragment identifiers in the example point to headings or sections with matching id values, such as <section id='tables'>. A link to another document would use its normal relative or absolute URL instead.
<nav> is not every link
Do not wrap every isolated link in a navigation landmark. A “Read the full terms” link in a paragraph, a related article link, or a download link usually does not need <nav>. Reserve it for a substantial navigation block: the primary site menu, a table of contents, pagination controls, or a set of course-section links.
Use more than one navigation region when purposes differ
A page may contain separate navigation sections. For example, the site-wide menu and an in-article table of contents serve different purposes. Give each region an accessible name when there is more than one, using a visible heading or an appropriate aria-label such as “Primary” and “On this page.” Distinct labels let a screen-reader user tell the landmarks apart.
| Navigation design | When it fits | Implementation note |
|---|---|---|
| One navigation region | A short page with one main set of destinations. | Use one <nav> and a list of links. |
| Separate regions | A site menu and an independent table of contents or pagination. | Use multiple <nav> elements with distinct labels. |
| Ordinary contextual links | Links embedded in explanatory text or a single call to action. | Use an <a> element without a navigation landmark. |
Turn the navigation list into a horizontal bar with CSS
The HTML remains the same whether the menu appears vertically, horizontally, as a sidebar, or as a compact mobile control. CSS determines that visual arrangement.
Free tools Windows power users keep installed
One-click scans. No signup required.
nav ul {
display: flex;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
nav a {
color: #174a8b;
text-decoration: none;
}
nav a:hover,
nav a:focus-visible {
text-decoration: underline;
}
Keep keyboard focus visible and make link text understandable without relying on color alone. If you later add a menu button for small screens, ensure it has a real button element, an accurate expanded state, and a usable keyboard interaction; changing the display with CSS does not replace those behaviors.
Quick Recap
Build the Day 2 page in a reliable order
- Write the content first. List the modules or facts you want to compare. If there is no consistent row-and-column relationship, choose headings and lists instead of a table.
- Create the table skeleton. Add
<table>, a concise<caption>, one header row, and the body rows. - Mark every heading. Replace visual bolding with
<th>. Addscope='col'for column headings andscope='row'for row labels. - Group rows when useful. Use
<thead>,<tbody>, and, when totals or other closing information exist,<tfoot>. - Check complexity. If a data cell belongs to multiple non-obvious headings, assign header IDs and connect them with
headers. - Add the navigation landmark. Put the major link list inside
<nav>and label separate navigation regions so their purposes are distinguishable. - Style after the semantics work. Use CSS for borders, spacing, colors, horizontal alignment, sidebars, and responsive layout. Do not add table markup to solve a positioning problem.
- Test without CSS. Disable the stylesheet or inspect the source. The table should still read in a sensible order, headings should identify their data, and every navigation link should remain available.
Common mistakes and quick fixes
- Using a table for page layout: Replace the layout table with semantic sections and CSS Grid or Flexbox.
- Making a data cell look like a heading: Change the cell from
<td>to<th>and add the appropriate scope. - Assuming row groups create accessibility automatically: Keep the groups, but verify the actual header cells and their associations.
- Adding
<nav>around every link: Keep the landmark for major navigation blocks and leave contextual links in their normal content. - Using vague link text such as “Click here”: Name the destination, for example “HTML table lesson,” so the link remains meaningful when read out of context.
- Creating duplicate navigation landmarks with identical labels: Give each separate region a distinct visible heading or accessible label.
A practical checklist
- The table represents information, not visual positioning.
- A caption identifies the table when its purpose is not obvious.
- Every column or row heading uses
<th>, not a styled<td>. scopestates the direction of simple header relationships.- Complex multi-header cells use matching
idandheadersvalues. - Row groups are used for organization and styling, not as a substitute for header semantics.
- Major link groups are inside
<nav>; ordinary inline links are not. - Different navigation purposes have distinguishable labels.
- CSS controls appearance while the HTML remains meaningful without it.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
