How to create table in HTML? HTML Table

By using tables, we are able to explain any information well. If we are creating a web page or writing a blog post, then we should also use tables there.

To create a table in a web page, we use of html We do. To create HTML table, we need to know about table tag. Through this article, you will be able to understand well how to create a table in HTML. Below we have explained the table tag in HTML in detail. Seeing the example of table tag, you will also be able to create different types of tables according to the need.

How to make Table in HTML? [HTML Table Tag in Hindi]

We use the

tag to create tables in HTML. We have to tell how many columns and rows there will be inside the table throughandis written inside thewhich defines the table row.

  • Writes the data inside the table between
  • .
  • We have to use
  • We have to write

element as many times as many rows are to be made.

  • Keep in mind that we also have to close each tag.

You can easily understand it with the example given below.Basic Structure of HTML Table TagThe syntax or basic structure of table tag is as follows:<table>
<tr>
<td>1st row 1st column</td>
<td>1st row 2nd column</td>
</tr>
<tr>
<td>2nd row 1st column</td>
<td>2nd row 2nd column</td>
</tr>
</table>
Output:The above code will create a table with 2 columns and 2 rows. You can understand by looking at the code that we have usedtag twice to create 2 rows. And inside both the rows, two.How to create HTML table? understand by exampleBelow we have given many examples of creating HTML tables, which you can understand by seeing:Example 1: How to set border in HTML table?If you want to put border in the table then you have to use border attribute. This attribute has to be written inside theand the higher its value, the greater will be the thickness of the border. Understand this with an example:<table border="1">
<tr>
<td>Name</td>
<td>Ashok</td>
</tr>
<tr>
<td>Age</td>
<td>28</td>
</tr>
</table>
Its output will be something like this:Many times we have to make header in the table and for this we useinstead of

.

<table border="1">
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ashok</td>
    <td>Raigarh</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Amit</td>
    <td>Mumbai</td>
    <td>26</td>
  </tr>
</table>

Output:

tags. We have to write the code of

at the place where the table is to be shown in the web page.Let us understand it in easy steps. To create a table in any HTML document, follow these steps:

  • The code of HTML tables has to start with the

tag.

is written inside

where TD means table data.

and as many columns as we want to create.
1st row 1st column 1st row 2nd column
2nd row 1st column 2nd row 2nd column
tags have been written which will form two cells ie columns. Whatever content we want to show in the table, we have to write it between and
Name City Age
Ashok Raigarh 28
Amit Mumbai 26

Example 3: Use of Cellspacing and Cellpading in HTML Table

The white space inside a cell in the table can be increased or decreased, for this cellpadding and cellspacing attributes are used:

  • cellpadding: With this, the space between the border of the cell and the content is defined.
  • cellspacing: With this the distance between two cells is adjusted.

Let us understand this through an example:

 <table border = "1" cellpadding = "5" cellspacing = "10">
          <tr>
            <th>Name</th>
            <th>Class</th>
         </tr>
         <tr>
            <td>Mohan Verma</td>
            <td>10th</td>
         </tr>
         <tr>
            <td>Vikas Jain</td>
            <td>12th</td>
         </tr>
      </table>

Output:

Name Class
Mohan Verma 10th
Vikas Jain 12th

Example 4: How to set Height and Width of HTML Table?

The height and width attributes are used to define the length and width of the table. You can keep their value in number or percent.

<body>
      <table border = "1" width = "400" height = "200">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>

Output:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Example 5: How to Merge Columns in HTML Table?

To merge two or more columns in an HTML table, the colspan attribute is used in

or

.

<table border="1" width="100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>Verma</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Ajeet</td>
    <td>Sharma</td>
    <td>27</td>
  </tr>
</table>

Output:

Name Age
Amit Verma 23
Ajeet Sharma 27

Example 6: How to Merge Rows in HTML Table?

When two rows have to be merged then we have to use rowspan attribute in

or

. Let us understand this with an example:

<table border="1" width="100%">
  <tr>
    <th>Name</th>
    <td>Vivek</td>
  </tr>
  <tr>
    <th rowspan="2">Phone No.</th>
    <td>077-48112</td>
  </tr>
<tr><td>75110000</td></tr>
</table>

Output:

Name Vivek
Phone No. 077-48112
75110000

If you do not want to do HTML coding or you are short of time, then you can also use some online HTML table generator and create tables as per your requirement.

Some useful table generator links are given below:

With the help of these tools, you can also do table styling and generate HTML table code in a very short time.

read also

HTML Table in Hindi – FAQ

Can we create another table inside an HTML table?

Yes, you can do this. You can write the code of another table inside the cell of the table.

How to Styling HTML Table?