Пример использования вложенности таблиц |
Отдельные ячейки таблицы могут содержать любые теги, доступные в разделе body, в том числе внутри ячейки может быть размещена самостоятельная таблица. Такая таблица называется вложенной и по построению ничем не отличается от обычной таблицы.
Рассмотрим пример построения отчётной формы для печати ценника. В основной таблице располагаются в двух строках дата, ЧП и наименование товара, а в последней строке и единственной ячейке в ней находится вложенная таблица. Вложенная таблица служит для отображения старой и новой цен и скидки.
На рисунке красными пунктирными линиями обозначены "невидимые" границы ячеек основной таблицы, синими – для вложенной.
<html>
<head>
<title>Ценник</title>
<style>
td { border-width: 0; text-align:
center; vertical-align: middle; }
td.left { border-width: 0;
text-align: right; height: 6mm; }
td.right { border-width: 0;
text-align: left; }
</style>
</head>
<body >
<div style="width: 9cm; height: 5cm; border:
1px solid black;">
<table>
<tr style="font: bold
14pt tahoma;">
<td>ЧП
Павлов Н.А.</td>
<td>10.10.2006 г.</td>
</tr>
<tr style="font: bold
20pt Tahoma;">
<td
style="height: 2.3cm;" colspan=2>Тумба приставная</td>
</tr>
<tr>
<td
colspan=2>
<table>
<tr>
<td class=left>Старая цена</td><td style="width:
3mm"></td>
<td class=right>2875.00 руб.</td>
</tr>
<tr>
<td class=left>Скидка</td><td style="width:
3mm"></td>
<td class=right>20%</td>
</tr>
<tr style="font: bold 12pt arial;">
<td class=left>Новая цена</td><td style="width:
3mm"></td>
<td class=right>2300.00</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>