4. HTML Data Tables & List Structures

Theory & Practical Manual: Tables, tr, th, td, colspan, rowspan, ul, ol, dl

Module 1: HTML Data Tables Theory

Arranging data in rows and columns.

Core Theory & Principles

<table> wraps table elements.
<tr> defines a table row.
<th> defines a table header cell (bold & centered by default).
<td> defines a standard table data cell.
colspan merges columns horizontally across a row; rowspan merges rows vertically.

Practical Key Takeaways

Mastering HTML Data Tables Theory builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - HTML Data Tables Theory

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%; color: white; background: rgb(30, 41, 59);">
    <tr style="background: rgb(15, 23, 42); color: rgb(56, 189, 248);">
        <th>Subject</th>
        <th>Lectures</th>
        <th>Instructor</th>
    </tr>
    <tr>
        <td>HTML5 & CSS3</td>
        <td>41 Chapters</td>
        <td>Instructor</td>
    </tr>
    <tr>
        <td>Java Full Stack</td>
        <td>48 Chapters</td>
        <td>Instructor</td>
    </tr>
</table>

📤 Expected Output / Browser Rendered Result:

Structured 2-row data table with distinct headers and row entries.

Module 2: HTML Lists (Unordered, Ordered & Description Lists) Theory

Structuring related items into lists.

Core Theory & Principles

<ul> & <li>: Unordered bulleted list.
<ol> & <li>: Ordered numbered list.
<dl>, <dt>, <dd>: Description term & definition list.

Practical Key Takeaways

Mastering HTML Lists (Unordered, Ordered & Description Lists) Theory builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - HTML Lists (Unordered, Ordered & Description Lists) Theory

<h3>Unordered List:</h3>
<ul>
    <li>HTML Markup</li>
    <li>CSS Styling</li>
    <li>JS Logic</li>
</ul>
<h3>Ordered List:</h3>
<ol>
    <li>Design Wireframe</li>
    <li>Code HTML Structure</li>
    <li>Apply CSS Layout</li>
</ol>

📤 Expected Output / Browser Rendered Result:

Bulleted list for web tech and numbered list for workflow steps.