All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Create A Table In HTML

Last Updated : Mar 11, 2024

How To Create A Table In HTML

In this tutorial we will show you how to create a table in HTML, in HTML, there is also a feature of creating a table. A table is a combination of rows and columns and the intersection of these in known as cell.

Cell is used to store data in html. In simple language, we can say that a table is used to store data in html and used to show data in HTML in tabular form that we have feed.

Step By Step Guide On How To Create A Table In HTML :-

As, table are combination of rows, columns and cells. Hence, there are some tags that are used in table tag to create a table.

  • Tr: tr is table row and to show data on screen we have to write text and other tags under this tag.
  • Th: th is known as table header, it is used in tr tag and mostly used in first tr. The text written inside this tag become bold and looks like a header, hence that’s the reason behind its name.
  • Td: td is known as table data. This tag is also used under tr tag and is used to show data in webpage, this tag uses simple font style to show the data under headings.

The all tags are written under table tag, here is an example to show you how to use them in html.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<table border="1px solid black">
        <tr>
            <th>
                Student's Name
            </th>
            <th>
                Class
            </th>
            <th>
                Stream
            </th>
        </tr>
        <tr>
            <td>
                Ram
            </td>
            <td>
                5th standard
            </td>
            <td>
                Medical
            </td>
        </tr>
        <tr>
            <td>
                Sham
            </td>
            <td>
                8th standard
            </td>
            <td>
                Arts
            </td>
        </tr>
        <tr>
            <td>
                Bheem
            </td>
            <td>
                1st Standard
            </td>
            <td>
                Science
            </td>
        </tr>
    </table>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, as specified we use table tag and under this tr table rows are created to specify the number of rows for text.
  5. Under first tr we use th to give headings to every column and in other tr table rows, we write about td that table data
  6. Now when you run this program, you see borders are not appeared, so we use border property in table tag to give table a border of width 1px and solid black to give it solid property with black color.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, we can say that in table we have to use only table tag and under this we have to use tr, both are mandatory and after this under tr we can also use th and td as our wishes and the number of td and th are used are equal to number of columns in html.

I hope this tutorial on how to create a table in HTML helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