HTML Tables, Lists and Forms

Beyond plain text, HTML gives us structured elements to organise information: tables for rows and columns, lists for items, and forms to collect input from the visitor.

Tables

A table is built from three main tags:

• <table> — wraps the whole table (the attribute border="1" draws grid lines),
• <tr> — a table row,
• <td> — a table data cell inside a row (<th> makes a heading cell, shown bold and centred).

<table border="1">
  <tr>
    <th>Roll</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Rina</td>
    <td>88</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Amit</td>
    <td>76</td>
  </tr>
</table>

This displays a bordered grid with a heading row and two data rows. The order is always table → row → cells.

Lists

HTML offers two everyday list types:

• Unordered list <ul> — items marked with bullets.
• Ordered list <ol> — items numbered automatically.

In both, each item is wrapped in an <li> (list item) tag:

<ul>
  <li>Accountancy</li>
  <li>Business Studies</li>
  <li>Information Technology</li>
</ul>

<ol>
  <li>Open the file</li>
  <li>Edit the content</li>
  <li>Save and close</li>
</ol>

Forms

A form collects information from the visitor — a login, a feedback message, an enquiry. The <form> tag wraps input controls and its action attribute says where the data should be sent when submitted.

Common controls, all built with the <input> tag using different type values:

<form action="submit.html" method="post">
  Name: <input type="text" name="uname">

  Password: <input type="password" name="pwd">
 …