[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:styling-lists-and-tables-css":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,394,418,454,486,518,550,582,610,638],{"id":155,"name":366,"slug":367,"order_index":368,"topics":369},"UI Components","ui-components",0,[370,374,378,382,386,390],{"id":371,"title":372,"slug":373,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":375,"title":376,"slug":377,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":379,"title":380,"slug":381,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":383,"title":384,"slug":385,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":387,"title":388,"slug":389,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":391,"title":392,"slug":393,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":101,"name":395,"slug":396,"order_index":368,"topics":397},"CSS Fundamentals & Setup","css-fundamentals-setup",[398,402,406,410,414],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":407,"title":408,"slug":409,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":411,"title":412,"slug":413,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":415,"title":416,"slug":417,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":105,"name":419,"slug":420,"order_index":368,"topics":421},"Selectors & the Cascade","selectors-the-cascade",[422,426,430,434,438,442,446,450],{"id":423,"title":424,"slug":425,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":427,"title":428,"slug":429,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":431,"title":432,"slug":433,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":435,"title":436,"slug":437,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":439,"title":440,"slug":441,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":443,"title":444,"slug":445,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":447,"title":448,"slug":449,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":451,"title":452,"slug":453,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":455,"slug":456,"order_index":368,"topics":457},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[458,462,466,470,474,478,482],{"id":459,"title":460,"slug":461,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":463,"title":464,"slug":465,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":467,"title":468,"slug":469,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":471,"title":472,"slug":473,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":475,"title":476,"slug":477,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":479,"title":480,"slug":481,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":483,"title":484,"slug":485,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":487,"slug":488,"order_index":368,"topics":489},"Box Model & Spacing","box-model-spacing",[490,494,498,502,506,510,514],{"id":491,"title":492,"slug":493,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":495,"title":496,"slug":497,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":499,"title":500,"slug":501,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":503,"title":504,"slug":505,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":507,"title":508,"slug":509,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":511,"title":512,"slug":513,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":515,"title":516,"slug":517,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":519,"slug":520,"order_index":368,"topics":521},"Typography & Text","typography-text",[522,526,530,534,538,542,546],{"id":523,"title":524,"slug":525,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":527,"title":528,"slug":529,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":531,"title":532,"slug":533,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":535,"title":536,"slug":537,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":539,"title":540,"slug":541,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":543,"title":544,"slug":545,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":547,"title":548,"slug":549,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":551,"slug":552,"order_index":368,"topics":553},"Display, Position & Layout Basics","display-position-layout-basics",[554,558,562,566,570,574,578],{"id":555,"title":556,"slug":557,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":559,"title":560,"slug":561,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":563,"title":564,"slug":565,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":567,"title":568,"slug":569,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":571,"title":572,"slug":573,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":575,"title":576,"slug":577,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":579,"title":580,"slug":581,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":583,"slug":584,"order_index":368,"topics":585},"The Modern CSS Toolkit","the-modern-css-toolkit",[586,590,594,598,602,606],{"id":587,"title":588,"slug":589,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":591,"title":592,"slug":593,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":595,"title":596,"slug":597,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":599,"title":600,"slug":601,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":603,"title":604,"slug":605,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":607,"title":608,"slug":609,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":611,"slug":612,"order_index":368,"topics":613},"Responsive Design","responsive-design",[614,618,622,626,630,634],{"id":615,"title":616,"slug":617,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":619,"title":620,"slug":621,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":623,"title":624,"slug":625,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":627,"title":628,"slug":629,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":631,"title":632,"slug":633,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":635,"title":636,"slug":637,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":639,"slug":640,"order_index":368,"topics":641},"Transitions & Animation","transitions-animation",[642,646,650,654,658,662,666],{"id":643,"title":644,"slug":645,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":647,"title":648,"slug":649,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":651,"title":652,"slug":653,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":655,"title":656,"slug":657,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":659,"title":660,"slug":661,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":663,"title":664,"slug":665,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":667,"title":668,"slug":669,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":671},{"id":543,"title":544,"slug":545,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":77,"cornerstone":52,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":758,"quiz":784,"exercises":788,"published_at":5,"updated_at":801,"prev":802,"next":803},"\u003Ch2 id=\"styling-lists-and-tables-in-css\">Styling Lists and Tables in CSS\u003C\u002Fh2>\u003Cp>Lists and tables organise information. Lists group related items such as menus, steps and features. Tables present data in rows and columns. Learning \u003Cstrong>styling lists and tables in CSS\u003C\u002Fstrong> helps you build navigation bars, breadcrumbs, step-by-step guides, pricing tables, dashboards and reports that are clean, readable and accessible. In this lesson you will cover list markers, custom counters, horizontal lists, table borders, zebra stripes, hover rows, sticky headers and responsive tables, with live editable code.\u003C\u002Fp>\u003Cp>\u003Cstrong>Focus keyword:\u003C\u002Fstrong> styling lists and tables in CSS. \u003Cstrong>Related keywords:\u003C\u002Fstrong> list-style-type, ::marker, CSS counters, border-collapse, border-spacing, caption-side, zebra striping, nth-child, sticky table header, responsive table CSS, tabular-nums, table-layout fixed.\u003C\u002Fp>\u003Ch2 id=\"part-1-styling-lists\">Part 1: Styling Lists\u003C\u002Fh2>\u003Ch3 id=\"1-list-types-in-html\">1. List Types in HTML\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode><ul>\u003C\u002Fcode>: unordered list, shown with bullets by default.\u003C\u002Fli>\u003Cli>\u003Ccode><ol>\u003C\u002Fcode>: ordered list, shown with numbers by default.\u003C\u002Fli>\u003Cli>\u003Ccode><dl>\u003C\u002Fcode> with \u003Ccode><dt>\u003C\u002Fcode> and \u003Ccode><dd>\u003C\u002Fcode>: description list for term and definition pairs.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"2-the-list-style-properties\">2. The list-style Properties\u003C\u002Fh3>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Property\u003C\u002Fth>\u003Cth>What it does\u003C\u002Fth>\u003Cth>Example values\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>list-style-type\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Sets the marker shape or numbering system\u003C\u002Ftd>\u003Ctd>disc, circle, square, decimal, lower-alpha, upper-roman, none\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>list-style-position\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Puts the marker outside or inside the content box\u003C\u002Ftd>\u003Ctd>outside, inside\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>list-style-image\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Uses an image as the marker\u003C\u002Ftd>\u003Ctd>url('icon.svg')\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>list-style\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Shorthand for the three above\u003C\u002Ftd>\u003Ctd>square inside, none\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>To remove bullets completely, use \u003Ccode>list-style: none; padding: 0; margin: 0;\u003C\u002Fcode>. Note that some screen readers (notably VoiceOver with Safari) stop announcing an element as a list when list-style is none, so add \u003Ccode>role='list'\u003C\u002Fcode> to the element if the list semantics matter.\u003C\u002Fp>\u003Ch3 id=\"3-styling-markers-with-marker\">3. Styling Markers with ::marker\u003C\u002Fh3>\u003Cp>The \u003Ccode>::marker\u003C\u002Fcode> pseudo-element targets the bullet or number of a list item. You can change its \u003Ccode>color\u003C\u002Fcode>, \u003Ccode>font-size\u003C\u002Fcode>, \u003Ccode>font-weight\u003C\u002Fcode>, and even its \u003Ccode>content\u003C\u002Fcode>. Only a limited set of properties is supported, so for heavy customisation use counters or \u003Ccode>::before\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"4-css-counters-for-custom-numbering\">4. CSS Counters for Custom Numbering\u003C\u002Fh3>\u003Cp>CSS counters let you build numbered steps, nested outlines (1.1, 1.2) and styled number badges. The three building blocks are \u003Ccode>counter-reset\u003C\u002Fcode> (create the counter), \u003Ccode>counter-increment\u003C\u002Fcode> (increase it on each item) and \u003Ccode>counter()\u003C\u002Fcode> (display the value inside \u003Ccode>content\u003C\u002Fcode>).\u003C\u002Fp>\u003Ch3 id=\"5-horizontal-lists-and-navigation\">5. Horizontal Lists and Navigation\u003C\u002Fh3>\u003Cp>Most navigation menus are lists. Turn a vertical list into a horizontal one with \u003Ccode>display: flex\u003C\u002Fcode> and \u003Ccode>gap\u003C\u002Fcode>. Breadcrumbs can add separators using the adjacent sibling selector: \u003Ccode>li + li::before { content: '\u002F'; }\u003C\u002Fcode>. Always wrap navigation lists in a \u003Ccode><nav>\u003C\u002Fcode> with an \u003Ccode>aria-label\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"part-2-styling-tables\">Part 2: Styling Tables\u003C\u002Fh2>\u003Ch3 id=\"1-semantic-table-structure\">1. Semantic Table Structure\u003C\u002Fh3>\u003Cp>A well-built table uses \u003Ccode><caption>\u003C\u002Fcode>, \u003Ccode><thead>\u003C\u002Fcode>, \u003Ccode><tbody>\u003C\u002Fcode>, \u003Ccode><tfoot>\u003C\u002Fcode>, \u003Ccode><th scope='col'>\u003C\u002Fcode> and \u003Ccode><th scope='row'>\u003C\u002Fcode>. These elements give screen readers the context to announce each cell together with its headers. Use tables only for tabular data, never for page layout.\u003C\u002Fp>\u003Ch3 id=\"2-table-properties-reference\">2. Table Properties Reference\u003C\u002Fh3>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Property\u003C\u002Fth>\u003Cth>Purpose\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>border-collapse\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>collapse merges neighbouring borders into one, separate keeps them apart\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>border-spacing\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Gap between cells (only when separate)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>caption-side\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Places the caption at the top or bottom\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>table-layout\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>auto sizes by content, fixed uses equal, predictable column widths\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>empty-cells\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Show or hide borders of empty cells\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>vertical-align\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Aligns content inside cells (top, middle, bottom)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>font-variant-numeric: tabular-nums\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Makes digits equal width so numbers line up in columns\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch3 id=\"3-zebra-striping-and-row-hover\">3. Zebra Striping and Row Hover\u003C\u002Fh3>\u003Cp>Alternating row colours help the eye follow a row across wide tables. Use \u003Ccode>tbody tr:nth-child(even)\u003C\u002Fcode> for stripes and \u003Ccode>tbody tr:hover\u003C\u002Fcode> for a highlight. Keep the contrast subtle, and make sure text contrast stays above 4.5:1 on every row colour.\u003C\u002Fp>\u003Ch3 id=\"4-aligning-numbers\">4. Aligning Numbers\u003C\u002Fh3>\u003Cp>Right-align numeric columns and apply \u003Ccode>font-variant-numeric: tabular-nums\u003C\u002Fcode> so decimals line up. Left-align text columns. Consistent alignment makes comparisons much faster.\u003C\u002Fp>\u003Ch3 id=\"5-sticky-headers\">5. Sticky Headers\u003C\u002Fh3>\u003Cp>For long tables, keep the header visible while scrolling. Wrap the table in a container with \u003Ccode>overflow: auto\u003C\u002Fcode> and a fixed \u003Ccode>max-height\u003C\u002Fcode>, then set \u003Ccode>position: sticky; top: 0;\u003C\u002Fcode> on the \u003Ccode><th>\u003C\u002Fcode> cells in the header. Give the sticky cells a solid background so rows do not show through.\u003C\u002Fp>\u003Ch3 id=\"6-responsive-tables\">6. Responsive Tables\u003C\u002Fh3>\u003Cp>Tables are naturally wide, so on small screens you have two common strategies:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Horizontal scroll:\u003C\u002Fstrong> wrap the table in a div with \u003Ccode>overflow-x: auto\u003C\u002Fcode>. This is the simplest and keeps the structure intact.\u003C\u002Fli>\u003Cli>\u003Cstrong>Stacked cards:\u003C\u002Fstrong> at a small breakpoint, turn each row into a block and show the column name using \u003Ccode>content: attr(data-label)\u003C\u002Fcode> on \u003Ccode>td::before\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"accessibility-checklist\">Accessibility Checklist\u003C\u002Fh2>\u003Cul>\u003Cli>Add a \u003Ccode><caption>\u003C\u002Fcode> that describes the table.\u003C\u002Fli>\u003Cli>Use \u003Ccode><th>\u003C\u002Fcode> with \u003Ccode>scope\u003C\u002Fcode> for headers, not styled \u003Ccode><td>\u003C\u002Fcode> cells.\u003C\u002Fli>\u003Cli>Do not rely on colour alone to convey meaning inside cells.\u003C\u002Fli>\u003Cli>Keep the scroll container keyboard focusable with \u003Ccode>tabindex='0'\u003C\u002Fcode> when it scrolls.\u003C\u002Fli>\u003Cli>Keep lists as real lists so assistive technology announces the item count.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"trending-techniques-2026\">Trending Techniques (2026)\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>::marker with custom content\u003C\u002Fstrong> for branded bullets without extra markup.\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS counters and counter-style\u003C\u002Fstrong> for multi-level numbering and step wizards.\u003C\u002Fli>\u003Cli>\u003Cstrong>:has()\u003C\u002Fstrong> to highlight a row or list item based on its content, for example \u003Ccode>tr:has(input:checked)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>position: sticky\u003C\u002Fstrong> headers and first columns for data-heavy dashboards.\u003C\u002Fli>\u003Cli>\u003Cstrong>Container queries\u003C\u002Fstrong> for tables inside resizable cards.\u003C\u002Fli>\u003Cli>\u003Cstrong>tabular-nums\u003C\u002Fstrong> for finance and analytics UIs.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting \u003Ccode>border-collapse: collapse\u003C\u002Fcode> and getting double borders.\u003C\u002Fli>\u003Cli>Using tables for layout.\u003C\u002Fli>\u003Cli>Removing list bullets and losing list semantics without adding a role.\u003C\u002Fli>\u003Cli>Placing sticky headers without a background colour.\u003C\u002Fli>\u003Cli>Leaving wide tables unscrollable on mobile.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Lists and tables are essential building blocks. With \u003Ccode>list-style\u003C\u002Fcode>, \u003Ccode>::marker\u003C\u002Fcode> and counters you can style any list. With \u003Ccode>border-collapse\u003C\u002Fcode>, stripes, sticky headers and responsive patterns you can make data tables that are beautiful and usable on every device. Experiment with each live example below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; }\n  ul.square { list-style-type: square; }\n  ol.roman { list-style-type: upper-roman; }\n  ol.alpha { list-style-type: lower-alpha; }\n  ul.none { list-style: none; padding: 0; margin: 0; }\n  ul.inside { list-style-position: inside; background: #f1f5f9; padding: 0.5rem; }\n<\u002Fstyle>\n<h4>Square<\u002Fh4><ul class='square'><li>HTML<\u002Fli><li>CSS<\u002Fli><li>JavaScript<\u002Fli><\u002Ful>\n<h4>Roman<\u002Fh4><ol class='roman'><li>Plan<\u002Fli><li>Build<\u002Fli><li>Ship<\u002Fli><\u002Fol>\n<h4>Alpha<\u002Fh4><ol class='alpha'><li>Option A<\u002Fli><li>Option B<\u002Fli><\u002Fol>\n<h4>No bullets<\u002Fh4><ul class='none' role='list'><li>Clean item one<\u002Fli><li>Clean item two<\u002Fli><\u002Ful>\n<h4>Marker inside<\u002Fh4><ul class='inside'><li>Inside marker item<\u002Fli><li>Another item<\u002Fli><\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; font-size: 18px; }\n  ul.star li::marker { content: '★ '; color: #f59e0b; }\n  ul.check li::marker { content: '✔ '; color: #16a34a; }\n  ol.numbers li::marker { color: #2563eb; font-weight: 700; font-size: 1.1em; }\n  li { padding-left: 0.4rem; margin-bottom: 0.3rem; }\n<\u002Fstyle>\n<ul class='star'><li>Featured item<\u002Fli><li>Another featured item<\u002Fli><\u002Ful>\n<ul class='check'><li>Task complete<\u002Fli><li>Another done task<\u002Fli><\u002Ful>\n<ol class='numbers'><li>First step<\u002Fli><li>Second step<\u002Fli><li>Third step<\u002Fli><\u002Fol>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; max-width: 480px; }\n  ol.steps { counter-reset: step; list-style: none; padding: 0; }\n  ol.steps li {\n    counter-increment: step;\n    position: relative;\n    padding: 0.75rem 1rem 0.75rem 3.25rem;\n    margin-bottom: 0.5rem;\n    background: #f8fafc;\n    border-radius: 8px;\n  }\n  ol.steps li::before {\n    content: counter(step);\n    position: absolute;\n    left: 0.75rem;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 50%;\n    background: #2563eb;\n    color: #ffffff;\n    display: grid;\n    place-items: center;\n    font-weight: 700;\n    font-size: 0.9rem;\n  }\n<\u002Fstyle>\n<ol class='steps'>\n  <li>Create your account<\u002Fli>\n  <li>Choose a course<\u002Fli>\n  <li>Practice with live code<\u002Fli>\n  <li>Earn your certificate<\u002Fli>\n<\u002Fol>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.5rem; }\n  .crumbs li + li::before { content: '\u002F'; margin-right: 0.5rem; color: #94a3b8; }\n  .crumbs a { color: #2563eb; text-decoration: none; }\n  .crumbs a:hover { text-decoration: underline; }\n  .crumbs [aria-current='page'] { color: #475569; font-weight: 600; }\n  .tags { list-style: none; display: flex; gap: 0.5rem; padding: 0; }\n  .tags li { background: #e0e7ff; color: #3730a3; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; }\n<\u002Fstyle>\n<nav aria-label='Breadcrumb'>\n  <ol class='crumbs'>\n    <li><a href='#'>Home<\u002Fa><\u002Fli>\n    <li><a href='#'>Courses<\u002Fa><\u002Fli>\n    <li aria-current='page'>CSS Basics<\u002Fli>\n  <\u002Fol>\n<\u002Fnav>\n<ul class='tags' role='list'><li>HTML<\u002Fli><li>CSS<\u002Fli><li>Lists<\u002Fli><\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  table { border-collapse: collapse; width: 100%; }\n  caption { caption-side: top; text-align: left; font-weight: 700; padding: 0.5rem 0; }\n  th, td { border: 1px solid #cbd5e1; padding: 0.6rem 0.9rem; text-align: left; }\n  thead th { background: #1e293b; color: #ffffff; }\n  tfoot td { font-weight: 700; background: #f1f5f9; }\n  .num { text-align: right; font-variant-numeric: tabular-nums; }\n<\u002Fstyle>\n<table>\n  <caption>Monthly sales report<\u002Fcaption>\n  <thead>\n    <tr><th scope='col'>Product<\u002Fth><th scope='col'>Units<\u002Fth><th scope='col' class='num'>Revenue<\u002Fth><\u002Ftr>\n  <\u002Fthead>\n  <tbody>\n    <tr><th scope='row'>Keyboard<\u002Fth><td>120<\u002Ftd><td class='num'>$3,600.00<\u002Ftd><\u002Ftr>\n    <tr><th scope='row'>Mouse<\u002Fth><td>250<\u002Ftd><td class='num'>$4,250.50<\u002Ftd><\u002Ftr>\n    <tr><th scope='row'>Monitor<\u002Fth><td>45<\u002Ftd><td class='num'>$9,900.00<\u002Ftd><\u002Ftr>\n  <\u002Ftbody>\n  <tfoot>\n    <tr><td colspan='2'>Total<\u002Ftd><td class='num'>$17,750.50<\u002Ftd><\u002Ftr>\n  <\u002Ftfoot>\n<\u002Ftable>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  table { border-collapse: collapse; width: 100%; }\n  th, td { padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }\n  thead th { background: #0f172a; color: #ffffff; }\n  tbody tr:nth-child(even) { background: #f1f5f9; }\n  tbody tr { transition: background 0.15s ease; }\n  tbody tr:hover { background: #dbeafe; }\n  tbody th { font-weight: 600; }\n<\u002Fstyle>\n<table>\n  <thead><tr><th scope='col'>Name<\u002Fth><th scope='col'>Role<\u002Fth><th scope='col'>City<\u002Fth><\u002Ftr><\u002Fthead>\n  <tbody>\n    <tr><th scope='row'>Ayesha<\u002Fth><td>Designer<\u002Ftd><td>Karachi<\u002Ftd><\u002Ftr>\n    <tr><th scope='row'>Bilal<\u002Fth><td>Developer<\u002Ftd><td>Lahore<\u002Ftd><\u002Ftr>\n    <tr><th scope='row'>Sara<\u002Fth><td>Manager<\u002Ftd><td>Islamabad<\u002Ftd><\u002Ftr>\n    <tr><th scope='row'>Usman<\u002Fth><td>Analyst<\u002Ftd><td>Multan<\u002Ftd><\u002Ftr>\n  <\u002Ftbody>\n<\u002Ftable>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .wrap { max-height: 200px; overflow: auto; border: 1px solid #cbd5e1; border-radius: 8px; }\n  table { border-collapse: collapse; width: 100%; }\n  th, td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }\n  thead th { position: sticky; top: 0; background: #0f172a; color: #ffffff; }\n<\u002Fstyle>\n<div class='wrap' tabindex='0' role='region' aria-label='Scrollable student table'>\n  <table>\n    <thead><tr><th scope='col'>#<\u002Fth><th scope='col'>Student<\u002Fth><th scope='col'>Score<\u002Fth><\u002Ftr><\u002Fthead>\n    <tbody>\n      <tr><td>1<\u002Ftd><td>Ali<\u002Ftd><td>88<\u002Ftd><\u002Ftr>\n      <tr><td>2<\u002Ftd><td>Hina<\u002Ftd><td>92<\u002Ftd><\u002Ftr>\n      <tr><td>3<\u002Ftd><td>Omar<\u002Ftd><td>75<\u002Ftd><\u002Ftr>\n      <tr><td>4<\u002Ftd><td>Zara<\u002Ftd><td>81<\u002Ftd><\u002Ftr>\n      <tr><td>5<\u002Ftd><td>Hamza<\u002Ftd><td>69<\u002Ftd><\u002Ftr>\n      <tr><td>6<\u002Ftd><td>Noor<\u002Ftd><td>95<\u002Ftd><\u002Ftr>\n      <tr><td>7<\u002Ftd><td>Fatima<\u002Ftd><td>84<\u002Ftd><\u002Ftr>\n      <tr><td>8<\u002Ftd><td>Daniyal<\u002Ftd><td>77<\u002Ftd><\u002Ftr>\n      <tr><td>9<\u002Ftd><td>Iqra<\u002Ftd><td>90<\u002Ftd><\u002Ftr>\n      <tr><td>10<\u002Ftd><td>Saad<\u002Ftd><td>73<\u002Ftd><\u002Ftr>\n    <\u002Ftbody>\n  <\u002Ftable>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  table { border-collapse: collapse; width: 100%; }\n  th, td { padding: 0.7rem 1rem; text-align: left; border: 1px solid #cbd5e1; }\n  thead th { background: #1e293b; color: #ffffff; }\n  @media (max-width: 600px) {\n    table, thead, tbody, tr, th, td { display: block; }\n    thead { position: absolute; left: -9999px; }\n    tr { margin-bottom: 1rem; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }\n    td { display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid #e2e8f0; }\n    td::before { content: attr(data-label); font-weight: 700; margin-right: 1rem; }\n  }\n<\u002Fstyle>\n<p>Resize the preview narrower than 600px to see the stacked card layout.<\u002Fp>\n<table>\n  <thead><tr><th>Plan<\u002Fth><th>Price<\u002Fth><th>Storage<\u002Fth><\u002Ftr><\u002Fthead>\n  <tbody>\n    <tr><td data-label='Plan'>Basic<\u002Ftd><td data-label='Price'>$5<\u002Ftd><td data-label='Storage'>10 GB<\u002Ftd><\u002Ftr>\n    <tr><td data-label='Plan'>Pro<\u002Ftd><td data-label='Price'>$15<\u002Ftd><td data-label='Storage'>100 GB<\u002Ftd><\u002Ftr>\n    <tr><td data-label='Plan'>Team<\u002Ftd><td data-label='Price'>$30<\u002Ftd><td data-label='Storage'>1 TB<\u002Ftd><\u002Ftr>\n  <\u002Ftbody>\n<\u002Ftable>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":519,"slug":520},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fstyling-lists-and-tables-css","Styling Lists & Tables in CSS: Markers, Counters, Zebra","Learn styling lists and tables in CSS: ::marker, counters, border-collapse, zebra stripes, sticky headers and responsive tables with live code examples.",[686,690,714,742,746,750,754],{"id":687,"text":688,"level":12,"children":689},"styling-lists-and-tables-in-css","Styling Lists and Tables in CSS",[],{"id":691,"text":692,"level":12,"children":693},"part-1-styling-lists","Part 1: Styling Lists",[694,698,702,706,710],{"id":695,"text":696,"level":57,"children":697},"1-list-types-in-html","1. List Types in HTML",[],{"id":699,"text":700,"level":57,"children":701},"2-the-list-style-properties","2. The list-style Properties",[],{"id":703,"text":704,"level":57,"children":705},"3-styling-markers-with-marker","3. Styling Markers with ::marker",[],{"id":707,"text":708,"level":57,"children":709},"4-css-counters-for-custom-numbering","4. CSS Counters for Custom Numbering",[],{"id":711,"text":712,"level":57,"children":713},"5-horizontal-lists-and-navigation","5. Horizontal Lists and Navigation",[],{"id":715,"text":716,"level":12,"children":717},"part-2-styling-tables","Part 2: Styling Tables",[718,722,726,730,734,738],{"id":719,"text":720,"level":57,"children":721},"1-semantic-table-structure","1. Semantic Table Structure",[],{"id":723,"text":724,"level":57,"children":725},"2-table-properties-reference","2. Table Properties Reference",[],{"id":727,"text":728,"level":57,"children":729},"3-zebra-striping-and-row-hover","3. Zebra Striping and Row Hover",[],{"id":731,"text":732,"level":57,"children":733},"4-aligning-numbers","4. Aligning Numbers",[],{"id":735,"text":736,"level":57,"children":737},"5-sticky-headers","5. Sticky Headers",[],{"id":739,"text":740,"level":57,"children":741},"6-responsive-tables","6. Responsive Tables",[],{"id":743,"text":744,"level":12,"children":745},"accessibility-checklist","Accessibility Checklist",[],{"id":747,"text":748,"level":12,"children":749},"trending-techniques-2026","Trending Techniques (2026)",[],{"id":751,"text":752,"level":12,"children":753},"common-mistakes","Common Mistakes",[],{"id":755,"text":756,"level":12,"children":757},"summary","Summary",[],[759,763,766,769,772,775,778,781],{"id":760,"language":16,"code":761,"is_editable":762},383,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; }\n  ul.square { list-style-type: square; }\n  ol.roman { list-style-type: upper-roman; }\n  ol.alpha { list-style-type: lower-alpha; }\n  ul.none { list-style: none; padding: 0; margin: 0; }\n  ul.inside { list-style-position: inside; background: #f1f5f9; padding: 0.5rem; }\n\u003C\u002Fstyle>\n\u003Ch4>Square\u003C\u002Fh4>\u003Cul class='square'>\u003Cli>HTML\u003C\u002Fli>\u003Cli>CSS\u003C\u002Fli>\u003Cli>JavaScript\u003C\u002Fli>\u003C\u002Ful>\n\u003Ch4>Roman\u003C\u002Fh4>\u003Col class='roman'>\u003Cli>Plan\u003C\u002Fli>\u003Cli>Build\u003C\u002Fli>\u003Cli>Ship\u003C\u002Fli>\u003C\u002Fol>\n\u003Ch4>Alpha\u003C\u002Fh4>\u003Col class='alpha'>\u003Cli>Option A\u003C\u002Fli>\u003Cli>Option B\u003C\u002Fli>\u003C\u002Fol>\n\u003Ch4>No bullets\u003C\u002Fh4>\u003Cul class='none' role='list'>\u003Cli>Clean item one\u003C\u002Fli>\u003Cli>Clean item two\u003C\u002Fli>\u003C\u002Ful>\n\u003Ch4>Marker inside\u003C\u002Fh4>\u003Cul class='inside'>\u003Cli>Inside marker item\u003C\u002Fli>\u003Cli>Another item\u003C\u002Fli>\u003C\u002Ful>",true,{"id":764,"language":16,"code":765,"is_editable":762},384,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; font-size: 18px; }\n  ul.star li::marker { content: '★ '; color: #f59e0b; }\n  ul.check li::marker { content: '✔ '; color: #16a34a; }\n  ol.numbers li::marker { color: #2563eb; font-weight: 700; font-size: 1.1em; }\n  li { padding-left: 0.4rem; margin-bottom: 0.3rem; }\n\u003C\u002Fstyle>\n\u003Cul class='star'>\u003Cli>Featured item\u003C\u002Fli>\u003Cli>Another featured item\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul class='check'>\u003Cli>Task complete\u003C\u002Fli>\u003Cli>Another done task\u003C\u002Fli>\u003C\u002Ful>\n\u003Col class='numbers'>\u003Cli>First step\u003C\u002Fli>\u003Cli>Second step\u003C\u002Fli>\u003Cli>Third step\u003C\u002Fli>\u003C\u002Fol>",{"id":767,"language":16,"code":768,"is_editable":762},385,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; max-width: 480px; }\n  ol.steps { counter-reset: step; list-style: none; padding: 0; }\n  ol.steps li {\n    counter-increment: step;\n    position: relative;\n    padding: 0.75rem 1rem 0.75rem 3.25rem;\n    margin-bottom: 0.5rem;\n    background: #f8fafc;\n    border-radius: 8px;\n  }\n  ol.steps li::before {\n    content: counter(step);\n    position: absolute;\n    left: 0.75rem;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 50%;\n    background: #2563eb;\n    color: #ffffff;\n    display: grid;\n    place-items: center;\n    font-weight: 700;\n    font-size: 0.9rem;\n  }\n\u003C\u002Fstyle>\n\u003Col class='steps'>\n  \u003Cli>Create your account\u003C\u002Fli>\n  \u003Cli>Choose a course\u003C\u002Fli>\n  \u003Cli>Practice with live code\u003C\u002Fli>\n  \u003Cli>Earn your certificate\u003C\u002Fli>\n\u003C\u002Fol>",{"id":770,"language":16,"code":771,"is_editable":762},386,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.5rem; }\n  .crumbs li + li::before { content: '\u002F'; margin-right: 0.5rem; color: #94a3b8; }\n  .crumbs a { color: #2563eb; text-decoration: none; }\n  .crumbs a:hover { text-decoration: underline; }\n  .crumbs [aria-current='page'] { color: #475569; font-weight: 600; }\n  .tags { list-style: none; display: flex; gap: 0.5rem; padding: 0; }\n  .tags li { background: #e0e7ff; color: #3730a3; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; }\n\u003C\u002Fstyle>\n\u003Cnav aria-label='Breadcrumb'>\n  \u003Col class='crumbs'>\n    \u003Cli>\u003Ca href='#'>Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href='#'>Courses\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli aria-current='page'>CSS Basics\u003C\u002Fli>\n  \u003C\u002Fol>\n\u003C\u002Fnav>\n\u003Cul class='tags' role='list'>\u003Cli>HTML\u003C\u002Fli>\u003Cli>CSS\u003C\u002Fli>\u003Cli>Lists\u003C\u002Fli>\u003C\u002Ful>",{"id":773,"language":16,"code":774,"is_editable":762},387,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  table { border-collapse: collapse; width: 100%; }\n  caption { caption-side: top; text-align: left; font-weight: 700; padding: 0.5rem 0; }\n  th, td { border: 1px solid #cbd5e1; padding: 0.6rem 0.9rem; text-align: left; }\n  thead th { background: #1e293b; color: #ffffff; }\n  tfoot td { font-weight: 700; background: #f1f5f9; }\n  .num { text-align: right; font-variant-numeric: tabular-nums; }\n\u003C\u002Fstyle>\n\u003Ctable>\n  \u003Ccaption>Monthly sales report\u003C\u002Fcaption>\n  \u003Cthead>\n    \u003Ctr>\u003Cth scope='col'>Product\u003C\u002Fth>\u003Cth scope='col'>Units\u003C\u002Fth>\u003Cth scope='col' class='num'>Revenue\u003C\u002Fth>\u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\u003Cth scope='row'>Keyboard\u003C\u002Fth>\u003Ctd>120\u003C\u002Ftd>\u003Ctd class='num'>$3,600.00\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Cth scope='row'>Mouse\u003C\u002Fth>\u003Ctd>250\u003C\u002Ftd>\u003Ctd class='num'>$4,250.50\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Cth scope='row'>Monitor\u003C\u002Fth>\u003Ctd>45\u003C\u002Ftd>\u003Ctd class='num'>$9,900.00\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n  \u003Ctfoot>\n    \u003Ctr>\u003Ctd colspan='2'>Total\u003C\u002Ftd>\u003Ctd class='num'>$17,750.50\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftfoot>\n\u003C\u002Ftable>",{"id":776,"language":16,"code":777,"is_editable":762},388,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  table { border-collapse: collapse; width: 100%; }\n  th, td { padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }\n  thead th { background: #0f172a; color: #ffffff; }\n  tbody tr:nth-child(even) { background: #f1f5f9; }\n  tbody tr { transition: background 0.15s ease; }\n  tbody tr:hover { background: #dbeafe; }\n  tbody th { font-weight: 600; }\n\u003C\u002Fstyle>\n\u003Ctable>\n  \u003Cthead>\u003Ctr>\u003Cth scope='col'>Name\u003C\u002Fth>\u003Cth scope='col'>Role\u003C\u002Fth>\u003Cth scope='col'>City\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\u003Cth scope='row'>Ayesha\u003C\u002Fth>\u003Ctd>Designer\u003C\u002Ftd>\u003Ctd>Karachi\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Cth scope='row'>Bilal\u003C\u002Fth>\u003Ctd>Developer\u003C\u002Ftd>\u003Ctd>Lahore\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Cth scope='row'>Sara\u003C\u002Fth>\u003Ctd>Manager\u003C\u002Ftd>\u003Ctd>Islamabad\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Cth scope='row'>Usman\u003C\u002Fth>\u003Ctd>Analyst\u003C\u002Ftd>\u003Ctd>Multan\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>",{"id":779,"language":16,"code":780,"is_editable":762},389,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .wrap { max-height: 200px; overflow: auto; border: 1px solid #cbd5e1; border-radius: 8px; }\n  table { border-collapse: collapse; width: 100%; }\n  th, td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }\n  thead th { position: sticky; top: 0; background: #0f172a; color: #ffffff; }\n\u003C\u002Fstyle>\n\u003Cdiv class='wrap' tabindex='0' role='region' aria-label='Scrollable student table'>\n  \u003Ctable>\n    \u003Cthead>\u003Ctr>\u003Cth scope='col'>#\u003C\u002Fth>\u003Cth scope='col'>Student\u003C\u002Fth>\u003Cth scope='col'>Score\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n    \u003Ctbody>\n      \u003Ctr>\u003Ctd>1\u003C\u002Ftd>\u003Ctd>Ali\u003C\u002Ftd>\u003Ctd>88\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>2\u003C\u002Ftd>\u003Ctd>Hina\u003C\u002Ftd>\u003Ctd>92\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>3\u003C\u002Ftd>\u003Ctd>Omar\u003C\u002Ftd>\u003Ctd>75\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>4\u003C\u002Ftd>\u003Ctd>Zara\u003C\u002Ftd>\u003Ctd>81\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>5\u003C\u002Ftd>\u003Ctd>Hamza\u003C\u002Ftd>\u003Ctd>69\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>6\u003C\u002Ftd>\u003Ctd>Noor\u003C\u002Ftd>\u003Ctd>95\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>7\u003C\u002Ftd>\u003Ctd>Fatima\u003C\u002Ftd>\u003Ctd>84\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>8\u003C\u002Ftd>\u003Ctd>Daniyal\u003C\u002Ftd>\u003Ctd>77\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>9\u003C\u002Ftd>\u003Ctd>Iqra\u003C\u002Ftd>\u003Ctd>90\u003C\u002Ftd>\u003C\u002Ftr>\n      \u003Ctr>\u003Ctd>10\u003C\u002Ftd>\u003Ctd>Saad\u003C\u002Ftd>\u003Ctd>73\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>",{"id":782,"language":16,"code":783,"is_editable":762},390,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  table { border-collapse: collapse; width: 100%; }\n  th, td { padding: 0.7rem 1rem; text-align: left; border: 1px solid #cbd5e1; }\n  thead th { background: #1e293b; color: #ffffff; }\n  @media (max-width: 600px) {\n    table, thead, tbody, tr, th, td { display: block; }\n    thead { position: absolute; left: -9999px; }\n    tr { margin-bottom: 1rem; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }\n    td { display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid #e2e8f0; }\n    td::before { content: attr(data-label); font-weight: 700; margin-right: 1rem; }\n  }\n\u003C\u002Fstyle>\n\u003Cp>Resize the preview narrower than 600px to see the stacked card layout.\u003C\u002Fp>\n\u003Ctable>\n  \u003Cthead>\u003Ctr>\u003Cth>Plan\u003C\u002Fth>\u003Cth>Price\u003C\u002Fth>\u003Cth>Storage\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\u003Ctd data-label='Plan'>Basic\u003C\u002Ftd>\u003Ctd data-label='Price'>$5\u003C\u002Ftd>\u003Ctd data-label='Storage'>10 GB\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd data-label='Plan'>Pro\u003C\u002Ftd>\u003Ctd data-label='Price'>$15\u003C\u002Ftd>\u003Ctd data-label='Storage'>100 GB\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd data-label='Plan'>Team\u003C\u002Ftd>\u003Ctd data-label='Price'>$30\u003C\u002Ftd>\u003Ctd data-label='Storage'>1 TB\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>",{"id":255,"slug":785,"title":786,"time_limit_seconds":787,"pass_percentage":329,"question_count":65},"styling-lists-tables-quiz","Styling Lists & Tables Quiz",600,[789,795],{"id":383,"title":790,"slug":791,"prompt":792,"starter_code":793,"expected_output":794,"language":16,"order_index":23},"Create a Numbered Steps List","create-numbered-steps-list","Turn the ordered list into a styled steps list using CSS counters. Remove the default numbers, then show each step number inside a blue circle using li::before with content: counter(step). Add a light gray background and rounded corners to each item.","\u003Cstyle>\n  \u002F* TODO: counter-reset on ol, counter-increment on li, and li::before styling *\u002F\n\u003C\u002Fstyle>\n\u003Col>\n  \u003Cli>Install an editor\u003C\u002Fli>\n  \u003Cli>Write HTML\u003C\u002Fli>\n  \u003Cli>Style with CSS\u003C\u002Fli>\n\u003C\u002Fol>","Each list item shows a blue circular number badge on the left, a light gray background and rounded corners, with no default browser numbers.",{"id":387,"title":796,"slug":797,"prompt":798,"starter_code":799,"expected_output":800,"language":16,"order_index":12},"Zebra Table with Hover","zebra-table-with-hover","Style the table so borders are collapsed, the header row has a dark background with white text, even body rows have a light gray background, and a row turns light blue on hover. Right-align the Price column and use tabular-nums.","\u003Cstyle>\n  \u002F* TODO: border-collapse, thead th, tbody tr:nth-child(even), tbody tr:hover, .num *\u002F\n\u003C\u002Fstyle>\n\u003Ctable>\n  \u003Cthead>\u003Ctr>\u003Cth>Item\u003C\u002Fth>\u003Cth class='num'>Price\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\u003Ctd>Notebook\u003C\u002Ftd>\u003Ctd class='num'>4.50\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>Pen\u003C\u002Ftd>\u003Ctd class='num'>1.25\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>Backpack\u003C\u002Ftd>\u003Ctd class='num'>39.99\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>Marker\u003C\u002Ftd>\u003Ctd class='num'>2.75\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>","A table with single borders, a dark header, alternating light gray rows, a light blue hover row, and right-aligned aligned numbers in the Price column.","2026-09-30T17:28:59+00:00",{"id":539,"slug":541,"title":540},{"id":547,"slug":549,"title":548}]