Selam, Yakın bir arkadaşımın mağazası için fatura şablonu oluşturmaya çalışıyorum. HTML ve CSS ileri düzey bilgim olmadığı için düşe kalka yapmaya çalışıyorum Çok basit görünen bir kısımda kaldım. Yardımcı olabilecek arkadaş imzamda bulunan tema veya eklentiyi hediye edebilirim.

Aslında aşağıdaki görüntü tablonun bir satırı tablo içinden devam ettirmem gerekiyordu fakat uzunlamasına dikey çizgi olan kısmı ve 2 sütunlu birleştirme kısımları olduğu için çok istemesem de farklı tablo oluşturarak ekleme yapmaya çalışacağım yada fieldset gibi çözülebilir mi bilmiyorum.

Yukarıda göründüğü gibi 2 satır yüksekliğinde bir satır veya dikdörtgen her neyse ona ihtiyacım var. Benim en yaklaştığım kod yaklaşımı şöyleydi ama hiç alakası yok

<table style="width: 100%; border-collapse: collapse; border-top: 1px solid #000; margin-top: 0.2cm;">
    <tr>
        <!-- Sipariş Alan -->
        <td style="text-align: center; vertical-align: middle; width: 20%;"><strong>SİPARİŞ ALAN</strong></td>
        <td style="border-right: 1px solid #000;"></td> <!-- Dikey Çizgi -->
        <td style="width: 10%;"></td> <!-- Boş Sütun Dikey Çizgi yerine -->

        <!-- ADI SOYADI ve İMZA için ikinci sütun -->
        <td style="width: 20%; padding-left: 0.2cm;">
            <div><strong>ADI SOYADI:</strong></div>
            <div><strong>İMZA:</strong></div>
        </td>

        <!-- Sipariş Veren -->
        <td style="text-align: center; vertical-align: middle; width: 20%;"><strong>SİPARİŞ VEREN</strong></td>
        <td style="width: 10%;"></td> <!-- Boş Sütun Dikey Çizgi yerine -->
        <td style="border-right: 1px solid #000;"></td> <!-- Dikey Çizgi -->

        <!-- ADI SOYADI ve İMZA için dördüncü sütun -->
        <td style="width: 20%; padding-left: 0.2cm;">
            <div><strong>ADI SOYADI:</strong></div>
            <div><strong>İMZA:</strong></div>
        </td>
    </tr>
</table>

Yukarıdaki kod aşağıdaki aşağıdaki sipariş alan kısmının görüntüsünü verdi.


Konu ile alakalı uzman arkadaşların yardımlarına sunarım