"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: Restaurant Menu Table" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "Create a complete restaurant menu using HTML tables that organizes menu items into clear sections (appetizers, main courses, desserts) with consistent information for each item including name, description, and price." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "Restaurant menus are perfect examples of real-world tabular data. This project teaches you to organize complex information in formats that users can quickly scan and understand, while demonstrating professional table design principles." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your menu table will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A descriptive caption explaining the menu" }), "\n", _jsx(_components.li, { children: "Column headers for Item, Description, and Price" }), "\n", _jsx(_components.li, { children: "Three menu sections: Appetizers, Main Courses, and Desserts" }), "\n", _jsx(_components.li, { children: "Multiple items in each section with consistent formatting" }), "\n", _jsx(_components.li, { children: "Professional accessibility features throughout" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Table Foundation" }), "\n", _jsx(_components.p, { children: "Build the basic table structure with proper semantic elements:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create a table element to contain your entire menu" }), "\n", _jsx(_components.li, { children: "Add a caption that describes this as a restaurant menu" }), "\n", _jsx(_components.li, { children: "Set up thead and tbody sections for proper organization" }), "\n", _jsx(_components.li, { children: "Include column headers for \"Item\", \"Description\", and \"Price\"" }), "\n"] }), "\n", _jsx(_components.p, { children: "Use this structure pattern:" }), "\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: " Your menu description here\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: "<" }), "thead"] }), _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: "<" }), "tr"] }), _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: "<" }), "th"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Column 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: "8", 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: ">" })] }), "Column 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: "9", 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: ">" })] }), "Column 3", _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"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", 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: "13", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", 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: "15", 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 table foundation with proper headers."] }), "\n", _jsx(_components.h3, { children: "Step 2: Add the Appetizers Section" }), "\n", _jsx(_components.p, { children: "Create the first menu section with a section header and menu items:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a section header that spans all three columns using the colspan attribute" }), "\n", _jsx(_components.li, { children: "Include at least 3 appetizer items, each with name, description, and price" }), "\n", _jsx(_components.li, { children: "Use proper table header elements for the section title" }), "\n", _jsx(_components.li, { children: "Ensure each menu item follows the same three-column pattern" }), "\n"] }), "\n", _jsx(_components.p, { children: "Section header pattern:" }), "\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 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: ">" })] }), "Section Name", _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: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how the section header spans the full table width and how menu items align in columns."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add the Main Courses Section" }), "\n", _jsx(_components.p, { children: "Create the main courses section following the same pattern:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add another section header spanning all columns" }), "\n", _jsx(_components.li, { children: "Include at least 3 main course items with names, descriptions, and prices" }), "\n", _jsx(_components.li, { children: "Maintain consistent formatting with the appetizers section" }), "\n", _jsx(_components.li, { children: "Use descriptive item names and appealing descriptions" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how multiple sections create clear organization in your menu."] }), "\n", _jsx(_components.h3, { children: "Step 4: Add the Desserts Section" }), "\n", _jsx(_components.p, { children: "Complete your menu with a desserts section:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add the final section header for desserts" }), "\n", _jsx(_components.li, { children: "Include at least 3 dessert items following the established pattern" }), "\n", _jsx(_components.li, { children: "Ensure all prices use consistent formatting (like $X.XX)" }), "\n", _jsx(_components.li, { children: "Maintain the same description style throughout" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete menu with all three sections properly organized."] }), "\n", _jsx(_components.h3, { children: "Step 5: Enhance Accessibility" }), "\n", _jsx(_components.p, { children: "Add accessibility features to make your table work for all users:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Include scope attributes on your column headers (scope=\"col\")" }), "\n", _jsx(_components.li, { children: "Add scope attributes to section headers (scope=\"colgroup\")" }), "\n", _jsx(_components.li, { children: "Ensure your caption clearly describes the table contents" }), "\n", _jsx(_components.li, { children: "Verify that all table elements are properly nested" }), "\n"] }), "\n", _jsx(_components.p, { children: "Accessibility pattern for headers:" }), "\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: "<" }), "th"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "scope" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "col", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Column Header", _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: "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 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 attr-name", children: "scope" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "colgroup", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Section Header", _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 test that your table structure is logical and well-organized."] }), "\n", _jsx(_components.h3, { children: "Step 6: Review and Polish" }), "\n", _jsx(_components.p, { children: "Check your completed menu for professional quality:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Verify that all sections have consistent structure" }), "\n", _jsx(_components.li, { children: "Ensure prices are formatted consistently throughout" }), "\n", _jsx(_components.li, { children: "Check that descriptions are clear and appealing" }), "\n", _jsx(_components.li, { children: "Confirm that the table looks organized and professional" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " for a final review of your complete restaurant menu table."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.h3, { children: "Structural Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Table uses proper semantic elements (table, thead, tbody, caption)" }), "\n", _jsx(_components.li, { children: "✅ Column headers clearly identify each column's content" }), "\n", _jsx(_components.li, { children: "✅ Section headers span all three columns using colspan" }), "\n", _jsx(_components.li, { children: "✅ Each menu item has exactly three pieces of information" }), "\n", _jsx(_components.li, { children: "✅ All rows maintain consistent column structure" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Menu includes three sections: Appetizers, Main Courses, Desserts" }), "\n", _jsx(_components.li, { children: "✅ Each section contains at least 3 menu items" }), "\n", _jsx(_components.li, { children: "✅ All items have names, descriptions, and prices" }), "\n", _jsx(_components.li, { children: "✅ Prices use consistent formatting throughout" }), "\n", _jsx(_components.li, { children: "✅ Descriptions are clear and appealing" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Caption describes the table purpose" }), "\n", _jsx(_components.li, { children: "✅ Column headers include scope=\"col\" attributes" }), "\n", _jsx(_components.li, { children: "✅ Section headers include scope=\"colgroup\" attributes" }), "\n", _jsx(_components.li, { children: "✅ Table structure is logical and easy to navigate" }), "\n", _jsx(_components.li, { children: "✅ All elements are properly nested" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Organization Test" }), "\n", _jsx(_components.p, { children: "Your menu should display with:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Clear section breaks between appetizers, main courses, and desserts" }), "\n", _jsx(_components.li, { children: "Aligned columns that make it easy to compare prices" }), "\n", _jsx(_components.li, { children: "Professional appearance that looks like a real restaurant menu" }), "\n", _jsx(_components.li, { children: "Consistent formatting throughout all sections" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Test" }), "\n", _jsx(_components.p, { children: "Test your table's accessibility by:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Reading through the table in order - does it make logical sense?" }), "\n", _jsx(_components.li, { children: "Checking that each section is clearly identified" }), "\n", _jsx(_components.li, { children: "Verifying that column headers describe their content" }), "\n", _jsx(_components.li, { children: "Ensuring the caption explains what the table contains" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Quality Test" }), "\n", _jsx(_components.p, { children: "Evaluate your menu content for:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Appealing item names that sound like real menu items" }), "\n", _jsx(_components.li, { children: "Descriptions that help customers understand each dish" }), "\n", _jsx(_components.li, { children: "Realistic pricing that's consistent throughout" }), "\n", _jsx(_components.li, { children: "Professional presentation that customers would trust" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsx(_components.p, { children: "Your restaurant menu table is complete when it includes:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Proper table structure with caption, thead, and tbody" }), "\n", _jsx(_components.li, { children: "✅ Three menu sections with clear headers spanning all columns" }), "\n", _jsx(_components.li, { children: "✅ At least 9 total menu items (3 per section minimum)" }), "\n", _jsx(_components.li, { children: "✅ Consistent three-column format: Item, Description, Price" }), "\n", _jsx(_components.li, { children: "✅ Accessibility features including appropriate scope attributes" }), "\n", _jsx(_components.li, { children: "✅ Professional appearance suitable for a real restaurant" }), "\n", _jsx(_components.li, { children: "✅ Clean, valid HTML that follows semantic best practices" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Common Challenges & Tips" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Challenge" }), ": Section headers not spanning properly\n", _jsx(_components.strong, { children: "Solution" }), ": Ensure you're using ", _jsx(_components.code, { children: "colspan=\"3\"" }), " and that each row has the correct total number of columns"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Challenge" }), ": Columns not aligning properly\n", _jsx(_components.strong, { children: "Solution" }), ": Check that every row has exactly three cells (counting merged cells)"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Challenge" }), ": Inconsistent formatting\n", _jsx(_components.strong, { children: "Solution" }), ": Use the same pattern for every menu item and maintain consistent price formatting"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Challenge" }), ": Accessibility concerns\n", _jsx(_components.strong, { children: "Solution" }), ": Include scope attributes on all headers and ensure your caption is descriptive"] }), "\n", _jsx(_components.p, { children: "Remember: Focus on creating a menu that real customers could use effectively. The best table designs feel natural and make information easy to find and compare." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };