Make my table into reality

175 Views Asked by At

I'm trying to create html table like this one (It's a sketch from Excel):

The sketch from Excel

but only capable to create something like this:

This is being created

I also tried to to put barcodes in fields containing 1 but it also do not work.

Here is my table code:

<table width 384pt; display inline; align="left" border="1">
    <tr>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Recipient of goods, short address
            </span><br><span style="font-size: 6pt;">Some adress</span>
        </td>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Unloading point – Storage location – Usage code
            </span>
            <br>
            <span style="color:red; font-size: 8pt;">
                PPPPP / 21
            </span>
        </td>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Delivery note no. (N)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">
                1111
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="12">
            <span style="font-size: 4pt;">
                Part No. Customer (P)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">111.111.111.111</span>
        </td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2">
            <span style="font-size: 4pt;">
                Capacity (Q)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">
                111.111
            </span>
            <br>
        </td>
        <td colspan="6">
            <span style="font-size: 4pt;">
                Name of delivery, service
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2">
            <span style="font-size: 4pt;">
                Packaging no. Customer(B)
            </span>
            <span style="font-size: 8pt; font-weight:bold; margin-left:10px;">
                111111111
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2">
            <span style="font-size: 4pt;">
                Supplier No. (V)
            </span>
            <span style="font-size: 8pt;  font-weight:bold;margin-left:10px;">
                111111
            </span></td>
    </tr>
    <tr>
        <td colspan="2">
            <span style="font-size: 4pt;">
                Date
            </span>
            <br>
            <span style="font-size: 8pt; font-weight:bold;">
                2014-05-27
            </span>
        </td>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Design change status
            </span>
            <br>
            <span style="font-size: 8pt; color:red; font-weight:bold;">
                2014-05-27  18:20
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <span style="font-size: 4pt;">
                Package No. (S)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">
                1
            </span>
        </td>
        <td colspan="6">
            <span style="font-size: 4pt;">
                Batch nos. (H)
            </span>
        </td>
    </tr>
</table>

Is it possible to make my sketch a reality? I also read about problems with compatibility with IE which worries me, cause I'm planning to make html into PDF which I read usually uses IE display like winnovative.

Reading whole ideas and comments I think that maybe I should make table build table only on div's is it possible to receive some hints how to create this kind of table?

1

There are 1 best solutions below

1
On

see if following code helps, I have just added height to 2 td elements:

<table width 384pt; display inline; align="left" border="1">
    <tr>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Recipient of goods, short address
            </span><br><span style="font-size: 6pt;">Some adress</span>
        </td>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Unloading point – Storage location – Usage code
            </span>
            <br>
            <span style="color:red; font-size: 8pt;">
                PPPPP / 21
            </span>
        </td>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Delivery note no. (N)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">
                1111
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="12">
            <span style="font-size: 4pt;">
                Part No. Customer (P)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">111.111.111.111</span>
        </td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2">
            <span style="font-size: 4pt;">
                Capacity (Q)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">
                111.111
            </span>
            <br>
        </td>
        <td colspan="6" style="height:15pt;">
            <span style="font-size: 4pt;">
                Name of delivery, service
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2" style="height:28pt;">
            <span style="font-size: 4pt;">
                Packaging no. Customer(B)
            </span>
            <span style="font-size: 8pt; font-weight:bold; margin-left:10px;">
                111111111
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2">
            <span style="font-size: 4pt;">
                Supplier No. (V)
            </span>
            <span style="font-size: 8pt;  font-weight:bold;margin-left:10px;">
                111111
            </span></td>
    </tr>
    <tr>
        <td colspan="2">
            <span style="font-size: 4pt;">
                Date
            </span>
            <br>
            <span style="font-size: 8pt; font-weight:bold;">
                2014-05-27
            </span>
        </td>
        <td colspan="4">
            <span style="font-size: 4pt;">
                Design change status
            </span>
            <br>
            <span style="font-size: 8pt; color:red; font-weight:bold;">
                2014-05-27  18:20
            </span>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <span style="font-size: 4pt;">
                Package No. (S)
            </span>
            <span style="font-size: 8pt; font-weight:bold;margin-left:10px;">
                1
            </span>
        </td>
        <td colspan="6">
            <span style="font-size: 4pt;">
                Batch nos. (H)
            </span>
        </td>
    </tr>
</table>