Header Ads

Home > html Tutorial > How to Create Table in HTML Step-by-Step

How to Create Table in HTML Step-by-Step

November 26, 2025

How to create table tag in html

html create table

This Blog You Will Learn 

ஃ What is an HTML Table

ஃ HTML Table Elements

ஃ Syntax of HTML <table> tag

 ஃ structure diagram examples

ஃ Explain Program

ஃ Output

What is an HTML Table

✅html table is way to display data in a grid format.
✅Tables contain row and columns.
✅easier for users to read and understand large sets of information
✅main container for table is <table> tag.
✅inside it can define rows,headers, and cells using special HTML  tags.

 HTML Table Elements
  •  <table>
  • TABAE  tag create the table structure all row amd cells must inside
  • <tr>   -  Table row
  • <th>  -  Table Header
  • <td> - Table tata

 Syntax of HTML <table> tag

<table >
<!-- table rows and cell go here-->

</table>

✔  HTML <table> tag  use create and structure the tabular data.

✔  html table  tag  information in rows and columns.

✔  html <table>     :-  defines the table.

✔  html <tr>           :-  table row

✔  html <th>          :-   table header cell center bold default  th

✔  html <td>          :-   table data cell

✔  html <caption>  :-  table description or title

 ஃ structure diagram examples

create table tag


how to create table tag in html

Example 


<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th,td {
         border:1px solid black;
      }
    </style>
  </head>
<body>
<h1>  Table tag html</h1>
  <table>
    <tr>
       <th> subject </th>
       <th> website</th>
    </tr>
    <tr>
      <th> HTML</th>
      <th> webdesigningtheory.blogspot.com</th>
    </tr>
    <tr>
      <th>PHP</th>
      <th> webdesigningtheory.blogspot.com</th>
    </tr>
  </table>
 
</body>
</html>

how to create table tag in html

Explain Program

Step  1] 

<!DOCTYPE html>

This declare the document type.

browser that the document is written in html

Step 2 ]

<html>.... . </html>

html is the root element of the html page.

 Every thing inside it is part of the webpage.

Step 3]

<head>.....</head>

head section contain metadata  about the webpage information 

for the browser not display on the webpage.

Step 4]

 
<style>
      table, th,td {
         border:1px solid black;
      }
</style>

 <style> tag is use to write css inside the HTML file.

CSS appearance of the webpage ( border, layout, fonts, color width, height ...etc )
 
   CSS Style 
  •  <table>  :-  create whole table .
  •  <th>      :-  create header cells.
  •  <td>     :-   create table data cells.
     border:1px solid black;
   
  1 px solid black border.  

          entire  table 
          header cell
         data cell

 
    </Style>
     
  End the css section 

</head>

    End the head part
 
Step 5]

 <h1>  Table tag html</h1>

  <h1> is the main heading  of the page
       table tag html


<tr>
       <th> subject </th>
       <th> website</th>
    </tr>



  •  table row ( <tr> )  tag html
  •  <tr> tag defines a single row in table.   
  •  define table row 
 
  •  <th> tag  (table header cells) 
  •  Text  bold and  Text Centered by default
  •   use for column titles 
 Step 6]

   Closing tag


 </table> 
</body>
</html>

 

  • <table>,<body>,<html>  tag contains  all the visible content of the page.
  • </table> ends the table.
  • inside <body> show the browser screen.
  • </html>  ends the HTML document 

how to create table tag in html

Output

how to create table tag in html





Related Post :-

how to use the html button input

how to create ordered lists in html

html alignment tag

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.