Placing data in the same column (table) HTML5

Asked

Viewed 67 times

0

Good morning, everyone,

I’m trying to put three images in the same column, but I’m not getting it.

Would anyone know the error of my code?

Follow image of where I would like to put the data and the code I am using.

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>
html5 css3 table

  • Where is the while($line... or foreach($line.. ?

  • I’m trying to format the visualization of the data I pull from the database via php.

  • 1

    Ola Laura, for your question, the answer from @Alexandre Cavaloti, seems to be enough to leave the 3 images in the same column. I saw that you are using images from the net, I indicate in the place of these images you use the iconis, can be the bootstrap, or fontawesome, for your pages, unless it is a requirement of the system to use these images. They are lighter and also very easy to implement, the site has the documentation. Try, if you already know and have not used I recommend using. Just a tip. ;-)

2 answers

3

Try using the same column for the images. There are 3 headers th and there are 5 columns td, reduce to 3 columns 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


In this passage:

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

You can do it like this:

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

Add colspan to merge the columns and leave the others in the same row.

Browser other questions tagged html5 css3 table

You are not signed in. Login or sign up in order to post.