Tables

HTML tables allow you to arrange data into rows and columns. They are created using the <table> tag, along with several other tags to define the structure.

Basic Table Structure

  • <table>: Defines the entire table
  • <tr>: Defines a table row
  • <th>: Defines a table header cell
  • <td>: Defines a table data cell

Here's an example of a basic table:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Output:

Header 1 Header 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Table Sections

You can divide your table into three sections:

  • <thead>: Groups the header content
  • <tbody>: Groups the body content
  • <tfoot>: Groups the footer content

Example:

<table border="1">
        <thead>
          <tr>
            <th>Name</th>
            <th>Amount (Nu)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sonam</td>
            <td>2500</td>
          </tr>
          <tr>
            <td>Tashi</td>
            <td>3000</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Sum</td>
            <td>5500</td>
          </tr>
        </tfoot>
      </table>

Output:

Name Amount (Nu)
Sonam 2500
Tashi 3000
Sum 5500

Spanning Columns and Rows

You can make a cell span multiple columns or rows using the colspan and rowspan attributes:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>Sonam Tashi</td>
    <td>975-1234</td>
    <td>975-5678</td>
  </tr>
</table>

Output:

Name Phone
Sonam Tashi 975-1234 975-5678

Forms

Uses the <form> element

Basic form structure

<form action="/submit-form" method="post">
  <!-- Form elements go here -->
</form>

<!-- The 'action' attribute specifies where to send the form data when submitted -->
<!-- The 'method' attribute specifies the HTTP method to use (usually "get" or "post") -->
<form action="/submit-form" method="post">
  <!-- Form title -->
  <h2>Registration Form</h2>
  
  <!-- Text input for full name -->
  <!-- The 'for' attribute of <label> should match the 'id' of the input it's associated with -->
  <label for="fullname">Full Name:</label>
  <!-- 'required' attribute makes this field mandatory -->
  <input type="text" id="fullname" name="fullname" required><br><br>
  
  <!-- Email input -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>
  
  <!-- Password input -->
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br><br>
  
  <!-- Radio buttons for gender selection -->
  <p>Gender:</p>
  <!-- Radio buttons with the same 'name' form a group; only one can be selected -->
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label><br><br>
  
  <!-- Dropdown menu for country selection -->
  <label for="country">Country:</label>
  <select id="country" name="country">
    <!-- Each <option> represents a choice in the dropdown -->
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
    <option value="australia">Australia</option>
  </select><br><br>
  
  <!-- Checkboxes for multiple interest selection -->
  <p>Interests:</p>
  <!-- Checkboxes allow multiple selections -->
  <input type="checkbox" id="technology" name="interests" value="technology">
  <label for="technology">Technology</label><br>
  <input type="checkbox" id="sports" name="interests" value="sports">
  <label for="sports">Sports</label><br>
  <input type="checkbox" id="music" name="interests" value="music">
  <label for="music">Music</label><br><br>
  
  <!-- Textarea for longer text input -->
  <label for="bio">Bio:</label><br>
  <!-- 'rows' and 'cols' attributes set the initial size of the textarea -->
  <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>
  
  <!-- Submit button to send the form data -->
  <input type="submit" value="Register">
</form>

Output:

Registration Form







Gender:







Interests: