Поговорим о хорошем. Когда я в своём WEB-дизайнерском детстве, в бывшем сайте попытался изображение выставить на одну линию с заголовком, это надо видеть... Какой был конфликт?! Бился я долго, безрезультатно, и отказался от этой затеи. Не совсем конечно, а применив средства форматирования — таблицы. Дело в том, что на моей странице, всё содержимое было включено в так называемый нормальный поток. Поэтому, изображение подчинятся общему правилу. Если вы перемещаете строку или изменяете размер шрифта то положение изображения также меняется. Чтобы развязать этот узел и применяют таблицы! Таблицы появились почти сразу с появлением HTML. Так-как все эти HTML-ы первоначально изобретались для передачи документов и табличных данных в том числе, то? То и изобрели сразу же таблицы, но электронные! Составляющие содержимого страницы помещают в свою ячейку, где они подчиняются законам ячейки, и только своей. И лишь частично всей таблицы! Есть ещё более «мобильные» чем таблицы, это слои, но не все браузеры (старые) их поддерживали! О них мы поговорим позже.
Что есть таблица? Визуально тоже, что и те какие вы видели в разных бумажных документах, а с точки зрения HTML — средство форматирования, и не смотря на появления новых технологий по-прежнему применяются. Таблицы состоят из строк и столбцов, при пересечении которых образуются ячейки. Кроме основной таблицы в неё можно вставить одну в одну ещё две таблицы. Но введение таблиц увеличивает вес страницы, со всеми вытекающими, а по слухам более 4-х таблиц (одна в одну), не допускается! Кроме того невозможно в принципе накладывать таблицы сикось-накось как на рис4! Здесь всего лишь фотошоповская накладка, а с помощью HTML-редактора так не получится?! Только одна в одну рис4.
Что ещё можно взять от таблиц? Вот на рис1 показано, как можно расположить контент (текст). Это выравнивание в ЯЧЕЙКЕ! Думаю здесь всё понятно?! Как же применяются таблицы при создании страниц (вёрстке)? Глядя на готовые страницы можно только догадываться что всё располагается не просто так?! А как? Страница разбивается на определённые зоны в соответствие с размерами содержимого и взаимоотношения между частями материала. Всё это может находиться в случайном взаимоотношении и поэтому при вёрстке приходится придумывать разные варианты! Вот на рис6 и 7 Вы и видите более упорядоченные варианты. У таблиц есть одно хорошее свойство, границы могут быть как видимыми, так и невидимыми. На рисунке невидимые границы в редакторе FrontPage (режим «Конструктор») в виде пунктира. В режиме «Просмотр» их не видно. Так же как и на WEB-страницах. Кроме того можно ячейки сдвинуть как на рис6 в жёлтом прямоугольничке. Визуально это почувствуется при фоновой окраске ячеек, либо на тёмном фоне страницы.
При работе в ВИЗУАЛЬНОМ редакторе Вы можете столкнуться с проблемой вставки таблиц. Есть опция такая и соответственно пимпочка «Добавить таблицу». На рис5а выходит такая картинка где Вы можете выбрать вариант (ы). Я соединил в одной картинке три варианта. Так скажем по три ячейки сразу можно только либо в длину либо в высоту, а вот вместе компактно только по четыре. Аналогично составить так, чтобы в одной строке 3, в другой 2 не получится! Поэтому приходится изощряться рис5. Из 4 возможных ячеек можно сделать три, но только объединив две. Так же получится если объединять по вертикали. Для этого инструментом ЛАСТИК удаляем перекладины. Вот внизу удалена вертикальная. Но получить конструкцию таблицу оставив только одну часть таблицы пурпурного или жёлтого цвета у Вас не получится! Все оставшиеся перекладины окрасятся в розовый (красный) цвет и удалятся. Останется одна таблица-рамка. И нам только и останется как искусственно создавать задуманное, вставляя одну таблицу в другую!
Ниже вы видите код страницы с табличной разметкой содержимого. Это таблица состоящая из двух строк и одного столбца. Такое сочетание предопределяет образование двух ячеек и соответственно независимое расположение содержимого ячеек! Обратите внимание на то как в разных ячейках расположен текст!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Таблица</title>
</head>
<body>
<table border="4" width="600" height="400" bordercolor="#000000">
<tr>
<td align="center" bgcolor="#00FFFF">Ячейка 1</td>
</tr>
<tr>
<td align="center" valign="bottom" bgcolor="#FF00FF">Ячейка 2</td>
</tr>
</table>
</body>
</html>
Всё, что показано выше, есть листинг, такое выражение будет часто встречаться в литературе по WEB — дизайну, привыкайте! В тег <body> входят табличные теги, атрибуты и значения. Теги: <table> — таблица; <tr> — строка; <td> — ячейка. У нас судя по количеству тегов, одна таблица, две строки и две ячейки. Атрибуты: border — граница таблицы; width, height — ширина и высота чего либо; valign — выравнивание содержимого ячеек, со значениями center — по центру, bottom — по низу.
А, что Вам с этими листингами делать? Полюбуйтесь для начала, а потом... Прямо в окне браузера выделите весь листинг, скопируйте, откройте «блокнот» и вставьте. Далее «сохраните как», задав файлу имя, точка htm (html), примерно так stranica.htm Далее войдите в папку где вы сохранили всё это. И щёлкнув по файлу в браузере (который основной?) увидите страницу. Меняя значения атрибутов в коде, посмотрите как меняется картинка! С любым листингом можно поступить также. В учебных целях конечно. А можете оставить себе на память! Конечно на долгую...
Еже ли вы, хотите чтобы ваша страница (с таблицей) в любом разрешении монитора занимала всё окно, то делайте также как и в случае без таблиц (в смысле переноса и перехода на новую строку), но нужно при установке параметров таблицы указать горизонтальный размер — 100%. В этом случае при уменьшении разрешения, ширина таблицы уменьшится, а текст и всё содержимое будет переливаться вниз таблицы (страницы). Поэкспериментируйте вначале, прежде чем окончательно принимать решение.
При желании оставить страницу в любом разрешении неизменной, то у вас есть два пути! Первый и второй!
1) Задайте фиксированный размер ширины таблицы в пикселах (не в процентах) для какого-нибудь разрешения, но в этом случае страница не будет вмещаться в окне (по горизонтали) при меньшем значении разрешения. Внизу окна появится горизонтальная полоса прокрутки. Согласитесь это неудобно, если вдобавок текст длинный! Авторы некоторых сайтов, учитывая, что разрешение менее 800 точек ушло в прошлое (имеется ввиду только разрешение по горизонтали!), делают следующее: Задают ширину страницы где-то 740-760 точек. В этом случае вся страница видна в окне монитора с разрешением 800х600. При выбранном основном разрешении будет видна вся горизонтальная часть таблицы (страницы), а при большем разрешении основная часть будет занимать левую часть ширины окна. Остальное будет пустое поле рис2! Серым цветом, часть страницы. Можно пойти на хитрость и на пустом поле разместить второстепенную информацию, но в другой таблице. К сожалению при просмотре в окне с основным разрешением для просмотра второстепенной информации потребуется горизонтальная прокрутка!
2) Поступить как скажем, я поступил (в старых сайтах). Таблица размещается по центру и задаётся фиксированное значение ширины таблицы — 760 пиксел. Недостаток в том, что пустуют поля справа и слева при разрешении 1024х768 и более. При 800х600 таблица занимает всё. Что конкретно посоветовать я не могу, сами решайте! Если текст шибко литературный и нельзя искажать его форму, то конечно нужно применить последние два варианта. В таблицах можно изменять не только размер таблиц, ячеек но и задавать фон ячеек, видоизменять границы. Менять как цвет границ, их объёмность, а также делать их невидимыми! Глядя на красивые страницы с чётко расположенными элементами и не подозреваешь, что всё это находится в рамках невидимых границ таблицы (таблиц). Только открыв страницу в редакторе Fronte или Dreame, видишь пунктирные линии границ таблицы и ячеек рис6,7.
Всё это красиво на бумаге, а как же про овраги? Да, есть такое... Скажем в первом варианте без проблем. Таблица по умолчанию прижмётся к левой стороне и верху. А со вторым придётся повозиться! Как заставить таблицу замереть точно по центру? Да, можно отодвинуть на несколько пикселов от левого края посредством вот такого варианта, <body leftmargin="250">. Таблица отодвинется на 250 пиксел вправо. Но это только в одном разрешении, в больших таблица уже не будет точно по цетру?! И вообще это несерьёзно! А, что же делать? Найти точку опоры, сделать подложку. Ещё одну таблицу под нашу непутёвую! Таблице-подложке задать ширину 100%. А в таблице-подложке внутри получается одна ячейка. А у ячейки атрибут есть (align) <td align="center"> который и поставит нашу рабочую таблицу ровно по центру рис3. Только там ширина от балды, 140 пиксел. Но это не меняет дела?! Вот наверное и всё, вкратце конечно!