Page Layout & Navigation :- 

1) Creating navigational aids — what & why

What: UI elements that help users move through a site (nav bars, breadcrumbs, skip links, pagination, sitemaps).
Why: Improve discoverability, accessibility, and UX.

Common types

• Primary nav bar — top or side menu linking major sections.

• Breadcrumbs — show current location in hierarchy.

• Skip link — for keyboard/screen reader users to jump to main content.

• Pagination / next-prev links — for multi-page content.

• Sitemap / footer links — secondary navigation.

Example — skip link + site nav skeleton

<a class="skip-link" href="#main">Skip to main content</a>

<header>
  <nav aria-label="Primary">
    <ul class="primary-nav">
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main id="main">
  <!-- page content -->
</main>

<style>
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { position: static; left: 0; background:#000; color:#fff; padding:8px; z-index:100; }
.primary-nav { list-style:none; padding:0; margin:0; display:flex; gap:12px; }
.primary-nav a { text-decoration:none; padding:6px 8px; display:inline-block; }
</style>

2) Creating a text-based navigation bar (HTML + CSS)

Structure: semantic <nav> containing a list (<ul><li><a>). Mark the current page with aria-current="page".

Step-by-step

1. Create <nav aria-label="Primary">.

2. Inside add <ul> and <li> links.

3. Use CSS (flexbox) to lay out horizontally and style hover/focus states.

4. Add responsive behavior (stack or collapse).

Example — horizontal nav with active state

<nav aria-label="Primary">
  <ul class="nav">
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<style>
.nav { list-style:none; padding:0; margin:0; display:flex; gap:16px; align-items:center; }
.nav a { display:inline-block; padding:8px 12px; text-decoration:none; border-radius:6px; }
.nav a:focus, .nav a:hover { background:#f0f0f0; outline:none; }
.nav a[aria-current="page"] { font-weight:700; background:#e6f0ff; }
@media (max-width:600px) {
  .nav { flex-direction:column; align-items:flex-start; }
}
</style>

Accessibility tips

• aria-label on <nav> when needed.

• Use aria-current="page" for current link.

• Ensure focus styles are visible.

3) Creating a graphical navigation bar

When to use: icons or images as menu items (e.g., social icons, product categories). Provide accessible labels.

Rules

• Put text alternative on the image: if image conveys text/meaning, use alt. If the image is decorative, set alt="" and provide aria-label on the <a>.

• Prefer inline SVG for styling & accessibility.

Example — graphical nav using inline SVG icons

<nav aria-label="Primary">
  <ul class="icon-nav">
    <li><a href="/" aria-label="Home"><svg width="18" height="18" viewBox="0 0 24 24" role="img" aria-hidden="true"><!-- svg path --></svg></a></li>
    <li><a href="/search" aria-label="Search"><img src="search-icon.png" alt="Search icon"></a></li>
    <li><a href="/cart" aria-label="Cart"><svg><!-- cart icon --></svg></a></li>
  </ul>
</nav>

<style>
.icon-nav { display:flex; gap:12px; list-style:none; padding:0; margin:0; }
.icon-nav a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:6px; }
.icon-nav a:focus, .icon-nav a:hover { background:#f3f3f3; }
.icon-nav img { width:24px; height:24px; display:block; }
</style>

4) Creating an image map

What it is: an image with multiple clickable regions (<map> + <area>). Useful when different parts of an image link to different pages.

Elements

• <img src="..." usemap="#mapname">

• <map name="mapname"> containing <area shape="rect|circle|poly" coords="..." href="...">

Example (static coordinates)

<img src="world-800x400.jpg" alt="World map" usemap="#worldmap" width="800" height="400">

<map name="worldmap">
  <!-- rectangle: left, top, right, bottom -->
  <area shape="rect" coords="50,120,180,220" href="/region1" alt="Region 1">
  <!-- circle: centerX, centerY, radius -->
  <area shape="circle" coords="400,160,60" href="/region2" alt="Region 2">
  <!-- polygon: x1,y1, x2,y2, x3,y3, ... -->
  <area shape="poly" coords="520,60,570,90,600,40,560,30" href="/region3" alt="Region 3">
</map>

How coords are computed

• Coords are pixel values relative to the image’s intrinsic size (not CSS size). For an 800×400 image, a rect 50,120,180,220 maps to those pixels.

Responsive image maps

• Native <map> uses pixel coords — not responsive.

• Options:

  • Use SVG with <a> or <path> clickable regions (recommended for responsive).

  • Or use lightweight JS to scale coords when the image resizes.

Small JS to scale coords (basic approach)

<script>
function resizeMap(img, mapName) {
  const map = document.querySelector('map[name="'+mapName+'"]');
  const originalWidth = img.naturalWidth;
  const scale = img.clientWidth / originalWidth;
  map.querySelectorAll('area').forEach(area => {
    const original = area.dataset.coords; // store original coords
    if (!original) return;
    const coords = original.split(',').map(Number);
    const scaled = coords.map(c => Math.round(c * scale));
    area.coords = scaled.join(',');
  });
}

document.addEventListener('DOMContentLoaded', () => {
  const img = document.querySelector('img[usemap="#worldmap"]');
  document.querySelectorAll('map[name="worldmap"] area').forEach(a => {
    if(!a.dataset.coords) a.dataset.coords = a.coords; // store original
  });
  window.addEventListener('resize', () => resizeMap(img, 'worldmap'));
  resizeMap(img, 'worldmap'); // initial
});
</script>

Recommendation: For new projects prefer SVG (scales naturally and supports links and accessibility).

5) Creating tables — structure and semantic tags

HTML elements

• <table> — the table container.

• <caption> — title/description of table.

• <thead>, <tbody>, <tfoot> — logical grouping.

• <tr> — table row.

• <th> — header cell (use scope="col" or scope="row").

• <td> — data cell.

Basic example

<table>
  <caption>Monthly Sales</caption>
  <thead>
    <tr><th scope="col">Month</th><th scope="col">Sales</th><th scope="col">Notes</th></tr>
  </thead>
  <tbody>
    <tr><td>Jan</td><td>₹45,000</td><td>Launch month</td></tr>
    <tr><td>Feb</td><td>₹37,500</td><td>Sale campaign</td></tr>
  </tbody>
</table>

6) Specifying the size of a table

Options

• Use CSS (recommended): width, max-width, table-layout.

• Legacy width attribute on <table> is deprecated in HTML5.

Important: table-layout

• table-layout: auto — browser decides column widths based on content; can reflow.

• table-layout: fixed — faster and predictable; columns honor widths set on <col> or first row.

Examples

<!-- responsive percentage width -->
<table class="full-table">
  ...
</table>

<style>
.full-table { width: 100%; max-width: 1200px; margin:0 auto; border-collapse: collapse; }
</style>

<!-- fixed layout for predictable column widths -->
<table class="fixed">
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>
  ...
</table>

<style>
.fixed { width:100%; table-layout: fixed; }
.fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

7) Specifying the width of a column

Methods

1. <colgroup><col style="width:..."> — semantic & straightforward.

2. Set width on the first row’s <th>/td.

3. CSS selectors: table td:nth-child(2) { width: 200px; }.

Example using <colgroup>

<table>
  <colgroup>
    <col style="width: 50%;">
    <col style="width: 25%;">
    <col style="width: 25%;">
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Tip: combine with table-layout: fixed for stable behavior.

8) Merging table cells (colspan, rowspan)

• colspan="N" merges N columns horizontally.

• rowspan="N" merges N rows vertically.

Example — timetable with merged header and merged row

<table border="1" style="border-collapse:collapse">
  <tr>
    <th rowspan="2">Time</th>
    <th colspan="2">Monday</th>
    <th colspan="2">Tuesday</th>
  </tr>
  <tr>
    <th>AM</th><th>PM</th><th>AM</th><th>PM</th>
  </tr>
  <tr>
    <td>9:00</td>
    <td colspan="2">Math Workshop</td>
    <td>English</td>
    <td>Free</td>
  </tr>
</table>

Notes

• When using rowspan, ensure later rows account for the merged cell (structure must line up).

• Good for headers, multi-row labels, calendars, schedules.

9) Formatting tables — borders

HTML attribute (legacy)

• <table border="1"> works but is presentational and deprecated in modern HTML.

Preferred: CSS

• border, border-collapse, border-spacing.

Examples

<!-- Collapsed borders (classic look) -->
<table class="b-collapse">
  ...
</table>

<style>
.b-collapse { border-collapse: collapse; width:100%; }
.b-collapse th, .b-collapse td { border: 1px solid #ccc; padding: 8px; }
.b-collapse th { background:#f7f7f7; text-align:left; }
</style>

<!-- Separate borders with spacing -->
<table class="b-separate">
  ...
</table>

<style>
.b-separate { border-collapse: separate; border-spacing: 8px; }
.b-separate td { border: 1px solid #ddd; padding: 12px; background:#fff; }
</style>

Applying borders by attributes vs styles

• Attributes: <table border="1"> — quick demo only.

• Styles: flexible, themeable, recommended for production.

10) Changing cell padding, spacing, and alignment

Cell padding & spacing

• Legacy: cellpadding and cellspacing attributes (deprecated).

• Use CSS instead:

  • padding on td, th → inner space.

  • border-spacing (with border-collapse: separate) → space between cells.

Example

<table class="styled">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<style>
.styled { border-collapse: separate; border-spacing: 10px; }
.styled td, .styled th { padding: 14px 12px; }
</style>

Horizontal alignment

• Use text-align (left, center, right, justify).

• Example: numeric columns right aligned.

.styled td.numeric { text-align: right; }

Vertical alignment

• Use vertical-align on td/th (top | middle | bottom | baseline).

• Example:

<td style="vertical-align: middle;">Centered vertically</td>

Centering content both horizontally & vertically inside a cell

• Option 1: text-align:center; vertical-align:middle;

• Option 2: make cell a flex container (modern approach):

td.center {
  display:flex;
  align-items:center; /* vertical */
  justify-content:center; /* horizontal */
}

Example table with alignment & padding

<table class="align-demo">
  <tr>
    <th>Item</th>
    <th class="numeric">Price</th>
    <th>Notes</th>
  </tr>
  <tr>
    <td>Tea</td>
    <td class="numeric">₹45.00</td>
    <td style="vertical-align: middle;">Best seller</td>
  </tr>
</table>

<style>
.align-demo td, .align-demo th { padding:10px 12px; }
.align-demo .numeric { text-align: right; }
.align-demo th { background:#fafafa; }
</style>

11) Putting tables & nav together — a practical example

A footer with a small sitemap (tableless is preferred, but example shows a compact grid).

<footer>
  <nav aria-label="Footer">
    <ul class="footer-links">
      <li><a href="/about">About</a></li>
      <li><a href="/careers">Careers</a></li>
      <li><a href="/help">Help</a></li>
    </ul>
  </nav>

  <table class="contact">
    <caption>Contact office hours</caption>
    <thead>
      <tr><th>Day</th><th>Open</th><th>Close</th></tr>
    </thead>
    <tbody>
      <tr><td>Mon–Fri</td><td>09:00</td><td>18:00</td></tr>
      <tr><td>Sat</td><td>10:00</td><td>14:00</td></tr>
    </tbody>
  </table>
</footer>

<style>
.footer-links { display:flex; gap:12px; list-style:none; padding:0; margin:0 0 12px 0; }
.contact { border-collapse:collapse; width:320px; }
.contact th, .contact td { border:1px solid #ddd; padding:8px; }
</style>

Best practices & accessibility (quick checklist)

• Use semantic <nav>, <header>, <main>, <footer>.

• For navigation: aria-label on <nav> as needed; visible focus states; aria-current="page" for the active link.

• For tables:

  • Use <caption> to describe table.

  • Use <th scope="col"> / scope="row" for headers.

  • Keep tables for tabular data only (not for layout).

  • Avoid presentational HTML attributes; use CSS.

• For image maps: prefer SVG if you need responsive clickable regions.

• For responsive tables: consider wrapping in a horizontally scrollable container or reflowing into cards on small screens.

• For performance: avoid huge images inside nav or tables; use optimized assets and loading="lazy" where appropriate.

Quick cheat-sheet (copyable)

• Horizontal nav: display:flex; gap:...

• Center table: margin:0 auto; width:90%

• Fixed table layout: table-layout: fixed;

• Column widths: <colgroup><col style="width: ..."></colgroup>

• Merge cells: <td colspan="3"> or <td rowspan="2">

• Cell padding: td, th { padding: 10px; }

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

• Borders: td, th { border: 1px solid #ccc; } and table { border-collapse: collapse; }

• Vertical align: td { vertical-align: middle; }

• Image map: <img usemap="#m"><map name="m"><area shape coords href alt></map>

I