[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"topic:html-tables-rows-columns-merging-cells":334,"blog-categories":397},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","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",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,26,30,34,38,42],{"id":9,"title":23,"slug":24,"order_index":9,"cornerstone":25,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",false,{"id":27,"title":28,"slug":29,"order_index":9,"cornerstone":25,"reading_time_minutes":27},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":25,"reading_time_minutes":27},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":25,"reading_time_minutes":27},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":25,"reading_time_minutes":27},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":25,"reading_time_minutes":27},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":27,"name":47,"slug":48,"order_index":27,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":25,"reading_time_minutes":27},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":25,"reading_time_minutes":27},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":25,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":25,"reading_time_minutes":27},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":25,"reading_time_minutes":27},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":25,"reading_time_minutes":27},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":25,"reading_time_minutes":27},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":25,"reading_time_minutes":27},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":25,"reading_time_minutes":27},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":25,"reading_time_minutes":27},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":25,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":25,"reading_time_minutes":27},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":25,"reading_time_minutes":27},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":25,"reading_time_minutes":27},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":25,"reading_time_minutes":27},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":25,"reading_time_minutes":27},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":25,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":25,"reading_time_minutes":27},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":25,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":25,"reading_time_minutes":27},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":25,"reading_time_minutes":27},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":25,"reading_time_minutes":27},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":25,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":25,"reading_time_minutes":27},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":25,"reading_time_minutes":27},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":25,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":25,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":25,"reading_time_minutes":27},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":25,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":25,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":25,"reading_time_minutes":27},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":25,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":25,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":25,"reading_time_minutes":27},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":25,"reading_time_minutes":27},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":25,"reading_time_minutes":27},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":25,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":25,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":25,"reading_time_minutes":27},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":25,"reading_time_minutes":27},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":25,"reading_time_minutes":27},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":25,"reading_time_minutes":27},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":25,"reading_time_minutes":27},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":25,"reading_time_minutes":27},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":25,"reading_time_minutes":27},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":25,"reading_time_minutes":27},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":25,"reading_time_minutes":27},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":25,"reading_time_minutes":27},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":25,"reading_time_minutes":27},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":25,"reading_time_minutes":27},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":25,"reading_time_minutes":27},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":25,"reading_time_minutes":27},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":27,"cornerstone":25,"reading_time_minutes":27},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":25,"reading_time_minutes":27},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":25,"reading_time_minutes":27},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":25,"reading_time_minutes":27},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":25,"reading_time_minutes":27},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":25,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":25,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"data":335},{"id":111,"title":112,"slug":113,"content":336,"course":337,"subcategory":338,"author":339,"reading_time_minutes":27,"cornerstone":25,"schema_type":345,"faq_json":5,"video_url":5,"canonical_url":346,"meta_title":347,"meta_description":348,"og_image":5,"toc_json":349,"code_examples":374,"quiz":384,"exercises":387,"published_at":5,"updated_at":394,"prev":395,"next":396},"\u003Ch2 id=\"html-tables-the-complete-guide-to-rows-columns-and-merging-cells\">HTML Tables: The Complete Guide to Rows, Columns, and Merging Cells\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: HTML tables\u003C\u002Fstrong> — one of the most searched HTML topics by beginners building data-driven web pages.\u003C\u002Fp>\u003Cp>HTML tables are used to display \u003Cstrong>tabular data\u003C\u002Fstrong> — information organized into rows and columns, such as pricing charts, schedules, or comparison grids. While tables should never be used for page layout (that job belongs to CSS Grid\u002FFlexbox), they remain essential for presenting structured, relational data in a way that's accessible and easy to scan.\u003C\u002Fp>\u003Ch3 id=\"1-the-basic-table-structure\">1. The Basic Table Structure\u003C\u002Fh3>\u003Cp>Every HTML table starts with the \u003Ccode><table>\u003C\u002Fcode> element. Inside it:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode><tr>\u003C\u002Fcode> — defines a \u003Cstrong>table row\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Ccode><th>\u003C\u002Fcode> — defines a \u003Cstrong>table header\u003C\u002Fstrong> cell (bold, centered by default)\u003C\u002Fli>\u003Cli>\u003Ccode><td>\u003C\u002Fcode> — defines a \u003Cstrong>table data\u003C\u002Fstrong> cell\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Trending best practice: wrap your table in semantic sections using \u003Ccode><thead>\u003C\u002Fcode>, \u003Ccode><tbody>\u003C\u002Fcode>, and \u003Ccode><tfoot>\u003C\u002Fcode> for better accessibility and easier CSS styling — a technique widely recommended in modern \u003Cstrong>semantic HTML5\u003C\u002Fstrong> guides.\u003C\u002Fp>\u003Ch3 id=\"2-rows-and-columns\">2. Rows and Columns\u003C\u002Fh3>\u003Cp>A \u003Cstrong>row\u003C\u002Fstrong> is created with \u003Ccode><tr>\u003C\u002Fcode>. The number of \u003Cstrong>columns\u003C\u002Fstrong> in a row is determined by how many \u003Ccode><td>\u003C\u002Fcode> or \u003Ccode><th>\u003C\u002Fcode> elements appear inside that row. All rows in a well-formed table should have the same number of columns (unless you're merging cells — see below).\u003C\u002Fp>\u003Ch3 id=\"3-merging-cells-colspan-and-rowspan\">3. Merging Cells: colspan and rowspan\u003C\u002Fh3>\u003Cp>Sometimes a cell needs to span across multiple columns or rows — for example, a heading that covers two columns, or a category label that spans three rows.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>colspan=\"n\"\u003C\u002Fcode> — merges a cell across \u003Cem>n\u003C\u002Fem> columns horizontally\u003C\u002Fli>\u003Cli>\u003Ccode>rowspan=\"n\"\u003C\u002Fcode> — merges a cell across \u003Cem>n\u003C\u002Fem> rows vertically\u003C\u002Fli>\u003C\u002Ful>\u003Cp>When you merge cells, remember to \u003Cstrong>remove the equivalent number of cells\u003C\u002Fstrong> from the rows being spanned, or your table will break visually.\u003C\u002Fp>\u003Ch3 id=\"4-styling-tables-with-css\">4. Styling Tables with CSS\u003C\u002Fh3>\u003Cp>Modern, responsive tables use CSS properties like \u003Ccode>border-collapse\u003C\u002Fcode>, \u003Ccode>overflow-x: auto\u003C\u002Fcode> for mobile scrolling, and zebra-striping (\u003Ccode>nth-child(even)\u003C\u002Fcode>) for readability — all trending techniques in current responsive web design.\u003C\u002Fp>\u003Ch3 id=\"5-accessibility-tip\">5. Accessibility Tip\u003C\u002Fh3>\u003Cp>Always use \u003Ccode><th scope=\"col\">\u003C\u002Fcode> or \u003Ccode><th scope=\"row\">\u003C\u002Fcode> to tell screen readers whether a header applies to a column or a row. This is a key part of \u003Cstrong>web accessibility (a11y)\u003C\u002Fstrong> best practices.\u003C\u002Fp>\u003Cp>Try editing the live examples below to experiment with rows, columns, and merged cells!\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><table border='1' style='border-collapse: collapse; width: 100%;'>\n  <thead>\n    <tr>\n      <th>Product<\u002Fth>\n      <th>Q1 Sales<\u002Fth>\n      <th>Q2 Sales<\u002Fth>\n    <\u002Ftr>\n  <\u002Fthead>\n  <tbody>\n    <tr>\n      <td>Laptops<\u002Ftd>\n      <td>120<\u002Ftd>\n      <td>150<\u002Ftd>\n    <\u002Ftr>\n    <tr>\n      <td>Phones<\u002Ftd>\n      <td>200<\u002Ftd>\n      <td>180<\u002Ftd>\n    <\u002Ftr>\n  <\u002Ftbody>\n<\u002Ftable>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><table border='1' style='border-collapse: collapse; width: 100%; text-align: center;'>\n  <tr>\n    <th colspan='3'>Yearly Report (Merged Header)<\u002Fth>\n  <\u002Ftr>\n  <tr>\n    <th>Month<\u002Fth>\n    <th>Income<\u002Fth>\n    <th>Expense<\u002Fth>\n  <\u002Ftr>\n  <tr>\n    <td rowspan='2'>Q1<\u002Ftd>\n    <td>Jan<\u002Ftd>\n    <td>$500<\u002Ftd>\n  <\u002Ftr>\n  <tr>\n    <td>Feb<\u002Ftd>\n    <td>$300<\u002Ftd>\n  <\u002Ftr>\n<\u002Ftable>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>table {\n  border-collapse: collapse;\n  width: 100%;\n  font-family: sans-serif;\n}\nth, td {\n  border: 1px solid #ccc;\n  padding: 8px 12px;\n  text-align: left;\n}\ntbody tr:nth-child(even) {\n  background-color: #f5f7fa;\n}\nth {\n  background-color: #2c3e50;\n  color: white;\n}\n@media (max-width: 600px) {\n  .table-wrapper {\n    overflow-x: auto;\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":10,"slug":11},{"name":107,"slug":108},{"slug":340,"display_name":341,"job_title":5,"short_bio":5,"expertise_tags":342,"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":343,"posts":344},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-tables-rows-columns-merging-cells","HTML Tables Tutorial: Rows, Columns, Colspan & Rowspan","Learn HTML tables from scratch — rows, columns, headers, and merging cells with colspan\u002Frowspan. Includes live, editable code examples.",[350],{"id":351,"text":352,"level":27,"children":353},"html-tables-the-complete-guide-to-rows-columns-and-merging-cells","HTML Tables: The Complete Guide to Rows, Columns, and Merging Cells",[354,358,362,366,370],{"id":355,"text":356,"level":31,"children":357},"1-the-basic-table-structure","1. The Basic Table Structure",[],{"id":359,"text":360,"level":31,"children":361},"2-rows-and-columns","2. Rows and Columns",[],{"id":363,"text":364,"level":31,"children":365},"3-merging-cells-colspan-and-rowspan","3. Merging Cells: colspan and rowspan",[],{"id":367,"text":368,"level":31,"children":369},"4-styling-tables-with-css","4. Styling Tables with CSS",[],{"id":371,"text":372,"level":31,"children":373},"5-accessibility-tip","5. Accessibility Tip",[],[375,379,381],{"id":187,"language":376,"code":377,"is_editable":378},"html","\u003Ctable border='1' style='border-collapse: collapse; width: 100%;'>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Product\u003C\u002Fth>\n      \u003Cth>Q1 Sales\u003C\u002Fth>\n      \u003Cth>Q2 Sales\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>Laptops\u003C\u002Ftd>\n      \u003Ctd>120\u003C\u002Ftd>\n      \u003Ctd>150\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>Phones\u003C\u002Ftd>\n      \u003Ctd>200\u003C\u002Ftd>\n      \u003Ctd>180\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>",true,{"id":192,"language":376,"code":380,"is_editable":378},"\u003Ctable border='1' style='border-collapse: collapse; width: 100%; text-align: center;'>\n  \u003Ctr>\n    \u003Cth colspan='3'>Yearly Report (Merged Header)\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Cth>Month\u003C\u002Fth>\n    \u003Cth>Income\u003C\u002Fth>\n    \u003Cth>Expense\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd rowspan='2'>Q1\u003C\u002Ftd>\n    \u003Ctd>Jan\u003C\u002Ftd>\n    \u003Ctd>$500\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>Feb\u003C\u002Ftd>\n    \u003Ctd>$300\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>",{"id":197,"language":382,"code":383,"is_editable":378},"css","table {\n  border-collapse: collapse;\n  width: 100%;\n  font-family: sans-serif;\n}\nth, td {\n  border: 1px solid #ccc;\n  padding: 8px 12px;\n  text-align: left;\n}\ntbody tr:nth-child(even) {\n  background-color: #f5f7fa;\n}\nth {\n  background-color: #2c3e50;\n  color: white;\n}\n@media (max-width: 600px) {\n  .table-wrapper {\n    overflow-x: auto;\n  }\n}",{"id":55,"slug":385,"title":386,"time_limit_seconds":5,"pass_percentage":303,"question_count":27},"html-tables-quiz-EGse2V","HTML Tables Quiz",[388],{"id":124,"title":389,"slug":390,"prompt":391,"starter_code":392,"expected_output":393,"language":376,"order_index":9},"Build a Merged-Cell Class Schedule","build-merged-cell-schedule","Create an HTML table showing a weekly class schedule. Use colspan to merge a header cell across all 5 weekday columns, and rowspan to merge a 'Lunch Break' cell across the Monday-Friday row for the 12PM time slot.","\u003Ctable border='1'>\n  \u003Ctr>\n    \u003C!-- TODO: add a colspan header here -->\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Cth>Time\u003C\u002Fth>\n    \u003Cth>Mon\u003C\u002Fth>\n    \u003Cth>Tue\u003C\u002Fth>\n    \u003Cth>Wed\u003C\u002Fth>\n    \u003Cth>Thu\u003C\u002Fth>\n    \u003Cth>Fri\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003C!-- TODO: add rows including a rowspan example -->\n\u003C\u002Ftable>","A table with a merged header row (colspan=5 or 6) and at least one merged cell using rowspan.","2026-09-27T17:25:48+00:00",{"id":103,"slug":105,"title":104},{"id":116,"slug":118,"title":117},{"data":398},[399,403,406,411,416],{"name":400,"slug":382,"description":401,"post_count":27,"subcategories":402},"CSS","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":376,"description":404,"post_count":27,"subcategories":405},"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":407,"slug":408,"description":409,"post_count":9,"subcategories":410},"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.",[],{"name":412,"slug":413,"description":414,"post_count":9,"subcategories":415},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":417,"slug":418,"description":419,"post_count":9,"subcategories":420},"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.",[]]