"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: Sports Scores Table" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "You'll create a professional sports scores table that displays game results with proper headers and organized sections. The table will show different games with their teams and final scores, demonstrating how proper table headers and organization make data easy to understand and navigate." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "Sports scores are a perfect example of data that benefits from clear table organization. Fans need to quickly find specific games, compare scores, and understand what each column represents. This project shows how proper HTML table structure serves real-world information needs while building your skills with table headers and sections." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your sports scores table will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Clear column headers that identify what each column contains" }), "\n", _jsx(_components.li, { children: "Organized table sections that separate headers from data" }), "\n", _jsx(_components.li, { children: "Multiple game results showing team matchups and scores" }), "\n", _jsx(_components.li, { children: "Professional structure that's accessible to all users" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Estimated completion time:" }), " 10-15 minutes"] }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Basic Document Structure" }), "\n", _jsx(_components.p, { children: "Set up your HTML document with the standard structure you've learned:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "DOCTYPE declaration and HTML element with language attribute" }), "\n", _jsx(_components.li, { children: "Head section with character encoding, viewport, and descriptive title" }), "\n", _jsx(_components.li, { children: "Body section with a main heading that describes the table's purpose" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your basic page structure displays correctly."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create the Table Container and Header Section" }), "\n", _jsx(_components.p, { children: "Build the foundation of your table structure:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create the main table container element" }), "\n", _jsx(_components.li, { children: "Add a table head section that will contain your header row" }), "\n", _jsx(_components.li, { children: "Inside the head section, create a row with four header cells for: \"Game\", \"Home Team\", \"Away Team\", and \"Final Score\"" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which HTML elements are specifically designed for table headers versus regular data cells." }), "\n", _jsx(_components.p, { children: "Example header 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: "<" }), "header-section"] }), _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: "<" }), "tr"] }), _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: "<" }), "header-cell"] }), _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: "5", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "header-cell"] }), _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: "6", 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: "" })] }), "\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: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your headers appear differently from regular table cells."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add the Table Body Section" }), "\n", _jsx(_components.p, { children: "Create the section that will hold your game data:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a table body section below your header section" }), "\n", _jsx(_components.li, { children: "This section should be separate from the headers but still inside the main table container" }), "\n", _jsx(_components.li, { children: "Leave this section empty for now - you'll add the data rows in the next step" }), "\n"] }), "\n", _jsx(_components.p, { children: "Example body 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: "<" }), "body-section"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token comment", 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 confirm your table sections are properly organized."] }), "\n", _jsx(_components.h3, { children: "Step 4: Add the First Game Result" }), "\n", _jsx(_components.p, { children: "Inside your table body section, create the first data row:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a table row containing four data cells" }), "\n", _jsx(_components.li, { children: "First cell: \"Game 1\"" }), "\n", _jsx(_components.li, { children: "Second cell: \"Lions\"" }), "\n", _jsx(_components.li, { children: "Third cell: \"Tigers\"" }), "\n", _jsx(_components.li, { children: "Fourth cell: \"24-17\"" }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember to use the appropriate HTML elements for data cells (different from header cells)." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your first game result displays under the proper headers."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add Two More Game Results" }), "\n", _jsx(_components.p, { children: "Add two additional game results to demonstrate the table pattern:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Game 2: Bears vs Eagles, score 31-14" }), "\n", _jsx(_components.li, { children: "Game 3: Hawks vs Wolves, score 28-21" }), "\n"] }), "\n", _jsx(_components.p, { children: "Each game should follow the same four-column pattern as your first game, with consistent cell structure." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete table with all three games properly organized."] }), "\n", _jsx(_components.h3, { children: "Step 6: Review Table Structure and Organization" }), "\n", _jsx(_components.p, { children: "Examine your completed table to ensure:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Headers clearly identify what each column contains" }), "\n", _jsx(_components.li, { children: "All data rows have the same number of cells as the header row" }), "\n", _jsx(_components.li, { children: "Table sections properly separate headers from data" }), "\n", _jsx(_components.li, { children: "Information is easy to scan and understand" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " for a final check of your table's appearance and organization."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.p, { children: "Your completed table must include:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Structural Requirements:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Proper table container element" }), "\n", _jsx(_components.li, { children: "Organized header section with one row containing four header cells" }), "\n", _jsx(_components.li, { children: "Organized body section with three data rows, each containing four data cells" }), "\n", _jsx(_components.li, { children: "Consistent cell count across all rows (4 cells per row)" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Content Requirements:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Column headers: \"Game\", \"Home Team\", \"Away Team\", \"Final Score\"" }), "\n", _jsx(_components.li, { children: "Three game results with the specified team names and scores" }), "\n", _jsx(_components.li, { children: "Clear, readable content in each cell" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Semantic Requirements:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Proper use of header elements for column labels" }), "\n", _jsx(_components.li, { children: "Proper use of data elements for game information" }), "\n", _jsx(_components.li, { children: "Correct table section organization" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Visual Tests:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Headers should appear visually distinct from data (typically bold and centered)" }), "\n", _jsx(_components.li, { children: "All columns should align properly" }), "\n", _jsx(_components.li, { children: "Information should be easy to scan row by row" }), "\n", _jsx(_components.li, { children: "Table should have a clear, organized appearance" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Structure Tests:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Each row should have exactly four cells" }), "\n", _jsx(_components.li, { children: "Headers should clearly describe the data in each column" }), "\n", _jsx(_components.li, { children: "You should be able to easily find any specific game's information" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Accessibility Tests:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Table structure should be logical and predictable" }), "\n", _jsx(_components.li, { children: "Headers should make the data's meaning clear" }), "\n", _jsx(_components.li, { children: "Information should be organized in a way that makes sense when read aloud" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Document Structure" }), ": Standard HTML5 document with proper head and body sections"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Table Container" }), ": Main table element containing all table content"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Header Organization" }), ": Table head section with one row containing four header cells"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Body Organization" }), ": Table body section with three data rows"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Header Content" }), ": Column headers clearly labeled as \"Game\", \"Home Team\", \"Away Team\", \"Final Score\""] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Data Content" }), ": Three complete game results with specified teams and scores"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Semantic Correctness" }), ": Proper use of header elements for headers and data elements for data"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Consistent Structure" }), ": All rows have the same number of cells (4 per row)"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Visual Clarity" }), ": Headers appear distinct from data, table is easy to read and scan"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Appearance" }), ": Table looks organized and presents information clearly"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };