http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1233239416.html <p>Не часто приходится заниматься таблицами, но без них, как вы понимаете, иногда просто никак. Описываемый сегодня прием известен давно, правда редко находит применение, может быть, не все знают, а может просто нет такой необходимости.</p> <p>Что больше всего напрягает при использовании таблиц?</p> <p>Есть, скажем, матрица 3*3, и надо исключить ячейку или даже строку, что мы делаем?</p> <p>Начинаем объединять эти самые ячейки, а занятие это ну очень муторное. В таких случаях, понятное дело, все зависит от конкретной ситуации, можно прибегнуть к некоторым хитростям, что является весьма действенным методом сокрытия ячеек и строк, это позволяет, не прибегая собственно к правке <span>html</span>-кода, чуть упростить процесс.</p> <p>Скриншот.</p> <img src="i/table/table.png" style="display:block;margin:10px auto;width:394px;height:342px;" alt="table"> <p>Оформление может быть любым, но нас интересует всего две строчки в таблице стилей, а именно:</p> <pre class="pre"> .hidden {visibility:hidden;} .none {display:none;}</pre> <p>Подставляя тот или иной класс в ячейки или строку, мы получаем различное расположение, как ячеек, так и строк.</p> <p><span>visibility:hidden;</span> скрывает ячейку или строку, но место, зарезервированное под них, остается.</p> <p><span>display:none;</span> проделывает то же самое, но происходит сдвиг и по вертикали и по горизонтали и оставшиеся ячейки или строки занимают освободившееся место.</p> <p>Есть еще и <span>visibility:collapse</span>, не поддерживается <em>Internet Explorer</em>, но по действию, применение этого правила, аналогично <span>display:none;</span></p> <p>Берем на вооружение. <a href="table.html">Пример</a></p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1233239416.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1233239416.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1233239416.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1233239416.html">All Comments</a></div> <!-- RSS_link_to_post end --> Thu, 29 Jan 2009 20:30:16 GMT