HTML/CSS Tıkandım... Yardım R10+

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

Up, yardımı dokunsun

faturanın fotosunu atabilirmisin hocam bi bakayım

İlginiz icin tesekkur ettim hocam kisisel veriler icerdigi icin karalayip ekledim.

Hocam bu gibi durumlarda tinymce gibi text editörlerde tablo yapıp sonrasında tarayıcı üzerinden stil düzenlemesini yapıyorum. Aşağıda ki table dökümü bir miktar işinize yarayabilir.

<table style="border-collapse: collapse; width: 100%;" border="0">
    <tbody style="border: 1px solid #000;">
        <tr style="height: 30px;">
            <td colspan="6"></td>
        </tr>
        <tr style="height: 30px;">
            <td style="border-right: 1px solid #000; padding: 15px;" rowspan="2">SİPARİŞ ALAN</td>
            <td style="padding: 7.5px 15px;">ADI SOYADI:</td>
            <td style="width: 20%;" rowspan="2"></td>
            <td style="border-right: 1px solid #000; padding: 15px;" rowspan="2">SİPARİŞ VEREN</td>
            <td style="padding: 7.5px 15px;">ADI SOYADI:</td>
            <td style="width: 20%;" rowspan="2"></td>
        </tr>
        <tr style="height: 30px;">
            <td style="padding: 7.5px 15px;">İMZA:</td>
            <td style="padding: 7.5px 15px;">İMZA</td>
        </tr>
        <tr style="height: 30px;">
            <td colspan="6"></td>
        </tr>
    </tbody>
</table>

TinyMCE:


Tarayıcı Önizleme:

Şuna bi bakabilirmisin hocam https://codepen.io/kazimolmez/pen/poBMrOy

Cok tesekkur ederim hocam yardiminiz icin her isin kolayi var tema veya eklenti ihtiyaciniz varsa pm’den yardimci olmaktan mutlu olurum. Elinize saglik.
Hocam eline saglik cok tesekkur ettim. Tema veya eklenti ihtiyaciniz varsa pm’den yardimci olmaktan mutlu olurum. Elinize saglik.