Веб-сайт с минимальными затратами: учебник HTML

Глава 8. Изменение структуры сайта. Обновление информации

Глава 8. Изменение структуры сайта. Обновление информации

Каталог продукции

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

Предположим, производители прислали нам всю необходимую информацию. Даже и думать не хочется, что они прислали обычные бумажные брошюры с плохо пропечатанными схемами - в этом случае нам бы пришлось текст набирать руками, а все схемы практически отрисовывать заново. Поэтому (мы ведь оптимисты!) будем считать, что мы получили документы всё-таки по электронной почте: четыре фотоизображения и письмо с описанием технических характеристик (полностью письмо есть на CD в каталоге doc - файл Re_.eml):

mail1.gif

Как видно из содержимого, вам придётся создать 4 новых html-файла - по числу изображений и текстов к ним. Начнём с текстов. Во-первых, надо понять, в каком они к нам пришли виде: с длинными строками, или с обрезанными. Для этого откройте файл Re_.eml и попробуйте растянуть открывшееся письмо в ширину: если строчки поползут вслед за движущейся границей окна, значит, тэг <pre> для оформления этого текста использовать нельзя, а надо будет каждый абзац заключать в тэги <p> и </p>. В нашем примере строчки письма не расползаются, текст сформирован в виде коротких строк, значит, можно в начале текста каждой страницы поставить один тэг <pre> и на этом преобразование полученных текстов будет закончено:

<pre>1. Первый аппарат

Печатающей узел термопечать, 17 символов в строке

Скорость печати термопечатающего устройства, строк/сек. не менее 4

Индикатор цифровой семисегментный, 12 символов...

Создайте 4 текстовых файла с именами a01.html, a02.html, a03.html, a04.html и скопируйте в них соответствующие фрагменты письма, добавив тэги <pre> в начале каждого.

Разумеется, в начале страниц не забудьте поставить обычный для нашего сайта html-заголовок:

<html><head><title>Торговая группа Omnia mea. Аппарат первый</title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<meta name="description" content="Кассовые аппараты">

<meta name="keywords" content="Гонолулу, калькуляторы">

<link rel="stylesheet" href="dn.css" type="text/css"></head><body>...

Обратных ссылок с «аппаратных» страниц на главную страницу сайта делать не будем, потому что планируем открывать их «в новом окне», то есть страница, с которой они будут открываться, останется на экране. Эту страницу, кстати, тоже надо будет сделать и добавить в нашу навигационную панель. Панель тогда разрастётся в ширину (название-то для новой страницы длинное - «Каталог продукции»!), поэтому кое-кого придётся уплотнить. Например, объединить «Адреса» и «Реквизиты» (не так уж они много места занимают, чтобы жить на отдельных страницах). В результате код новой навигационной панели будет выглядеть так:

...<p class="nav">

<a href="index.html">Главная</a> &bull;

<a href="requisit.html">Реквизиты</a> &bull;

<a href="katalog1.html">Каталог продукции</a> &bull;

<a href="pricelist.html">Прайс</a> &bull;

<a href="history.html">История</a>...

Присматривайте при многочисленных трансформациях (копировании через буфер обмена Windows, сохранении из MS Word как текст) за знаком - он может потеряться (точнее, выродиться), возвращайте ему тогда «нормальное», буквенное написание - &bull;. Скопируйте фрагмент текста, непосредственно описывающего адреса (вместе с заголовком «Адреса»), из файла address.html в подходящее место файла requisit.html (например, сразу после навигационной панели):

...<img src="../img/omni.gif" alt="Omnia mea">

<p class="nav">

<a href="index.html">Главная</a> •

<a href="requisit.html">Реквизиты</a> •

<a href="katalog1.html">Каталог продукции</a> •

<a href="pricelist.html">Прайс</a> •

<a href="history.html">История</a>

</p>

<h1>Адреса</h1>

<p>г. Одесса, Малая Арнаутская, 22</p>

<p>Тел. 002-002, 003-003, 004-004</p>

<p>Филиал в Москве: ул. Советская, тел. 005-005</p>

<p>E-mail: <a href="mailto:omneinitium@narod.ru?subject=Запрос с сайта omneinitium&body=Прошу выслать мне Ваш вариант договора о сотрудничестве">omneinitium@narod.ru</a></p>

<p>Схема проезда к офису:</p>

<img src="../img/karta6.gif" alt="Omnia mea">

<h1>Реквизиты</h1>

<p>ИНН 4407091087 ООО Торговая группа "Омниа меа"</p>

<p>Сч. № 20601710600040000070</p>

<p>Банк получателя филиал "Московский" ОАО "Бета-Банк" г. Одесса, БИК 033170811, Сч. № 10301410700000000334</p>

</div></body></html>

Создайте новый текстовый файл katalog1.html, в него мы должны будем записать обычную «шапку» для страниц нашего сайта, заголовок h1 «Каталог продукции» и четыре гиперссылки - на файлы a01.html, a02.html, a03.html, a04.html. Заставить эти ссылки открываться в новом окне можно с помощью присвоения атрибуту target значения "_blank":

...<h1>Каталог продукции</h1>

<p>

<a href="a01.html" target="_blank">Аппарат 1</a> <br>

<a href="a02.html" target="_blank">Аппарат 2</a> <br>

<a href="a03.html" target="_blank">Аппарат 3</a> <br>

<a href="a04.html" target="_blank">Аппарат 4</a>...

Почти всё готово. За исключением главного, того, что превращает простой текст в каталог товаров, - картинок. Откройте ещё раз письмо (файл doc\Re_.eml на CD) и сохраните в свой рабочий каталог файлы .jpg - через меню «Файл» - «Сохранить вложения». Мы должны с подозрением относиться ко всем картинкам, которые собираемся выложить в Интернет: а вдруг они имеют слишком большой размер? Вдруг можно сохранить их в более оптимальном формате? К тому же, если вы попробуете вставить код присланной картинки

<img src="../img/i01.jpg" alt="src="../img/i01.jpg">

в соответствующий файл a01.html, то обнаружится одна не очень приятная особенность: в правилах css нашего сайта страницам назначается серый фон, и присланные картинки в формате jpeg будут ложиться на этот фон белыми прямоугольниками. Исправить это можно двумя способами: 1) изменить фон каждого файла jpeg в Photoshop'е на серый; 2) сделать фон каждой картинки прозрачным и сохранить картинки в формате GIF. Первый способ имеет очевидный недостаток: если мы вдруг заходим поменять цвет фона для страниц своего сайта, нам придётся опять открывать все картинки в Photoshop'е и так же менять им фон. Поэтому, если содержание картинок позволит (по количеству цветовых переходов), лучше, конечно, сразу перевести их в GIF.

Прозрачность создаётся так. Откройте в Photoshop'е файл i01.jpg, измените цветовую модель на Indexed Color. Затем с помощью инструмента Magic Wand (волшебный посох) выделите всю свободную область вокруг изображения (если выделяется не то, что надо, измените настройки инструмента Magic Wand - Anti-aliased, Tolerance):

transparent11.gif

Нажмите «Delete» или «Backspace». Должно получиться вот что:

transparent21.gif

Это значит, наступила прозрачность. Сохраните картинку в формате GIF (под именем i01.gif).

Не всегда так легко можно пользоваться в Photoshop'е «волшебным посохом». Гораздо чаще приходится прибегать к рутинной операции ручного выделения нужной области с помощью инструмента Polygonal Lasso:

transparent3.gif

Ну, как бы там ни было, у нас теперь есть 4 GIF'a, и мы можем гордо их вставить в начало каждой странички с описанием аппаратуры:

...<div>

<img src="../img/a01.gif" alt="Первый аппарат">

<pre>1. Первый аппарат

Печатающей узел термопечать, 17 символов в строке

Скорость печати термопечатающего устройства, строк/сек. не менее 4

Индикатор цифровой семисегментный, 12 символов...

Обратите внимание: при наличии «форматированного» текста (с ограниченными длинами строк) не отпадает необходимость в заключении содержимого страницы в контейнер div, потому что именно этот элемент (а не body) задаёт отступы от краёв страницы - без него текст будет прижат к левой и верхней рамкам рабочего окна.

Остался последний штрих: в основную страничку каталога katalog1.html хотелось бы вставить перед каждой ссылкой ма-аленькое-маленькое изображение изделия, лёгкий намёк на то, что пользователю предстоит увидеть, если он щёлкнет по ссылке.

Для этого откроем ещё раз все картинки gif и уменьшим их размер до 32 pixels в ширину (а высота уменьшится пропорционально), сохраним уменьшенные копии в новых файлах с добавлением через чёрточку цифры 1: i01-1.gif, i02-1.gif и т. д. Поместим коды картинок внутрь ссылок в файле katalog1.html, чтобы и при щелчке на картинке также открывалась новая страница (как и при щелчке на тексте ссылки). Вот что у нас получится:

...<a href="a01.html" target="_blank"><img src="../img/i01-1.gif" alt="Аппарат 1"> Аппарат 1</a> <br>

<a href="a02.html" target="_blank"><img src="../img/i02-1.gif" alt="Аппарат 2"> Аппарат 2</a> <br>

<a href="a03.html" target="_blank"><img src="../img/i03-1.gif" alt="Аппарат 3"> Аппарат 3</a> <br>

<a href="a04.html" target="_blank"><img src="../img/i04-1.gif" alt="Аппарат 4"> Аппарат 4</a>...

Однако, открыв файл katalog1.html в обозревателе, мы увидим кое-что странное, чего вовсе не планировали получить: вокруг картинок-значков, помещённых внутрь ссылок, появилась жирная синяя рамка, сами картинки как-то «подскакивают» в строках относительно текста, а расстояние между строчками каталога определяется высотой значка и получается разным, что тоже не очень красиво.

Всё это, конечно, исправляется с помощью CSS. Во-первых, зададим в файле dn.css правило для всех элементов img:

img {border:0; margin:0; vertical-align:text-bottom}

Оно уберёт вокруг картинок рамки (border:0) и выровняет картинки по нижней линии соседнего текста.

ex14 Файлы примеров: css5 (css5)

Во-вторых, зададим расстояние между строками (ling-height) для абзаца, в который заключены ссылки каталога. Как это сделать? Если мы изменим в файле dn.css правило CSS для элемента p, то оно будет применяться ко всем абзацам всех страниц нашего сайта. Мы планируем значительно увеличить вертикальное расстояние между строк, сделать его равным высоте самого большого значка (файл i03-1.gif); применять это правило, например, к тексту «Истории» неразумно.

Так же, как и в случае со ссылками для навигационной панели, используем понятие class: назначим элементу p, в который вложены ссылки, класс katalog:

<p class="k1">

<a href="a01.html" target="_blank"><img src="../img/i01-1.gif" alt="Аппарат 1"> Аппарат 1</a> <br>...

Затем создадим в файле dn.css отдельное правило для абзацев класса «katalog»:

p.k1 {line-height:40px}

Высота самого большого значка i03-1.gif у нас 35px (это вы могли увидеть в Photoshop'е, когда уменьшали основные изображения до ширины 32px).

На CD нет отдельного каталога с полученными после этих изменений результатами. Потому что результаты ничем не отличаются от тех, которые мы уже видели в папке omne\css5. Из-за того, что мы вложили в строки картинки, расстояние между строками абзаца не увеличивается до 40px. Вот незадача! Даже вспоминать не хочется, сколько времени пришлось мне убить на её (не)решение. Вернее, сколько вариантов перебрать, чтобы решение выглядело одинаково в разных интернет-обозревателях. Что ж, природу не обманешь, в итоге приходится прибегнуть к примитивной логике: раз расстояние между ссылками из-за картинок не регулируется в пределах одного абзаца (или любого другого элемента), надо или убирать картинки, или помещать каждую ссылку в отдельный элемент, причём, блочного типа - и выравнивать по нижнему краю блока.

Элементы по способу своего отображения могут быть строчными (inline), блочными (block), табличными и ещё кое-какими (сейчас нам это не надо). Разница между двумя основными способами отображения вот какая. На страницах нашего учебного сайта есть блок ссылок – навигационная панель. В тексте HTML-кода каждая ссылка записана с новой строки:

<a href="index.html">Главная</a> 
<a href="address.html">Адреса</a> 
<a href="requisit.html">Реквизиты</a> 

Но на экране ссылки выглядят стоящими рядом в одной строке – это и значит, что они являются строчными элементами.

Если же мы напишем код со стоящими на одной строке блочными элементами, то каждый из этих элементов всё равно будет располагаться вертикально друг под другом:

<style type="text/css">
div {border:2px solid maroon; margin:1em; width:10em}
</style>
<div>раздел 1</div><div>раздел 2</div><div>раздел 3</div>
раздел 1
раздел 2
раздел 3

(файл blocks.html)

В блочный можно превратить любой элемент, тот же p - с помощью присвоения свойству display значения block (и заодно задать этому вновь созданному блоку нужную высоту):

p.k1 {display:block; height:40px; }

Затем нужно каждую ссылку поместить внуть элемента p класса k1:

<p class="k1">

<a href="a01.html" target="_blank"><img src="../img/i01-1.gif" alt="Аппарат 1"> Аппарат 1</a>

<p class="k1">

<a href="a02.html" target="_blank"><img src="../img/i02-1.gif" alt="Аппарат 2"> Аппарат 2</a>...

Как теперь заставить ссылки прижаться к нижнему краю блоков-абзацев? Как ни бейся, из-за картинок никакие vertical-align:bottom не действуют. Самое обидное то, что в обозревателе Mozilla Firefox расстояния между ссылками (с вложенными в них картинками) и так были равными, уже в предыдущем нашем результате в omne\css5, проблемы с разной высотой возникают только в Интернет Эксплорере (версии 5-6). Но большая часть людей как раз и бродит по Интернету с помощью этого обозревателя, поэтому решать задачу надо именно и в первую очередь для него.

Решается она так (можете поискать и другие решения):

p.k1 a {position:absolute; bottom:0; }

- для ссылки, вложенной в абзац класса k1, задаём свойству position значение absolute. Ну, а bottom:0 как раз и означает: «Прижми (хвост) к низу!». Правда, и это правило не будет работать, пока родительскому элементу для ссылки (то есть абзацу класса k1) не будет задано (хоть какое-нибудь!) позиционирование:

p.k1 {display:block; height:40px; position:relative; }

- position:relative в данном случае никак не влияет на действительное положение абзаца, но он становится позиционированным, а значит, позволяет абсолютно позиционировать внутри себя другие элементы. Уф-ф.

ex15 Файлы примеров: css6 (css6)

И это ещё не предел.

Опять работа с изображениями

Можно и не быть гениальным дизайнером, ваяющим логотипы, но всё равно заметить, что картинки на страницах omne\css6\katalog1.html и omne\img2\katalog1.html выглядят по-разному: в omne\css6 они с более грубыми, рваными краями. Так произошло, потому что мы уменьшали размер исходных картинок для значков, находясь в цветовой модели Indexed Color. Если картинки перевести предварительно перед уменьшением в модель RGB (а потом, перед сохранением, разумеется, обратно в Indexed Color), таких резких границ не будет, они сгладятся. И второй момент: прозрачность прозрачностью, но гладкие края довольно сложно организованы (вы можете увидеть это при сильном увеличении в Photoshop'е): гладкость достигается за счёт определённого алгоритма в чередовании разных оттенков цветов, причём общее «направление движения» играет решающую роль - от светлой картинки к тёмному фону или наоборот. Если мы произведём все операции уменьшения (и, следовательно, при модели RGB автоматического сглаживания) для тёмной картинки на светлом фоне, а потом поместим картинку на страницу с тёмным фоном, то вокруг картинки образуется светлый ореол (как вокруг тени на логотипе «OMNIAmea») - идеального сглаживания мы не добьёмся.

Поэтому для наибольшей совместимостью с будущим фоном страницы, перед уменьшением картинки в Photoshop'е надо сначала создать новый слой под изображением и залить его тем же цветом: #cccccc, а затем уменьшить изображение до нужной ширины (32px), перевести в индексированный цвет и потом удалить серый фон (с помощью Magic Wand). Это всё равно лучше, чем оставлять серый фон вокруг картинок, потому что на краях изображений принципиально важен именно переход к более светлому или более тёмному фону, а не к конкретному цвету, и наши прозрачные картинки, с переходом, рассчитанным на цвет #cccccc, будут так же хорошо выглядеть на целом ряде цветов фона - в пределах примерно от 99 до ff: #ccffcc, #ccffff, #ccff99 и др. Начиная где-то с #999999 и меньших значений уже явно обозначатся более светлые края картинок. На чисто белом фоне края картинок тоже будут выглядеть хуже, чем на сером (или других светлых оттенков).

Последний штрих: мы изменили оформление ссылок для каталога продукции, воспользовавшись обозначением p.k1 a (правила для ссылок, вложенных в абзац класса k1). В логике их поведения вы уже сможете разобраться самостоятельно, изучив файл dn.css в каталоге с последними результатами:

ex16 Файлы примеров: img2 (img2)

Обновление информации

Предположим, через некоторое время вы получили новое письмо с описанием товаров, и в этом письме оказались длинные строки. Как в примере omne\doc\Re_2.eml (doc/Re_2.eml). Там не все строки длинные, но если текста много, нам проще исходить из того, что они есть, и нельзя будет обойтись простым тэгом <pre>. Надо расставлять метки абзацев (и, может быть, заголовков). Но если текст большой, это делать нудно.

Лучше скопировать весь текст в окно MS Word и редактировать там. Это лучше делать и для вновь создаваемых текстов. И вообще всегда - пока в MS Word есть встроенная проверка русской орфографии (вы ведь не хотите, чтобы на вашем сайте были ЕЩЁ И орфографические ошибки?). Но проверка опечаток - это всегда, а именно сейчас нам надо как-то быстро расставить тэги <p> и </p>.

Для начала необходимо сделать в Word'е видимыми непечатаемые символы абзацев - нажать кнопку на панели «Стандартная»:

word01.gif

Затем выбрать из меню «Правка» пункт «Заменить»:

word01.gif

В этом окне можно использовать для поиска и замены спецсимволы, в частности, символы, обозначающие конец абзаца. Воспользовавшись этим, мы можем одной командой во всём тексте расставить нужные тэги. Эта команда -

Найти: ^p (символ абзаца)

Заменить: </p>^p<p> - перед символом абзаца - закрывающий тэг, после символа абзаца (то есть в начале следующего абзаца) - открывающий тэг:

word01.gif

После заполнения полей «Найти» и «Заменить» нажмите кнопку «Заменить всё». Word расставит тэги по всему тексту, кроме первой строки (потому что перед ней нет символа абзаца), а также, скорее всего, наставит несколько лишних тэгов в конце документа. Поставьте недостающий тэг в начале документа и удалите ненужные в конце. Теперь вы можете открыть необходимый html-файл (например, a01.html) в текстовом редакторе (Блокнот или Bred), удалить из него устаревший текст (не удаляя служебных строк в начале документа!), скопировать подходящий фрагмент текста из Word'а в буфер обмена Windows и вставить его в нужное место открытого файла a01.html. После этого сохраните файл - и можете загружать его на свой веб-сервер в Интернет.

В последнем абзаце описана наиболее общая, типичная схема обновления информации на небольшом веб-сервере. Именно так: 1) создание нового фрагмента html-текста в удобном для вас редакторе; 2) вставка готового фрагмента текста с тэгами на место устаревшего фрагмента в html-файле; 3) загрузка изменённого html-файла на сервер. В некоторых частных случаях, особенно когда информация хорошо структурирована, разумно первые два действия автоматизировать. Мы так делали при сохранении прайс-листа из MS Excel в HTML. Можно ещё больше сократить путь информации к html-файлу - «выгружать» её прямо из базы данных: 1С, FoxPro, MS Access, любой другой. Так, кстати, делается на больших серверах: когда вы что-то там ищете, вы фактически посылаете запрос к базе данных, программа на сервере выполняет поиск информации, быстро-быстро генерирует нужный вам html-файл и выдаёт его на ваш компьютер. Вы можете изучить html-код прайс-листа, создаваемого надстройкой priceH.xla, и сформулировать задание программисту для экспорта отчёта из базы данных (например, 1С) прямо в html-файл.

Таблицы

Прайс-лист имеет очень характерную структуру, типичное расположение информации: в виде таблицы. Таблицы в HTML (да, собственно, и везде) организованы довольно сложно. Потому что информация в них переводится из линейного вида в двухмерный: вы пишете одну длинную строчку кода:

<table border><tr><td>1<td>2<td>3<tr><td>4<td>5<td>6</table>

а на экране появляется прямоугольник с ячейками:

123
456

Визуальный редактор HTML

Чем дальше, тем чаще вам придётся изменять код html-страницы и тут же смотреть, как изменения отразились на внешнем виде. Методика такой работы примерно следующая. Создаёте html-файл, открываете его в текстовом редактоое с синтаксической подсветкой, редактируете код; затем, не закрывая текстовое окно, открываете этот html-файл в обозревателе. У вас на экране будет открыто два окна:

visual1.gif

Переключаться между окнами можно с помощью клавиш Alt+Tab, обновлять изображение в обозревателе - с помощью клавиши F5. Так все и работают: изменить код, сохранить (Ctrl+S), Alt+Tab, F5 - и смотрят, что получается.

При серьёзной, глубокой работе вам понадобится держать открытыми не два, а сразу четыре окна: в одном - результат, в другом - html-код, в третьем - таблица CSS, в четвёртом - программа JavaScript. Ничего страшного, в Windows вполне можно держать открытыми одновременно 4-5 окон, Windows выдержит.

Опять таблицы

Проблемы работы с таблицами связаны с противоречивостью. А противоречия возникают от двух вещей: двумерности таблиц и многократной вложенности элементов друг в друга. Например, ячейкой таблицы можно управлять как элементом, принадлежащим столбцу ячеек, а можно - как элементом, принадлежащим строке ячеек. Но вложена ячейка обязательно должна быть в «строковый» элемент таблицы - tr - без этого она будет отображаться неправильно (хотя начальный тэг <tr> можно иногда и пропустить - заботливые интернет-обозреватели, как всегда, дорисуют его сами). Обратите также внимание на то, что мы пропускаем в примерах все закрывающие тэги таблицы: </tr>, </td>, - кроме тэга </table>.

Продолжаем эксперименты. Как, по-вашему, делается в таблице горизонтальное объединение ячеек? - С помощью атрибута ячейки (td) colspan:

<table border><tr><td>1<td colspan="2">2 • • <tr><td>4<td>5<td>6</table>

12
456

Вертикальное объединение - с помощью атрибута ячейки rowspan:

<table border><tr><td rowspan="2">1<td>2<td>3<tr> • • <td>5<td>6</table>

123
56

Жирные чёрные точки в реальном коде ставить не надо, они тут просто указывают на пропущенные фрагменты: <td>3 в первом случае (ячейка с цифрой "2" распространяется на следующую в ряду - с цифрой "3", поэтому код ячейки с цифрой "3" должен быть удалён) и <td>4 во втором примере (удалён код первой ячейки из нижней строки). Если хотите, можете не удалять фрагменты кодов <td>3 и <td>4 (вы не должны ничему верить на слово): попробуйте добавить colspan и rowspan, ничего не удаляя, и посмотрите, что получится.

ex17 Файлы примеров на CD: table01.html-table03.html в папке omne\table (table)

CSS для таблиц

Самый главный элемент в таблице - td: именно в нём непосредственно лежит текст, и все изменения оформления td изменяют отображение текста; остальные же элементы (table, tr...) не могут обычно влиять на отображение текста таблиц. Рассмотрим пример таблицы table1.html в папке CD omne\table (table):

1023
4526

Мы поместили таблицу в контейнер div, чтобы получить возможность управлять общим положением таблицы на странице. Код самой таблицы не изменился по сравнению с предыдущими примерами, добавлено только cellspacing="5px", увеличивающее для большей наглядности расстояние между ячейками. Свойство cellspacing пока что нельзя изменить с помощью CSS, поэтому его значение приходится задавать прямо в html-файле. Мы убрали также из html-файла «общее» слово border, потому что отображением рамок можно управлять с помощью CSS полностью, и добавили привязку к таблице файла стилей table.css:

<link rel="stylesheet" href="table.css" type="text/css"><div>

<table cellspacing="5px"> <tr><td>10<td>2<td>3<tr><td>4<td>52<td>6</table>

В правилах CSS (файл table.css) всё довольно обычно:

