Alignment Table HTML5 content

Asked

Viewed 86 times

0

Good afternoon, everyone,

someone can tell me which change is missing in my code so that my table has data below the column shown in the photo?

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

tabela

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

  • You can create a div around the list and use css to modify the position

  • 1

    Here you teach how to use css: https://www.w3schools.com/css/css_howto.asp

  • And here you teach how to modify position:https://www.w3schools.com/css/css_positioning.asp

1 answer

1


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.

Browser other questions tagged html5 table alignment

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