HTML Tables & Data Display - Concepts

The web's transformation from a text-based document system into the rich multimedia platform we know today was driven by HTML's evolving media embedding capabilities. Images, video, audio, and embedded third-party content are now central to virtually every professional website — from e-commerce products to educational platforms to social networks. HTML5 brought standardized, plugin-free media elements that work natively in all modern browsers, eliminating the security vulnerabilities and performance problems of the Flash era. Mastering HTML media elements is essential for building modern web experiences that are rich, accessible, and performant. The <img> element is the workhorse of web imagery. Key to professional image handling is understanding the performance implications of images — they are typically the largest assets on any page and the primary cause of slow page loads. The loading="lazy" attribute defers image loading until the image is about to enter the viewport, dramatically reducing initial page load time for image-heavy pages. The width and height attributes should always be specified to tell the browser the image dimensions before it loads, allowing it to reserve space in the layout and prevent Cumulative Layout Shift — a Core Web Vitals metric that Google uses as a search ranking factor. The srcset attribute provides multiple image files at different resolutions, letting the browser choose the most appropriate one for the user's device pixel density. The <picture> element enables art direction — serving fundamentally different images to different screen sizes, not just different resolutions of the same image. A wide landscape photograph cropped to show the full scene works on desktop but the important subject becomes tiny on mobile. The <picture> element lets you specify a closely cropped portrait-oriented image for narrow screens and the wide version for wider screens. Each <source> child targets a specific media condition, and the browser picks the first matching source. The <img> inside <picture> is the fallback for browsers that don't support <picture> and provides the required alt text. Combining <picture> with WebP or AVIF formats via type="image/webp" delivers significantly smaller file sizes to supporting browsers while falling back to JPEG or PNG for older ones. The <video> and <audio> elements replaced the need for browser plugins for media playback. Key attributes for professional video implementations include: controls (display native playback controls), autoplay with muted (required for autoplay to work in most browsers — sound is blocked unless user has interacted), preload="metadata" (load only the first few frames and duration, not the full file), poster (thumbnail image shown before play), and loop (restart on completion). Multiple <source> children inside <video> provide format fallbacks: MP4/H.264 works everywhere, WebM/VP9 provides better compression in supporting browsers. The <track kind="subtitles"> element adds subtitles and captions from a .vtt file — required for WCAG accessibility compliance.

In this section, we cover the fundamental aspects of html tables & data display. You'll learn core concepts, see real-world examples, and understand how to apply them in your projects.