"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Practice Instructions: Monthly Calendar" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "You'll create a monthly calendar table that demonstrates both colspan and rowspan techniques. The calendar will show March 2024 with a proper month header, day-of-week headers, date cells arranged in a calendar grid, and a multi-day event that spans several days." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This project shows how cell merging creates more natural and professional table layouts. You'll practice using colspan to create headers that span multiple columns and see how merged cells can represent events or data that naturally extends across multiple time periods." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your calendar will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A descriptive caption explaining what the calendar shows" }), "\n", _jsx(_components.li, { children: "A month header that spans the full width of the calendar" }), "\n", _jsx(_components.li, { children: "Day-of-week headers (Sun through Sat)" }), "\n", _jsx(_components.li, { children: "Date cells arranged in proper calendar rows" }), "\n", _jsx(_components.li, { children: "A multi-day event that spans across several days using colspan" }), "\n", _jsx(_components.li, { children: "Professional appearance suitable for real-world use" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Calendar Foundation" }), "\n", _jsx(_components.p, { children: "Start by creating the basic table structure with a caption that clearly explains this is a monthly calendar. Your caption should specify the month and year." }), "\n", _jsx(_components.p, { children: "Think about what information someone would need to understand this calendar's purpose immediately." }), "\n", _jsx(_components.p, { children: "Example foundation structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "table"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "caption"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " Calendar title with month and year\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how the caption appears above your calendar."] }), "\n", _jsx(_components.h3, { children: "Step 2: Build the Month Header" }), "\n", _jsx(_components.p, { children: "Create a header section with the month name spanning the full width of the calendar. Since a calendar has 7 days of the week, your month header should span 7 columns." }), "\n", _jsx(_components.p, { children: "Use the appropriate HTML element for headers and the colspan attribute to make it span the full width." }), "\n", _jsx(_components.p, { children: "Example header structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "thead"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tr"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "th"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "colspan" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "7", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Month Year", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your month header spans the full calendar width."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add Day-of-Week Headers" }), "\n", _jsx(_components.p, { children: "Create a second header row with the days of the week. This row should have 7 individual header cells, one for each day from Sunday through Saturday." }), "\n", _jsx(_components.p, { children: "Use abbreviated day names (Sun, Mon, Tue, Wed, Thu, Fri, Sat) to keep the headers concise." }), "\n", _jsx(_components.p, { children: "Example day header structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tr"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "th"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Sun", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "th"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Mon", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete header section with month and day headers."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create the First Week Row" }), "\n", _jsx(_components.p, { children: "Build the first week of March 2024. Since March 1st falls on a Friday, you'll need empty cells for the days before March 1st, then cells with \"1\" and \"2\" for March 1st and 2nd." }), "\n", _jsx(_components.p, { children: "Use regular table data cells for the dates and leave the empty cells completely empty (no content)." }), "\n", _jsx(_components.p, { children: "Example first week structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tbody"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tr"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "1", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "2", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your first week displays with proper calendar alignment."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add the Second Week" }), "\n", _jsx(_components.p, { children: "Create the second week row with dates 3 through 9. This should be a complete week with all 7 cells filled with consecutive dates." }), "\n", _jsx(_components.p, { children: "Each cell should contain just the date number (3, 4, 5, 6, 7, 8, 9)." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your calendar growing with a complete second week."] }), "\n", _jsx(_components.h3, { children: "Step 6: Create a Week with a Multi-Day Event" }), "\n", _jsx(_components.p, { children: "Build the third week (dates 10-16) but include a special multi-day event. Create a cell that spans from Monday (11th) through Wednesday (13th) to represent a 3-day event." }), "\n", _jsx(_components.p, { children: "Use colspan to make the event span 3 days, and include descriptive text like \"Spring Break (Mon-Wed)\"." }), "\n", _jsx(_components.p, { children: "Example multi-day event structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tr"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "10", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "colspan" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "3", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Event Name (Mon-Wed)", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "14", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "15", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "16", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how the multi-day event spans across multiple days naturally."] }), "\n", _jsx(_components.h3, { children: "Step 7: Complete the Calendar" }), "\n", _jsx(_components.p, { children: "Add one more week to finish the calendar display. Include dates 17 through 23 in a regular row with 7 individual cells." }), "\n", _jsx(_components.p, { children: "This gives your calendar enough content to demonstrate the complete structure and layout." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete monthly calendar with all features."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Caption" }), ": Must clearly identify this as a March 2024 calendar"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Month Header" }), ": Must span all 7 columns using colspan=\"7\""] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Day Headers" }), ": Must include all 7 days of the week (Sun through Sat)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Date Alignment" }), ": March 1st must appear in the Friday column"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Multi-Day Event" }), ": Must span exactly 3 days using colspan=\"3\""] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Complete Weeks" }), ": Must include at least 4 weeks of calendar data"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Technical Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "" }), " as the first element inside ", _jsx(_components.code, { children: "" })] }), "\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "" }), " section for month and day headers"] }), "\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "" }), " section for date rows"] }), "\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "colspan=\"7\"" }), " for the month header"] }), "\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "colspan=\"3\"" }), " for the multi-day event"] }), "\n", _jsx(_components.li, { children: "Maintain consistent 7-column structure in all rows" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Layout Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Calendar must look like a real monthly calendar" }), "\n", _jsx(_components.li, { children: "Empty cells at the beginning should align dates properly" }), "\n", _jsx(_components.li, { children: "Multi-day event should visually span the correct days" }), "\n", _jsx(_components.li, { children: "All rows should maintain proper column alignment" }), "\n", _jsx(_components.li, { children: "Headers should be visually distinct from date cells" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Check" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Caption appears prominently above the calendar" }), "\n", _jsx(_components.li, { children: "Month header spans the full width of the calendar" }), "\n", _jsx(_components.li, { children: "Day-of-week headers are clearly displayed" }), "\n", _jsx(_components.li, { children: "Dates align properly with their corresponding days" }), "\n", _jsx(_components.li, { children: "Multi-day event spans exactly 3 columns" }), "\n", _jsx(_components.li, { children: "Calendar looks professional and organized" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Structure Verification" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Table has proper ", _jsx(_components.code, { children: "" }), " and ", _jsx(_components.code, { children: "" }), " sections"] }), "\n", _jsxs(_components.li, { children: ["Month header uses ", _jsx(_components.code, { children: "colspan=\"7\"" })] }), "\n", _jsxs(_components.li, { children: ["Multi-day event uses ", _jsx(_components.code, { children: "colspan=\"3\"" })] }), "\n", _jsx(_components.li, { children: "Each regular week row has exactly 7 cells" }), "\n", _jsx(_components.li, { children: "March 1st appears in the Friday column" }), "\n", _jsx(_components.li, { children: "All rows maintain consistent column count" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Validation" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Caption clearly explains this is March 2024" }), "\n", _jsx(_components.li, { children: "Day headers include all 7 days of the week" }), "\n", _jsx(_components.li, { children: "Dates progress logically (1, 2, 3, etc.)" }), "\n", _jsx(_components.li, { children: "Multi-day event has descriptive text" }), "\n", _jsx(_components.li, { children: "Calendar includes at least 4 weeks of data" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Caption Present" }), ": Calendar includes a descriptive caption with month and year"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Month Header" }), ": Uses ", _jsx(_components.code, { children: "colspan=\"7\"" }), " to span the full calendar width"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Day Headers" }), ": Includes all 7 days of the week in proper order"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Date Alignment" }), ": March 1st appears in the correct day column (Friday)"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Multi-Day Event" }), ": Uses ", _jsx(_components.code, { children: "colspan=\"3\"" }), " to span exactly 3 days"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Table Structure" }), ": Uses proper ", _jsx(_components.code, { children: "" }), " and ", _jsx(_components.code, { children: "" }), " organization"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Appearance" }), ": Calendar looks like a real monthly calendar"] }), "\n", _jsx(_components.h2, { children: "Common Mistakes to Avoid" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Wrong colspan values" }), ": Month header needs ", _jsx(_components.code, { children: "colspan=\"7\"" }), ", event needs ", _jsx(_components.code, { children: "colspan=\"3\"" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Misaligned dates" }), ": March 1st must be in the Friday column"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Inconsistent row structure" }), ": Each row must total exactly 7 columns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Missing sections" }), ": Use ", _jsx(_components.code, { children: "" }), " for headers and ", _jsx(_components.code, { children: "" }), " for dates"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Unclear event text" }), ": Multi-day events should have descriptive labels"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Empty cells with content" }), ": Empty calendar cells should be completely empty"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember: The goal is to create a calendar that looks natural and professional, demonstrating how colspan can create more sophisticated table layouts that match real-world data structures." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };