Сделай мой стол реальностью
Я пытаюсь создать HTML-таблицу, как эта (это эскиз из Excel):
но только способен создать что-то вроде этого:
Я также пытался поместить штрих-коды в поля, содержащие 1, но это также не работает.
Вот мой код таблицы:
<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>
Можно ли сделать мой набросок реальностью? Я также читал о проблемах с совместимостью с IE, что меня беспокоит, потому что я планирую превратить HTML в PDF, который я читаю, обычно использует отображение IE как winnovative.
Читая целые идеи и комментарии, я думаю, что, возможно, мне следует составить таблицу построения таблицы только на основе элементов div. Можно ли получить некоторые советы о том, как создать таблицу такого типа?
1 ответ
Посмотрите, поможет ли следующий код, я только что добавил высоту к 2 элементам td:
<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>