Удаление ячеек и строк таблицы

Иногда требуется удалить из таблицы отдельные ячейки, строки и столбцы, но так, чтобы таблица при этом не меняла своей структуры.

В разделе Синтаксис таблиц в HTML имеются такие атрибуты ячеек, как "colspan=n" и "rowspan=n". Но эти атрибуты объединяют несколько ячеек таблицы вместе. Поэтому их применение для удаления отдельных ячеек таблицы является неверным, так как они меняют структуру таблицы.

При этом, контент, который находится в этих объединенных ячейках, получает в своё распоряжение пространство всех объединившихся ячеек. То есть, контент начнет заполнять то пространство, которое хотелось бы оставить пустым.

Вот пример таблицы 3x3, где объединены ячейки номер 1,2 и 3, а также ячейки 6 и 9.

Исходная таблица

1	2	3
4	5	6
7	8	9

Скелет кода исходной таблицы

      <table border="1">
        <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
        <tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
        <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
      </table>

Таблица с объединенными ячейками

бла-бла-бла-бла
4	5	бла-бла-бла-
7	8

Скелет кода таблицы с объединенными ячейками

      <table border="1">
        <tr> <td colspan="3"> 1+2+3 </td> </tr>
        <tr> <td> 4 </td> <td> 5 </td> <td rowspan="2"> 6+9 </td> </tr>
        <tr> <td> 7 </td> <td> 8 </td> </tr>
      </table>

Есть, конечно вариант просто не заполнять контентом ту ячейку, которую надо удалить. Но этот вариант проходит только тогда, когда у нас нет границ таблицы. Если границы есть, то сразу будет видно, что в таблице всё таки есть ячейка, она просто не заполнена.

Изящно эта проблема решается с помощью каскадной таблице стилей CSS.

Для этого в таблице стилей определяем следующий класс:
.hidden {visibility:hidden;}

Этот стиль делает невидимой ту ячейку таблицы, которая принадлежит классу hidden.

Таблица с удаленной 5-й ячейкой

1	2	3
4	5	6
7	8	9

Скелет кода таблицы с удаленной 5-й ячейкой

      <html>
      <head>
      <style type="text/css">
      .hidden {visibility:hidden;}
      </style>
      </head>
      <body>
      <table border="1">
        <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
        <tr> <td> 4 </td> <td class="hidden"> 5 </td> <td> 6 </td> </tr>
        <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
      </table>
      </body>
      </html>

Таблица с удаленной строкой (ячейки 4, 5 и 6)

1	2	3
4	5	6
7	8	9

Скелет кода таблицы с удаленной строкой (ячейки 4, 5 и 6)

      
      <html>
      <head>
      <style type="text/css">
      .hidden {visibility:hidden;}
      </style>
      </head>
      <body>
      <table border="1">
        <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
        <tr> <td class="hidden"> 4 </td> <td class="hidden"> 5 </td> <td class="hidden"> 6 </td> </tr>
        <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
      </table>
      </body>
      </html>

Таблица с удаленными ячейками 3, 5, 6, 7 и 8

1	2	3
4	5	6
7	8	9

Скелет кода таблицы с удаленными ячейками 3, 5, 6, 7 и 8

      
      <html>
      <head>
      <style type="text/css">
      .hidden {visibility:hidden;}
      </style>
      </head>
      <body>
      <table border="1">
        <tr> <td> 1 </td> <td> 2 </td> <td class="hidden"> 3 </td> </tr>
        <tr> <td > 4 </td> <td class="hidden"> 5 </td> <td class="hidden"> 6 </td> </tr>
        <tr> <td class="hidden"> 7 </td> <td class="hidden"> 8 </td> <td> 9 </td> </tr>
      </table>
      </body>
      </html>

Мы может сделать невидимыми не только ячейки по отдельности, но и сразу целые строки (тег tr) и даже всю таблицу одновременно (тег table).

Любые тексты и картинки, размещенные в ячейках класса hidden не выводятся на экран браузера, подобно комментариям. Но от комментариев тут есть принципиальное отличие. Комментарии браузер просто выкидывает так, будто бы никакого комментария нет. То есть код с комментариями и без комментариев на экране браузера выглядит совершенно одинаково. А класс hidden не выкидывает контейнер между теми тегами, которым присвоен этот класс, а оставляет на экране браузера пустое место точно такого же размера и расположения, как если бы там выводился контейнер без класса hidden.

Наконец, можно сделать еще один трюк при помощи CSS. Можно так удалить ячейки таблицы, что другие ячейки таблицы подвинутся и займут место удаленной ячейки.

Для этого в таблице стилей определяем следующий класс:
.none {display:none;}

В следующем примере обратите внимание на то, что ячейка с классом none убирается подобно комментарию. На место убранной ячейки смещается та ячейка, которая находится справа. Если в каждой строке удаляется хотя бы одна ячейка, то уменьшается количество столбцов таблицы. А для уменьшения количества строк в таблице, надо удалить все ячейки какой-либо одной выбранной строки (или присвоить класс none для тега tr).

Таблица с удалеными ячейками 1, 3 и 5-7

1	2	3
4	5	6
7	8	9

Скелет кода таблицы с удалеными ячейками 1, 3 и 5-7

      
      <html>
      <head>
      <style type="text/css">
      .none {display:none;}
      </style>
      </head>
      <body>
      <table border="1">
        <tr> <td class="none"> 1 </td> <td> 2 </td> <td class="none"> 3 </td> </tr>
        <tr> <td> 4 </td> <td class="none"> 5 </td> <td class="none"> 6 </td> </tr>
        <tr> <td class="none"> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
      </table>
      </body>
      </html>

Посмотреть другие простые шаблоны

Скачать бесплатный html-редактор со встроенными учебниками и справочниками по написанию сайтов

Скачать бесплатно FTP-клиент FileZilla Client для копирования файлов на свой сайт и в файлообменники

Скачать бесплатно Полезные скрипты для сайта