Table is displayed with header at the bottom-CodePudding

I have made a simple HTML page, using Visual Studio Code, that should display a table:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Height</th>
        <th>Weight</th>
      </tr>
      <tr>
        <dt>180 cm</dt>
        <dt>70 kg</dt>
      </tr>
      <tr>
        <dt>182 cm</dt>
        <dt>75 kg</dt>
      </tr>
    </table>
  </body>
</html>

But when I run the page using Live Server, I get the following display.

180 cm
70 kg
182 cm    
75 kg
Height  Weight

As you can see, the headers are at the bottom instead of the top, and the rows of the body of the table do not form columns. Please your advice.

CodePudding user response：

You are writing the Table data (td) tag wrong. It should be td not dt.

<table>
  <tr>
    <th>Height</th>
    <th>Weight</th>
  </tr>
  <tr>
    <td>180 cm</td>
    <td>70 kg</td>
  </tr>
  <tr>
    <td>182 cm</td>
    <td>75 kg</td>
  </tr>
</table>

CodePudding user response：

Try this instead:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
      <tr>
        <th>Height</th>
        <th>Weight</th>
      </tr>
    </thead>
     <tbody>
      <tr>
        <td>180 cm</td>
        <td>70 kg</td>
      </tr>
      <tr>
        <td>182 cm</td>
        <td>75 kg</td>
      </tr>
     </tbody>
    </table>
  </body>
</html>

you don't used <thead> & <tbody>, which is the main block of table.

<thead> is for header of table, the columns' that show title of row.

<tbody> is for body of table, the place that your row added into it.

also you spell <td> wrong (dt)