tr which stands for Table Row is an HTML element tag and is used to define a row of cells in a table.

You use tr whenever you want to create a table on an HTML page. The column cells can be created by using th (header cell) and td (data cell) element tags.

Example code

Here’s an example of how the tr tag is used to make a table in HTML. This simple table contains three rows and two head columns and six normal columns displaying a name and age of a person:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Wick</td>
    <td>57</td>
  </tr>
  <tr>
    <td>Tony Stark</td>
    <td>48</td>
  </tr>
  <tr>
    <td>Jack Sparrow</td>
    <td>39</td>
  </tr>
</table>

Let’s take a quick breakdown of what happening in this code:

  1. You begin by adding a table tag. These tags are mandatory to create a table.
  2. Inside the table tag, this is where you will use the tr tag to make a row of cells. You can add one or more rows to each table. Row cells go from up to down.
  3. Inside the tr tags, you add the columns by either using td or th tags. The th tag is used to make the header cell while the td tag is used to make a data cell. Column cells go from left to right.

In short, tr is what makes it possible to make a row of cells and it’s a necessary element to create a table in HTML.

This is how it will turn out on the browser:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/79698bf1-8532-4894-8805-1e4f8dfe6016/Screenshot_2021-07-07_at_16-14-58_Example_site.png

Some notices about the tr tag

  • The tr tag will usually contain one or more column element tags like th and td
  • The tr comes with the rowspan attribute, giving you the additional option of how many the rows should be span in the table cell.
  • By default, the tr tag does not come with borderlines. You will have to style it by yourself using CSS.