Для об'єднання двох і більше осередків в одну використовуються атрибути colspan і rowspan тега <td> . Атрибут colspan встановлює число осередків об'єднуються по горизонталі. Аналогічно працює і атрибут rowspan, з тією лише відмінністю, що об'єднує осередки по вертикалі. Перед додаванням атрибутів перевірте число осередків у кожному рядку, щоб не виникло помилок. Так, <td colspan="3"> замінює три осередки, тому в наступному рядку повинно бути три тега <td> або конструкція виду <td colspan="2"> ... </td> <td> ... </td> . Якщо число осередків у кожному рядку не співпадатиме, з'являться порожні фантомні осередки. У прикладі 12.3 наведено хоча і валідний, але невірний код, в якому якраз проявляється подібна помилка.
Приклад 12.3. Неправильне об'єднання осередків
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Неправильне використання colspan </title> </head> <body> <table border="1" cellpadding="5" width="100%"> <tr> <td colspan="2"> Комірка 1 </td> <td> Комірка 2 </td> </tr> <tr> <td> Комірка 3 </td> <td> Комірка 4 </td> </tr> </table> </body> </html>
Результат даного прикладу показаний на рис. 12.5.
В першому рядку прикладу задано три осередки, дві з них об'єднані за допомогою атрибута colspan, а у другому рядку додано лише два осередки. Через це виникає додаткова комірка, яка відображається в браузері. Її добре видно на рис. 12.5.
Правильне використання атрибутів colspan і rowspan продемонстровано в прикладі 12.4.
Приклад 12.4. Об'єднання осередків по вертикалі і горизонталі
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Об'єднання осередків </title> </head> <body> <table border="1" cellpadding="4" cellspacing="0"> <tr> <td rowspan="2"> Браузер </td> <th colspan="2"> Internet Explorer </th> <th colspan="3"> Opera </th> <th colspan="2"> Firefox </th> </tr> <tr> <th> 6.0 </th> <th> 7.0 </th> <th> 7.0 </th> <th> 8.0 </th> <th> 9.0 </th> <th> 1.0 </th> <th> 2.0 </th> </tr> <tr align="center"> <td> Підтримується </td> <td> Ні </td> <td> Так </td> <td> Ні </td> <td> Так </td> <td> Так </td> <td> Так </td> <td> Так </td> </tr> </table> </body> </html>
Результат даного прикладу показаний на рис. 12.6.
В даній таблиці встановлено вісім колонок і три рядки. Частина осередків з написами « Internet Explorer » , « Opera » і « Firefox » об'єднані де по дві, а де і по три осередки. В осередку з написом « Браузер » застосовано об'єднання по вертикалі.