Why do my table data appear in the center left of the table rather than at the top?

HTML:

  <head>
    <link   href="index.css" type="text/css" rel="stylesheet">
    <title>Sami's CSS Noes</title> 
  </head>
<!--Body of Work-->

  <header> 
    <h1 class="title">Sami's Notes</h1> 
  </header>

  <nav>
    <ul id="tabelrow">
      <tr>
        <td><a href="./HTML notes.html">HTML Tables</a></td>
        <td><a href="./CSS notes.html">CSS Selectors</a></td>
      </tr>
      </ul>
  </nav>

  <table>
      <tr>
        <td class="bio"><h3><br>About me</h3>
        <p id="about-site">Hi, my name is Sami! Thank you for visiting my website. 
          Here, you will find my CSS and HTML notes for beginners. 
          Please use the information on this site for reference as 
          you go through your CSS and HTML-learning journey. 
        </p>
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Jackie_Chiles_in_The_Maestro_Seinfeld.JPG/220px-Jackie_Chiles_in_The_Maestro_Seinfeld.JPG">
            <!--220 x 285-->
        </td>

        <td>
          <td class="bio-two"><h3>Firms</h3>
            <img id="clarke" src="https://storage.googleapis.com/caifornia-connect-prod/networklogo/osborne-clarke-llp.png"/>
            <img id="taylor" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQH-vZtWTA4lMw3BcwfwgF9U3t4O74goTo_9w&usqp=CAU">
            <img id="hsf" src="https://m8w8u5d7.stackpathcdn.com/wp-content/uploads/2018/09/HSF-Platinum-Profile.jpg">
            <img id="hfw" src="https://i.ytimg.com/vi/t8m5eRhay6c/maxresdefault.jpg">
            <img id="bird" src="https://www.imgl.org/sites/default/files/media/company_logos/green.jpg">
          </td>
        </td>
        
        <td>
          <td class="bio-three"><h3>Socials</h3>            
          </td>
        </td>
      
  </table>

  </aside>


</html>





CSS:

h1 {
    color: black;
    text-align: center;
    font-family: Arial;
    }

#tabelrow {
    background-color: cyan;
    text-align: center;
    padding: 0.5%;
    font-family: Arial;
    position: sticky; 
    position: -webkit-sticky;
    top:0;  
}

/*BLOCK 1*/
.bio {
    width: 220px;
    font-family: Arial;    
    background-color: #007575;
}

h3 {
    color: whitesmoke;
    margin: 10px;
    text-align: justify;
}

#about-site {
    color: whitesmoke;
    margin: 10px;
}

.bio-two {
    background-color: #009e9e;
    font-family: Arial; 
    width: 220px;
    
}

#clarke {
    width: 285px;
}
#taylor {
    width: 285px;
}
#hsf {
    width: 285px;
}
#hfw {
    width: 285px;
}
#bird {
    width: 200px;
}

.bio-three {
    background-color: #009e9e;
    font-family: Arial; 
    width: 220px;
}

#twitter {
    width: 50%;
}

Hey!

Should be fixed if you change your bio-three class to include vertical-align: top; and text-align center and remove text-align: justify from your h3.

Whenever I’m in doubt, I check MDN documentation (it’s really a gold standard). The key is what to check? In this case, because your element is a td (table data cell), I would check here. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td. Note that you do have to read the fine print on what’s deprecated and what they recommend for current use.

2 Likes

Thanks again for your help!

So cool! :+1: :+1: :+1: :+1: :+1: :+1: