HTML5 table content alignment

Question

HTML5 table content alignment

Good Afternoon folks,

Can anyone tell me what change is missing in my code so that my table gets data under the column shown in the photo?

Below is a photo of the expected result and my code:

Index.html

 <!DOCTYPE html>
<html>
<body>

<table>

    <thead>
        <tr>
            <th>Pacientes</th>
            <th>Como estou?</th>
            <th>Administrar Paciente</th>
        </tr>
    </thead>
    <tbody> 

        <tr>
            <tr><td>Maria</td></tr>
            <tr><td>João</td></tr>
            <tr> <td>Joana</td></tr>
        </tr>

        <td>
            <tr>
                <tr> <td>Sequencia de imagens (selecionada bem)</td> </tr>
                <tr> <td>Sequencia de imagens (selecionada mal)</td> </tr>
                <tr> <td>Sequencia de imagens (selecionada mal)</td> </tr>
            </tr>
        </td>

        <tr>
            <tr><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></tr>
            <tr><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></tr>
            <tr><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>  
        </tr>
    </tbody>
</table>

</body>
</html>

0

html5 tabela alinhamento

Author: Laura Regina, 2019-04-05

Source

1 answers

score 1 · Accepted Answer

The problem is in the structure you created to mount the table, try this way:

<table>
    <thead>
        <tr>
           <th>Pacientes</th>
           <th>Como estou?</th>
           <th>Administrar Paciente</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>Maria</td>
           <td>Sequencia de imagens (selecionada bem)</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>
        </tr>
        <tr>
           <td>João</td>
           <td>Sequencia de imagens (selecionada mal)</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>
        </tr>
    </tbody>
</table>

Note that each TR represents the entire row of the table, and each TD represents each cell, each data that is part of the same row.