The following example code demonstrates How to Create Tables in HTML.

In order to create tables in HTML, we use the <table> tag. Within the <table> tag, we use <tr> tag to create a row. Whereas, the <td> tag is used to create a column. In order to create a cell that spans more than one column, we use the colspan attribute in the <td> tag. Similarly, we can use the rowspan attribute, if a cell spans for more than one row.

Example Code to Create Tables in HTML that Uses Rowspan and Colspan

In the following example, we create a table with a specified height and width using the height and width attributes respectively. Also, there is cellpadding attribute that indicates the distance between the cell content and the border of the cell.

  <title>HTML Table</title>
     <div style="margin: 50px;">
     	<center><h1>HTML Table</h1>
        <table border="1" width="800" height="400" cellpadding="20" style="text-align: center;">
              <td colspan="2">Cell 1</td>
              <td>Cell 2</td>
              <td>Cell 3</td>
              <td rowspan="3">Cell 4</td>
              <td>Cell 5</td>
              <td>Cell 6</td>
              <td>Cell 7</td>
               <td colspan="3">Cell 8</td>
               <td>Cell 9</td>
               <td colspan="2">Cell 10</td>


The Output of the Example to Demonstrate How to Create Tables in HTML
The Output of the Example to Demonstrate How to Create Tables in HTML

Further Reading

HTML Practice Exercise

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Understanding Document Object Model (DOM) in JavaScript

Understanding HTTP Requests and Responses

What is Asynchronous JavaScript?

JavaScript Code for Event Handling


IITM Software Development Cell