All TalkersCode Topics

Follow TalkersCode On Social Media

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

How To Make A Table In HTML

Last Updated : Mar 11, 2024

How To Make A Table In HTML

In this tutorial we will show you how to make a table in HTML, in HTML, there is also a feature of making 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.

Step By Step Guide On How To Make 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, 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.
  6. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, we can say that a table is very easy concept in html, in which 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.

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

Author Image About Ashish

Ashish is a dynamic and motivated individual with a passion of programming and an experienced programmer having 3+ years of experience in various languages like Java, Python, HTML, CSS, JavaScript, jQuery and various frameworks like Bootstrap

Follow Ashish On Linkedin 🡪