Question 135925 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Table is displayed with header at the bottom

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search