Пример объединения ячеек в таблице |
Первые шаги и правила создания таблиц были рассмотрены в разделе "Таблицы" главы 2 данного справочника. В этом параграфе рассмотрим применение двух параметров ячейки таблицы – colspan и rowspan. Они предназначены для объединения ячеек по горизонтали и вертикали соответственно. Чтобы все стало ясно рассмотрим конкретный пример.
<html>
<head>
<title>пример таблицы с объединенными
ячейками</title>
<style>
td { text-align: center;
vertical-align: middle;
width:
50px;
height: 35px; }
</style>
</head>
<body>
<table style="width: 1%;">
<tr>
<td>1x1</td>
<td>1x2</td>
<td
rowspan=2>1x3</td>
</tr>
<tr >
<td>2x1</td>
<td>2x2</td>
</tr>
</table>
</body>
</html>
В этом примере использовано значение параметра rowspan=2 для третьей ячейки первой строки, что привело к ее растяжению по вертикали на две строки. Обратите внимание, что во второй строке нет третьей ячейки, т.к. ячейка 1х3 равна сама по себе двум ячейкам по высоте. Если добавить во вторую строку еще одну ячейку, то получится следующее:
Приведем в качестве примера использования параметра colspan фрагмент отчёта "Акт на списание малоценных и быстроизнашивающихся предметов МБ-8":
Такое четкое размещение надписей относительно друг друга задается с помощью таблицы, у которой не прорисовываются некоторые ячейки или границы ячеек имеют разную толщину. Достроим невидимые границы красной пунктирной линией и станет понятно как задать такую таблицу.
<html>
<head>
<title>пример объединеннения
ячеек</title>
<style>
.label { text-align: right;
border-width: 0; font-size: 8pt; }
.sign { border-width: 0;
border-bottom: 1px solid black; font-weight: bold; text-align:
center; }
</style>
</head>
<body>
<table>
<tr>
<td class=label
colspan="3"></td>
<td style="width:
30mm; text-align: center; font-weight: bold">коды</td>
</tr>
<tr>
<td class=label
colspan="2"></td>
<td class=label
style="width:25mm">форма по окуд</td>
<td
style="text-align: center; border-top: 1.5pt solid black;
border-left: 1.5pt solid black; border-right: 1.5pt solid
black;">0320004</td>
</tr>
<tr>
<td class=label
nowrap style="width: 0">организация</td>
<td class=sign>ооо
"чудо"</td>
<td class=label
>по окпо</td>
<td
style="text-align: center; border-bottom: 1.5pt solid black;
border-left: 1.5pt solid black; border-right: 1.5pt solid
black;"></td>
</tr>
<tr>
<td class=label
nowrap style="width: 0">структурное подразделение</td>
<td
class=sign> </td>
<td
class=label></td>
<td
style="width:30mm; text-align:center"></td>
</tr>
</table>
</body>
</html>