table { border:1px solid #000099; border-collapse:separate; background:#99cccc; } td {border:2px solid #ffffff; padding:.3em; background:#ffcc99}

- border, padding, background... За исключением border-collapse:separate - это правило позволяет отображать ячейки таблицы в виде отдельных прямоугольников. Гораздо естественней для восприятия было бы задать свойству border-collapse значение collapse, но мы пока не делаем этого для наглядности, в учебных целях.

Мы изменили числа в некоторых ячейках, и теперь колонки в таблице стали разной ширины, а также стало заметно, что у текста выравнивание по левому краю (это обычное значение по умолчанию, его не надо задавать специально). Задать всем ячейкам таблицы одинаковую ширину с помощью стандартного свойства width нельзя, потому что такого свойства CSS для элемента td просто не существует. Я предупреждал, что с таблицей всё будет гораздо сложнее... Но, если внимательно почитать спецификацию CSS, и на ширину ячеек найдётся управа. Пример решения - файл table2.html. Код его таблицы:

<div class="main">

<table class="ex2" cellspacing="5px"> <col><col><col><tr><td>10<td>2<td>3<tr><td>4<td>52<td>6</table>

В нём два изменения: таблице добавлено имя класса (ex2), чтобы не создавать новый файл css, и в самом верху три раза (по числу колонок!) добавлено волшебное слово <col>. Элемент col как раз и позволяет задавать ширину ячеек (а также некоторые другие свойства):

col {width:2em; text-align:center}

div.main {text-align:center;}

Однако даже при выполнении всех условий текст внутри ячеек не хочет выравниваться по центру в обозревателях с ядром Gecko (SeaMonkey, Firefox). Никто не может заставить производителей соблюдать все правила CSS. Поэтому приходится добавлять ещё одну строчку в файл table.css:

table.ex2 td {text-align:center;}

Мы вложили вторую таблицу в раздел div класса main, а в правилах CSS заставили раздел div.main выравнивать всё содержимое внутри себя по центру (в том числе и таблицы). Но для обозревателей Gecko и это не закон. Поэтому от строчки div.main {text-align:center;} приходится отказаться в пользу универсальности и заменить её на более сложную (и менее точную) конструкцию, позволяющую расположить таблицу по центру объекта лишь приблизительно:

table.ex2 {padding:0; width:8.5em; margin:0 15em}

1023
4526

К счастью, на практике редко бывают нужны таблицы такого вида, как наши учебные - со свойством «border-collapse:separate» и с cellspacing больше нуля. Обычно у нормальных, рабочих таблиц ячейки разделены тонкими прямыми линиями, без промежутков. Эта особенность позволяет применить для центрирования таблицы грубое, но идеально точное и универсальное средство (действующее одинаково в обозревателях Gecko и в IE) - задать свойству display таблицы значение, как для обычных строчных элементов: inline. Только надо сделать фон таблицы прозрачным и убрать вокруг таблицы рамку (её заменят слившиеся рамки вокруг ячеек) - иначе в браузерах Gecko будет видно, как «тело» таблицы скукожилось в этот самый «инлайн» (что, кстати, полезно именно для учебных целей). Интернет Эксплорер же просто игнорирует в данном случае нашу виртуозную обработку таблицы колуном - «display:inline» - и может отображать её хоть с фоном, хоть с рамкой - таблица не изменяется..

/* для третьей таблицы */ table.ex4 {display:inline; border-collapse:collapse; background:transparent; border:0}

table.ex4 td {text-align:center; border:1px solid #000000}

1023
4526

Однако нет совершенства в мире, и в обозревателе Opera (хуже всех работающем с CSS) назначение таблице «display:inline» разваливает таблицу, которая, к тому же, так и не размещается по центру.

Можно очень долго и плодотворно экспериментировать с правилами CSS для таблиц и ячеек, особенно если разобраться в логике Спецификации CSS2. Многие даже ухитряются всё содержимое страницы умещать в таблицу - стиль html-вёрстки такой. Но я лично не согласен рисовать html-таблицы (и обновлять их содержимое) ни вручную, ни в самом лучшем «визуальном» редакторе - слишком уж кропотливая это работа. Лучше продумать алгоритм построения таблицы, воплотить его в каком-нибудь скрипте и затем формировать (или обновлять) таблицу из базы данных автоматически.

ex18 Файлы примеров на CD: table04.html-table06.html в папке omne\table (table)

Кстати, о скриптах -

Негосударственная строительная экспертиза москва работа строительная экспертиза москва.

Комментарии