0

Bom dia pessoal,

estou tentando colocar três imagens na mesma coluna, mas não estou conseguindo.

Alguém saberia dizer qual o erro do meu código?

Segue imagem de onde eu gostaria de colocar o dados e o código que estou utilizando.

Tabela

index.html

<html>
    <head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

 <table>
    <thead>
        <tr>
           <th class="title">Pacientes</th>
           <th class="title">Como estou?</th>
           <th class="title">Administrar Paciente</th>
        </tr>
    </thead>
    <tbody>
      <tr>
           <td><?=$linha['name']?></td>
           <td> <?=$$linnha['item_key']?> </td>
           <td> <a href="viewPatient.html" id="viewPatient"> <img id="viewPatientIcon" src="https://freeiconshop.com/wp-content/uploads/edd/eye-outline.png" alt="eye icon" width="30" height="30"/> </a> </td>          
            <td> <a href="editPatient.html" id="editPatient"> <img id="editPatientIcon" src="https://cdn4.iconfinder.com/data/icons/software-menu-icons/256/SoftwareIcons-68-512.png" alt="pen icon" width="30" height="30"/> </a> </td>
            <td> <a href="deletePatient" id="deletePatient"> <img id="deletePatientIcon" src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-coloricon/21/19-512.png" alt="delete icon" width="30" height="30"/> </a></td>
        </tr>
    </tbody>
</table>

</body>
</html>
3
  • Onde está o while($linha... ou foreach($linha.. ? Commented 12/04/2019 às 14:32
  • Eu estou tentando formatar a visualização dos dados que puxo do banco via php.
    – Luke
    Commented 12/04/2019 às 14:38
  • 1
    Ola Laura, para sua pergunta, a resposta do @Alexandre Cavaloti, parece ser o suficiente para deixar as 3 imagens na mesma coluna. Vi que você está usando imagens da net, eu indico no lugar dessas imagens você usar os iconis, pode ser do bootstrap, ou fontawesome, para suas páginas, a não ser que seja um requisito do sistema usar essas imagens. Elas são mais leves e também bem fácil de implementar, no site tem a documentação. Experimente, caso já conheça e não usou recomendo usar. Só um dica. ;-) Commented 14/04/2019 às 0:28

2 Respostas 2

3

Tente utilizar uma mesma coluna para as imagens. Pois há 3 headers th e há 5 colunas td, reduza para 3 colunas td :

<html>
    <head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

 <table>
    <thead>
        <tr>
           <th class="title">Pacientes</th>
           <th class="title">Como estou?</th>
           <th class="title">Administrar Paciente</th>
        </tr>
    </thead>
    <tbody>
      <tr>
           <td><?=$linha['name']?></td>
           <td> <?=$$linnha['item_key']?> </td>
           <td> <a href="viewPatient.html" id="viewPatient"> <img id="viewPatientIcon" src="https://freeiconshop.com/wp-content/uploads/edd/eye-outline.png" alt="eye icon" width="30" height="30"/> </a>           
             <a href="editPatient.html" id="editPatient"> <img id="editPatientIcon" src="https://cdn4.iconfinder.com/data/icons/software-menu-icons/256/SoftwareIcons-68-512.png" alt="pen icon" width="30" height="30"/> </a> 
             <a href="deletePatient" id="deletePatient"> <img id="deletePatientIcon" src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-coloricon/21/19-512.png" alt="delete icon" width="30" height="30"/> </a></td>
        </tr>
    </tbody>
</table>

</body>
</html>
1

Neste trecho:

<thead>
    <tr>
       <th class="title">Pacientes</th>
       <th class="title">Como estou?</th>
       <th class="title">Administrar Paciente</th>
    </tr>
</thead>

Você pode fazer assim:

<thead>
    <tr>
       <th class="title">Pacientes</th>
       <th class="title">Como estou?</th>
       <th class="title" colspan="3">Administrar Paciente</th>
    </tr>
</thead>

Adicionar a colspan para que ela faça uma mesclagem das colunas e deixe na mesma linha os demais.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .