Online Training
Q4 2024

Nov 19 to Dec 10

11.00 AM EST: USA, UK, Canada, Mexico and Europe

06.00 AM GMT: MiddleEast, Asia and Australia

Register Now
Topics
  1. Understanding HTML Tables
  2. Understanding HTML Forms

Understanding HTML Tables

<tr> Table row element

The `<tr>` element adds rows to a table. Each row can contain data and headings. 

                                


<table>
  <tr>
    ...
  </tr>
</table>
<td> Table data element

The `<td>` element creates cells of data within a table row (`<tr>`). 

                                


<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
<thead> Table head element

The `<thead>` element groups header rows in a table. It helps to define column headings. 

                                


<table>
 <thead>
   <tr>
     <th>Header 1</th>
     <th>Header 2</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Data 1</td>
     <td>Data 2</td>
   </tr>
 </tbody>
</table>
rowspan Attribute

The `rowspan` attribute allows a cell to span multiple rows. The default is 1, but you can set it to any positive integer. 

                                


<table>
  <tr>
    <th>Header 1:</th>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <th rowspan="2">Spans 2 rows</th>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>
<tbody> Table body element

The `<tbody>` element groups the main content of a table. It holds all table rows except headers and footers. 

                                


<table>
 <tbody>
   <tr>
     <td>Row 1</td>
   </tr>
   <tr>
     <td>Row 2</td>
   </tr>
 </tbody>
</table>
<th> Table heading element

The `<th>` element defines a heading for a column or row. It must be inside a table row (`<tr>`). 

                                


<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
colspan Attribute

The `colspan` attribute allows a cell to span multiple columns. The default is 1, but it can be set between 1 and 1000. 

                                


<table>
  <tr>
    <th>Row 1:</th>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <th>Row 2:</th>
    <td colspan="2">Spans 2 columns</td>
    <td>Data 3</td>
  </tr>
</table>
<tfoot> Table footer element

The `<tfoot>` element provides footer content or summaries at the bottom of the table. 

                                


<table>
 <thead>
   <tr>
     <th>Header 1</th>
     <th>Header 2</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Data 1</td>
     <td>Data 2</td>
   </tr>
 </tbody>
 <tfoot>
   <tr>
     <td>Summary 1</td>
     <td>Summary 2</td>
   </tr>
 </tfoot>
</table>
<table> Table element

The `<table>` element creates a table. It contains rows and columns that you define with other table elements. 

                                


<table>
  <!-- Define rows and columns here -->
</table>

Understanding HTML Forms

<input>: Checkbox type

The `<input type="checkbox">` creates a checkbox. You can group checkboxes by using the same name attribute, allowing multiple selections. 

                                


<input type="checkbox" name="breakfast" value="bacon">Bacon<br>
<input type="checkbox" name="breakfast" value="eggs">Eggs<br>
<input type="checkbox" name="breakfast" value="pancakes">Pancakes<br>
<textarea> Element

The `<textarea>` element creates a multi-line text input area. You can set its size with `rows` and `cols` attributes. 

                                


<textarea rows="10" cols="30" name="comment"></textarea>
<form> Element

The `<form>` element collects user input and sends it to a server. It contains various input fields and a submit button. 

                                


<form method="post" action="http://example.com">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>
<input>: Number type

The `<input type="number">` creates a field for numeric input. Users can enter numbers within a specified range. 

                                


<input type="number" name="balance" />
<input> Element

The `<input>` element creates various types of input fields such as text fields, checkboxes, and buttons. 

                                


<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"><br>
<input type="checkbox" name="vehicle" value="Bike"> I own a bike
<input>: Range type

The `<input type="range">` creates a slider for selecting a value within a range. You can set the minimum, maximum, and step values. 

                                


<input type="range" name="rating" min="0" max="10" step="0.1">
<select> Element

The `<select>` element creates a dropdown list. It contains multiple `<option>` elements for users to choose from. 

                                


<select name="rental-option">
  <option value="small">Small</option>
  <option value="family">Family Sedan</option>
  <option value="lux">Luxury</option>
</select>
Submitting a form

The form submission sends user input as key-value pairs to the specified server URL. 

                                


<form action="/submit_form" method="POST">
  <!-- form fields here -->
</form>
<input>: Text type

The `<input type="text">` creates a single-line text field where users can enter text. 

                                


<input type="text" name="username" />
<button> Element

The `<button>` element creates a clickable button. You can use it to submit forms or trigger JavaScript actions. 

                                


<button type="button">Click me!</button>

Favourites

Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.

Sign up now Right Arrow

Programming Cheatsheets: Quick Reference for Productivity

Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.

ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.

Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.

Sign up now! Right Arrow

Recent Releases

Blog IconBlogs
Learn IconLearn
Tools IconTools