HTML Tables | How to Make a Table in HTML

This article is created to define all about how to create a table, or simply how can we insert tubular data on the web.

Four HTML Table Tags

While presenting data in the form of table, on the web. These are the four tags that are required:

  1. <TABLE>
  2. <TR>
  3. <TH>
  4. <TD>

The <TABLE> creates a table, whereas <TR> creates a row. To include the data in the table, you need to use either <TH> to include table heading, or <TD> to include normal table data.

Note - Don't forgot to close the tag, before creating new one.

HTML Table Row and Column Representation

html table row column representation

Column is created using TH and TD tag. Only these two tags are used to feed the data into the table. The examples regarding this, are given below.

HTML TABLE Tag

The <TABLE> tag is used to create a table. For example:

<table>
</table>

The output of above HMTL code, will be nothing, as I've not included any data inside the table. The data can be included using either <TH> or <TD> tag.

HTML TR Tag

The <TR> tag is used to create table row. For example:

<table>
   <tr>
   </tr>
</table>

Every <TR> followed by </TR> creates a row.

HTML TH Tag

The <TH> tag is used to create table heading data. For example:

<table>
   <tr>
      <th>FirstHeading</th>
      <th>SecondHeading</th>
   </tr>
</table>

As I've used TH tag in above example, that creates column. The column is used to insert the data into the table. Therefore the output of above example should be:

FirstHeading SecondHeading

HTML TD Tag

The <TD> tag is used to create normal table data. For example:

<table>
   <tr>
      <th>FirstHeading</th>
      <th>SecondHeading</th>
   </tr>
   <tr>
      <td>SecondRowFirstColumnData</td>
      <td>SecondRowSecondColumnData</td>
   </tr>
   <tr>
      <td>ThirdRowFirstColumnData</td>
      <td>ThirdRowSecondColumnData</td>
   </tr>
</table>

The output should be:

FirstHeading SecondHeading
SecondRowFirstColumnData SecondRowSecondColumnData
ThirdRowFirstColumnData ThirdRowSecondColumnData

Note - To create more rows, use TR. To create more columns use TH or TD. To feed data, use TH or TD, as indicated in examples.

Note - To style table, use Style Table using CSS. There, I've defined everything related to the styling of an HTML table.

HTML Online Test


« Previous Tutorial Next Tutorial »