0

Estoy intentando hacer una simple plantilla para un correo, por lo que estoy usando tablas en HTML.

Pero no entiendo porque en la ultima fila, las celdas no se mantienen dentro de la fila, se supone que el ancho de la fila no debería exceder el ancho de la tabla, pero si se fijan, las celdas se exceden y salen fuera de la tabla incluso. estoy dando un ancho fijo a cada celda que no excedan el 100% entre las 3 celdas y aún así se desborda. No entiendo por que sucede eso, acá está el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                margin: 0; 
                padding: 0; 
                min-width: 100% !important;
            }
            .content {
                width: 100%; 
                max-width: 600px;
                margin-top: 40px; 
                table-layout: fixed;
            }
            .text-center {
                text-align: center;
            }  
        </style>
    </head>
    <body>
        <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td class="text-center" width="100%">
                    XxxxxX
                </td>
            </tr>
            <tr>
                <td class="text-center" style="padding: 100px 15px 0px 15px" width="100%">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eum libero delectus dolorem ad quam aperiam quos explicabo saepe autem commodi! Quia recusandae, inventore illo? Voluptatibus, eligendi! Ducimus obcaecati, perferendis?
                </td>
            </tr>
            <tr>
                <td class="text-center" style="padding-top: 30px;" width="100%">
                    Lorem ipsum dolor sit amet consectetur
                </td>
            </tr>
            <tr>
                <td style="padding-left: 20px;" width="100%">  
                    <ul>
                        <li>Lorem ipsum, dolor sit amet, consectetur </li>
                        <li>sit repellendus eaque quisquam quaerat vero.</li>

                    </ul>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 100px;" width="100%">
                    <hr>
                </td>
            </tr>
            <tr>
                <td style="width: 30%;">
                    XxxxxxxX<br><br>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ipsam tempora nihil magnam consequatur perferendis commodi explicabo sapiente quidem nulla nobis odio dignissimos incidunt illo dolores expedita, neque corporis corrupti?
                </td>
                <td style="width: 30%;">
                    1111111 <br><br>
                    22222222<br>
                    33333333333333333
                </td>
                <td style="width: 30%;">
                    Enlaces Útiles <br><br>
                    <a href="">Xxxxxx</a> <br>
                    <a href="">yyyyyy</a> <br>
                    <a href="">Zzzzzzz</a> <br> 
                </td>
            </tr>
        </table>

    </body>
</html>

1 respuesta 1

1

Necesitas agregar el atributo colspan="3" en cada uno de los tr superiores para que se conserven las proporciones de las celdas inferiores. El parámetro 3 es porque tienes tres columnas en la última fila, pero ahí puedes poner la cantidad de columnas que quieras abarcar.

Es la manera correcta de maquetar una tabla en HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                margin: 0; 
                padding: 0; 
                min-width: 100% !important;
            }
            .content {
                width: 100%; 
                max-width: 600px;
                margin-top: 40px; 
                table-layout: fixed;
            }
            .text-center {
                text-align: center;
            }
            .footer {
                width: 30%;
                vertical-align: top;
            }
        </style>
    </head>
    <body>
        <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td class="text-center" width="100%" colspan="3">
                    XxxxxX
                </td>
            </tr>
            <tr>
                <td class="text-center" style="padding: 100px 15px 0px 15px" width="100%" colspan="3">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eum libero delectus dolorem ad quam aperiam quos explicabo saepe autem commodi! Quia recusandae, inventore illo? Voluptatibus, eligendi! Ducimus obcaecati, perferendis?
                </td>
            </tr>
            <tr>
                <td class="text-center" style="padding-top: 30px;" width="100%" colspan="3">
                    Lorem ipsum dolor sit amet consectetur
                </td>
            </tr>
            <tr>
                <td style="padding-left: 20px;" width="100%" colspan="3">  
                    <ul>
                        <li>Lorem ipsum, dolor sit amet, consectetur </li>
                        <li>sit repellendus eaque quisquam quaerat vero.</li>

                    </ul>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 100px;" width="100%" colspan="3">
                    <hr>
                </td>
            </tr>
            <tr>
                <td class="footer">
                    XxxxxxxX<br><br>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ipsam tempora nihil magnam consequatur perferendis commodi explicabo sapiente quidem nulla nobis odio dignissimos incidunt illo dolores expedita, neque corporis corrupti?
                </td>
                <td class="footer">
                    1111111 <br><br>
                    22222222<br>
                    33333333333333333
                </td>
                <td class="footer">
                    Enlaces Útiles <br><br>
                    <a href="">Xxxxxx</a> <br>
                    <a href="">yyyyyy</a> <br>
                    <a href="">Zzzzzzz</a> <br> 
                </td>
            </tr>
        </table>
    </body>
</html>

https://www.w3schools.com/tags/att_td_colspan.asp

4
  • Ok, y como podría hacer para que en la ultima fila el comienzo de cada celda este a la misma altura? si vez la frase enlaces útiles no esta a la misma altura del contendido de la celda #2 ni a la misma altura del contenida de la celda #1.
    – JulianProg
    el 30 mar. 2021 a las 4:27
  • Esa es una pregunta totalmente diferente. Sin embargo, edité el código para dejarte un ejemplo. Trata de no usar estilos en línea, en su lugar usa reglas CSS para la maquetación.
    – DjCrazy
    el 30 mar. 2021 a las 4:34
  • Perfecto, muchas gracias amigo, y si, tomaré eso en cuenta. Tendrás experiencia creando plantillas para correos electrónicos? según tengo entendido son un poco problemáticas y por eso hay que trabajarlas con tablas para evitar tener problemas. Pero para que sea totalmente responsivas es posible usar media queries? para ajustar el tamaño de una fuente, por ejemplo? serían tomadas en cuenta en Gmail u otros correos? Si puedes responderme eso por acá te lo agradecería, sino, pues no hay problema. marqué tu respuesta como la solución y además la marqué como útil. Y de nuevo, muchas gracias.
    – JulianProg
    el 30 mar. 2021 a las 4:38
  • Es correcto, se recomienda trabajarlas con tablas y si es posible usar media queries.
    – DjCrazy
    el 30 mar. 2021 a las 4:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.