Make my table into reality

Question

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?

What exactly is the difference between your table and the sketch? The layout looks the same to me. Is the spacing what you want to change? — John Dvorak, May 27 '14 at 16:59
Well, I want to make it or rather learn how to cause I thought that there will be no problem to create it and I was wrong. What about spacing, cause it might be a reason of my incompetence ? My main reason is to hold sizes of each td I mean that starting from third row connection of cells should be in the middle — user3680634, May 27 '14 at 17:21

score 0 · Answer 1 · answered May 27 '14 at 17:49

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>

Well, increasing height didn't help – user3680634 May 27 '14 at 18:30 — user3680634, May 27 '14 at 18:30

Make my table into reality

1 Answers1