Why is my table vertical instead of horizontal?-CodePudding

it is supposed to be horizontal in all the tutorials but mine comes out vertical. What's the issue? I copied this straight from the tutorial that is supposed to be horizontal but when I load it up in chrome in my file its horizontal.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
table, th, td {
 border: 1px soild black;
}
th {
  text-align: left;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>
</body>
</html>

CodePudding user response：

Currently you are placing each row into a single column. I think this is the version you want to be using:

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>50</td>
    </tr>
</table>

CodePudding user response：

This is because you are placing the <th> in every <tr> row instead of all <th> which should come in first <tr> row. Something like this you need to do.

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>50</td>
  </tr>
</table>

CodePudding user response：

You can write like this, and this will be better for you.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
table, th, td {
 border: 1px soild black;
}
th {
  text-align: left;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>

  </tr>
  <tr>
    
    <td>Smith</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Eve</td>
    <td>50</td>
  </tr>
</table>
</body>
</html>