Information & Communication Technology (ICT)NCTB HSC ICT Chapter 4CBSE Web ApplicationsHTML Tables & Forms

HTML Code Playground & Live Runner

Interactive dual-pane HTML code editor with live sandboxed preview, device frames, and HSC Board exam table templates (colspan/rowspan).

Jump to:Calculator Formulas Exemplars Casio fx-991 Applications FAQ

Preset:

HTML / CSS EditorUTF-8 • Client-Side

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
    h2 { color: #0284c7; }
    table { width: 100%; max-width: 500px; border-collapse: collapse; margin-top: 15px; }
    th, td { border: 2px solid #334155; padding: 10px; text-align: center; }
    th { background-color: #0284c7; color: white; }
    .highlight { background-color: #e0f2fe; font-weight: bold; }
  </style>
</head>
<body>
  <h2>HSC Board Student Grade Sheet</h2>
  <table>
    <tr>
      <th rowspan="2">Roll</th>
      <th rowspan="2">Name</th>
      <th colspan="2">Marks</th>
      <th rowspan="2">GPA</th>
    </tr>
    <tr>
      <th>Theory</th>
      <th>Practical</th>
    </tr>
    <tr>
      <td>101</td>
      <td>Rahim Ahmed</td>
      <td>68</td>
      <td>24</td>
      <td class="highlight">5.00</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Sumaiya Kabir</td>
      <td>72</td>
      <td>25</td>
      <td class="highlight">5.00</td>
    </tr>
    <tr>
      <td colspan="4">Total Students Evaluated</td>
      <td>2</td>
    </tr>
  </table>
</body>
</html>

Live Browser PreviewDESKTOP MODE

http://localhost/hsc_ict_exam_preview.html

Formula & Derivation

Theoretical foundation, dimensional analysis, and governing boundary conditions.

HTML Table Architecture & Merging Rules

In secondary ICT exams, questions testing HTML tables with irregular grids are among the most frequent. Understanding row and column spans requires visualizing grid coordinates:

Rowspan (Vertical Span):

Increases the height of a cell downwards across n rows. The succeeding rows must omit this cell from their definition.

Colspan (Horizontal Span):

Expands a cell sideways across n columns within the same row, reducing the remaining cell count in that row accordingly.

Solved Textbook Examples

Three fully worked pedagogical exemplars: standard textbook, advanced edge-case, and authentic past board examination.

Foundational Conceptbg-emerald-500/10 text-emerald-400 border border-emerald-500/20

Construct a valid HTML5 page containing a top-level heading <h1> and a brief intro paragraph <p>.

Given Parameters:

Heading: STEM Foundations
Paragraph: Welcome to Web Design

Procedural Solution:

Declare <!DOCTYPE html> at the start.

Wrap structural elements inside <html>, <head>, and <body>.

Place <h1> and <p> tags inside the body tag.

Final Answer:<h1>STEM Foundations</h1><p>Welcome to Web Design</p>

Secondary Board Standardbg-cyan-500/10 text-cyan-400 border border-cyan-500/20

Design an examination grade table where the Marks header spans two sub-columns (Theory and Practical).

Given Parameters:

Total columns: 3
Required attribute: colspan="2"

Procedural Solution:

Create <table> container with border attributes.

In row 1, set <th colspan="2">Marks</th>.

In row 2, add subheaders <th>Theory</th> and <th>Practical</th>.

Final Answer:<th colspan="2">Marks</th> merges horizontal columns.

Practical Applicationbg-purple-500/10 text-purple-400 border border-purple-500/20

Write HTML for an enrollment form containing a student name text input and radio buttons for academic groups.

Given Parameters:

Form wrapper: <form>
Input types: text and radio

Procedural Solution:

Open form with <form method="POST">.

Add <input type="text" name="studentName">.

Add radio inputs with identical name="group" attribute to enforce mutual exclusivity.

Final Answer:<input type="radio" name="group" value="science"> Science

Board Exam & Laboratory Checklist

✓ একক রূপান্তর (SI Units)Convert all inputs to SI units prior to calculation.

✓ সূত্র ও পক্ষান্তর উল্লেখExplicitly isolate target variable before substitution.

✓ তাৎপর্যপূর্ণ অঙ্ক ও রাউন্ডিংPreserve required precision without premature truncation.

Practical Applications

How this scientific principle drives chemical engineering, aerospace, medicine, and research.

HTML is the universal structural language powering millions of web applications, hybrid mobile frameworks, responsive email templates, and digital publishing. Practicing in this client-side sandbox provides students with immediate tactile feedback, reinforcing clean semantic code habits for exams and real software projects.

Frequently Asked Questions

Answers to common conceptual misconceptions and board examination guidelines.

What is the difference between rowspan and colspan?▼

rowspan merges cells vertically across multiple rows, whereas colspan merges cells horizontally across multiple columns.

What are self-closing empty elements in HTML?▼

Empty elements do not have closing tags or text content between them, such as <br>, <img>, and <hr>.

Why is <!DOCTYPE html> mandatory?▼

It instructs modern web browsers to render the document in standard HTML5 mode rather than legacy quirks mode.