<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .titulo {
            text-align: center;
            font-weight: bold;
            display: flex;
            border: none;
        }

        table {
            margin: 0;
            border-collapse: collapse;
            width: 100%;
            border: 1px solid black;
        }

        .img-producto {
            width: 150px;
            height: 50px;
        }

        .td-precio {
            width: 250px;
        }

        .info {
            text-align: right;
            width: 50px;
        }
    </style>
</head>

<body>
    <table class="titulo">
        <tr>
            <th align="center" style="width: 450px;">
                <p>ALMACEN BC S.A.S</p>
                <p>CATALOGO DE PRODUCTOS</p>
                <p>MABE</p>
                <br>
            </th>
            <th align="rigth" style="width: 100px;">
                <span>EM~EMPIRE®</span><br>
                <span>xx/xx/xxxx xx:xx PM</span>
            </th>
        </tr>
    </table>


    <!-- para esto se crea dos tr para poder funcionar asi que se crea un for con estos 2 tr se crea y dentro del for iria dentro el table para que se cre una tabla por cada producto-->
    <table>
        <tr style="padding:10px">
            <td><b>Codigo: xxxxxxx</b></td>
            <td align="center" class="td-precio">REF: xxxxxxxxxxxx</td>
            <td rowspan="2" style="width: 100px;">
                <div>
                    <p>PVP: 2.500.000</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <img class="img-producto" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvkkPiRdvMlagKwE6M3srY-9kS8Vvm6-cdzw&usqp=CAU">
                </div>
            </td>
            <td class="td-precio">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, officia. Iusto iste corporis cupiditate! Dicta eligendi vero mollitia a, ratione animi libero aliquam quae dolor ea incidunt quia, sit, officia hic natus repudiandae? Rerum explicabo natus, harum esse laboriosam quasi nemo necessitatibus voluptate velit vitae, atque, nobis et nostrum neque.</td>

        </tr>
    </table>
    <!-- fin del for -->
    <table>

        <tr style="padding:10px">
            <td><b>Codigo: xxxxxxx</b></td>
            <td align="center" class="td-precio">REF: xxxxxxxxxxxx</td>
            <td rowspan="2" style="width: 100px;">
                <div>
                    <p>PVP: 2.500.000</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <img class="img-producto" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvkkPiRdvMlagKwE6M3srY-9kS8Vvm6-cdzw&usqp=CAU">
                </div>
            </td>
            <td class="td-precio">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, officia. Iusto iste corporis cupiditate! Dicta eligendi vero mollitia a, ratione animi libero aliquam quae dolor ea incidunt quia, sit, officia hic natus repudiandae? Rerum explicabo natus, harum esse laboriosam quasi nemo necessitatibus voluptate velit vitae, atque, nobis et nostrum neque.</td>

        </tr>
    </table>

</body>

</html>