HTML valign não funcionando html

gaiak · 18 de agosto de 2023

Olá, estava assistindo uma aula hoje a respeito dos atributos align e valign em <table>, porém, na hora de aplicar na prática, simplesmente o atributo "valign" não funciona, tentei atribuindo o mesmo em <tr> e em <td> até mesmo em <table> e simplesmente não vai, até li em alguém lugar que hoje em dia se faz isso no CSS e não mais no HTML.

Mas, ao pegar abrir o arquivo html do professor (screenshot abaixo), abre normalmente, não to conseguindo entender o que estou fazendo de errado.

Se alguém puder me ajudar nessa, agradeço!

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>TEST 4</title>
  </head>
  <body bgcolor=lightblue text=red>
   <h1 align=center>Moon's Hospital</h1>
   <table align=center border cellpadding=20>
    <caption>Daily Blood Donors May 15TH 2008</caption>
    <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Blood Type</th>
    </tr>
    <tr>
     <td>Anna</td>
     <td>28</td>
     <td>0+</td>
    </tr>
    <tr valign=bottom>
     <td>Nyx</td>
     <td>32</td>
     <td>AB+</td>
    </tr>
    <tr>
     <td>Odette</td>
     <td>59</td>
     <td>0+</td>
    </tr>
    <tr>
     <td>Olivia</td>
     <td>18</td>
     <td>A+</td>
    </tr>
   </table>
  <br>
   <table align=center border cellpadding=20>
    <caption>Daily Blood Donors May 15TH 2008</caption>
    <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Blood Type</th>
    </tr>
    <tr>
     <td>Anna</td>
     <td>28</td>
     <td>0+</td>
    </tr>
    <tr>
     <td>Nyx</td>
     <td valign=bottom>32</td>
     <td>AB+</td>
    </tr>
    <tr>
     <td>Odette</td>
     <td>59</td>
     <td>0+</td>
    </tr>
    <tr>
     <td>Olivia</td>
     <td>18</td>
     <td>A+</td>
    </tr>
   </table>
  </body>
 </html>

SAFEDISK · 18 de agosto de 2023

@gaiak Você está se esquecendo de colocar o " " dentro dos campos, tente colocar dessa forma abaixo:

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>TEST 4</title>
  </head>
  <body bgcolor="lightblue" text="red">
   <h1 align="center">Moon's Hospital</h1>
   <table align="center" border cellpadding="20">
    <caption>Daily Blood Donors May 15TH 2008</caption>
    <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Blood Type</th>
    </tr>
    <tr>
     <td>Anna</td>
     <td>28</td>
     <td>0+</td>
    </tr>
    <tr valign="bottom">
     <td>Nyx</td>
     <td>32</td>
     <td>AB+</td>
    </tr>
    <tr>
     <td>Odette</td>
     <td>59</td>
     <td>0+</td>
    </tr>
    <tr>
     <td>Olivia</td>
     <td>18</td>
     <td>A+</td>
    </tr>
   </table>
  <br>
   <table align="center" border cellpadding="20">
    <caption>Daily Blood Donors May 15TH 2008</caption>
    <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Blood Type</th>
    </tr>
    <tr>
     <td>Anna</td>
     <td>28</td>
     <td>0+</td>
    </tr>
    <tr>
     <td>Nyx</td>
     <td valign="bottom">32</td>
     <td>AB+</td>
    </tr>
    <tr>
     <td>Odette</td>
     <td>59</td>
     <td>0+</td>
    </tr>
    <tr>
     <td>Olivia</td>
     <td>18</td>
     <td>A+</td>
    </tr>
   </table>
  </body>
 </html>

Dessa forma o HTML irá interpretar a tabela da forma correta.

E sim, de fato hoje em dia o mais correto é alinhar a tabela usando o CSS, mas como você está aprendendo não há mal nenhum aprender sobre as tags do HTML.