Prompt it

Create a beginner-friendly responsive data table using semantic HTML and dependency-free CSS. Show three recent orders with a visible caption, a thead with four column headers using scope="col", and a tbody with order ID, customer, status, and total. Place the table inside a clearly labelled, keyboard-focusable scrolling region so it remains usable at 320px without crushing the columns or causing page-level horizontal overflow. Give the scrolling region a high-contrast :focus-visible outline and a small visible hint that it scrolls horizontally. Keep table headings and values readable, alternate row backgrounds subtly, and use badges whose meaning is also written as text rather than colour alone. Use system fonts, no JavaScript, no frameworks, no remote assets, and no motion; if you add any animation or transition, provide a reduced motion fallback with prefers-reduced-motion. Return complete copy-ready HTML and CSS and briefly explain when horizontal scrolling is preferable to hiding important columns.