.jpg)
. Но, когда дело доходит до мелкой работы, выстроить ровненько в несколько рядов со столбцами кнопочки, таблицы приходят на выручку. Это просто и не требует дополнительных знаний в CSS, и что особенно, я уверена, будет понятно новичкам, которые вообще не представляют, как верстаются сайты. Кстати, в наших шаблонах двух-колоночное меню тоже сделано в виде таблиц. И так, приступим. Чтобы компактно сгруппировать наши счетчики, необходимо обратиться к учебникам по HTML, к такому разделу, как верстка таблиц.
Я уже давала ссылки на сайты, где я получала свои первые знания в HTML верстке, в статье инструменты вебмастера (блоггера). После прочтения этой статьи, возможно, вам понадобиться узнать какие-то подробности по верстке таблиц, в той статье сможете найти ссылки на полезные ресурсы. Не вдаваясь в подробности, постараюсь передать главную суть верстки таблиц. Мы с вами в повседневной жизни привыкли воспринимать таблицы вертикальными столбцами сверху вниз.
.jpg)
Сейчас нам придется заставлять себя мыслить иначе. Представьте себе строительство кирпичного дома. Что мы видим? Строитель укладывает кирпичик за кирпичиком, начиная слева на право, первый ряд, второй, третий. А теперь представьте, что вы висите на турникете вниз головой, и основание дома получается вверху, и строитель укладывает кирпичи сверху вниз. Ряд за рядом. Именно так и строятся таблицы на языке HTML, сверху вниз, ряд за рядом укладывая кирпичики ячеек таблицы. Кто уже немного понимает в верстке, знает, что, за некоторым исключением, все теги парные. У таблицы все теги имеют пару, открывающий тег – закрывающий тег. Сама таблица определяется тегом
У таблицы есть тело, оно определяется тегом вот тут уж точно будет сама таблица Как я уже сказала, таблица начинается с верхнего левого ряда, и идет не вниз столбцом, а вправо строкой. Давайте представим простую таблицу
| строка 1 ячейка 1 | строка 1 ячейка 2 | строка 1 ячейка 3 |
| строка 2 ячейка 1 | строка 2 ячейка 2 | строка 2 ячейка 3 |
| строка 3 ячейка 1 | строка 3 ячейка 2 | строка 3 ячейка 3 |
Строки в таблице указываются тегом А ячейки тегом Давайте сделаем эту табличку. Не забываем, что нужно указать начало таблицы, и начало тела таблицы, вот как это будет
Вот так будет выглядеть таблица с пустыми ячейками.
Как видите, после открывающего тега тела таблицы, мы сразу указываем, что начинается строка
| строка 1 ячейка 1 | строка 1 ячейка 2 | строка 1 ячейка 3 |
| строка 2 ячейка 1 | строка 2 ячейка 2 | строка 2 ячейка 2 |
| строка 3 ячейка 1 | строка 3 ячейка 2 | строка 3 ячейка 3 |
Как видите, нет ничего сложного. Это, так сказать, классический вариант таблицы, но мне, например, необходимо было свои счетчики сделать вот в такой табличке Для таких случаев есть специальные параметры. Например, в табличке выше, необходимо было объединить ячейки по вертикали, для этого я использовала параметр rowspan=”4″. Число в кавычках означает, сколько нужно ячеек объединить. Если же необходимо объединить ячейки по горизонтали, то используется параметр colspan=”". Давайте сделаем такой пример, и на практике посмотрим, как это делается. Внимательно посмотрим на таблицу, которую нам нужно будет сделать. Я специально пронумеровала ячейки именно в том порядке, как они будут верстаться. Мы сразу видим, что первая ячейка должна объединиться по горизонтали из 2-х. А четвертая ячейка объединяется по вертикали.
| 1 | 2 | |
| 3 | 4 | 5 |
| 6 | 7 | |
| 8 | 9 | 10 |
И вот, что получилось
| 1 | 2 | |
| 3 | 4 | 5 |
| 6 | 7 | |
| 8 | 9 | 10 |
На самом деле таблица с таким кодом и содержанием получается очень узкая, без рамки, но для наглядности я придала ей более понятный вид, а для счетчиков этого ничего не нужно будет. В целом, эта таблица не многим отличается от классического варианта, с той лишь разницей, что к тем ячейкам, которые необходимо объединить по горизонтали или вертикали добавляется нужный параметр, значение которого равняется количеству объединяемых ячеек. Но вернемся к нашей цели. Вам необходимо придумать свою табличку для своих кнопочек и счетчиков статистики. Думаю, это не сложно будет сделать, стоит лишь проявить фантазию. Давать какие-либо рекомендации не возможно, т. к. у всех разные счетчики, разных размеров, я лишь подала вам идею, как это можно элегантно организовать. И так, вы собираете в кучу все ваши счетчики, продумываете, каким образом их можно сгруппировать, чтобы получилась законченная форма, каждый счетчик – это одна ячейка таблицы, продумываете структуру таблицы. Открываете блокнот. Если есть более продвинутый вариант блокнота, специально для записи кода, то замечательно, используйте его, т. к. в подобных блокнотах есть подсветка кода, а это очень удобно. Я почему-то уже давно пользуюсь PSPad, но его нужно качать с интернета. Поэтому смотрите сами. Начинаете делать свою таблицу. Строчку за строчкой, ячейку за ячейкой. Не забудьте в каждую ячейку вставить правильный код счетчика, тот, который вы определили именно для этой ячейки. Дальше, прежде, чем вы перенесете код в свой блог, обязательно сохраните файл как index. html через команду Файл – Сохранить как Затем откройте этот файл в браузере, вы увидите, правильно ли вы все сделали. Если все правильно, переносите весь код в гаджет HTML/JavaScript. Обращу ваше внимание, чтобы вы не пугались, при открытии файла, сохраненного на компьютере, содержимое счетчика liveinternet не видно, только контур – это нормально. Если вместе с видимыми счетчиками вы используете скрытые, можете поместить их код сразу после окончания таблицы. Думаю, на этом все. В целом нет ничего сложного, главное вникнуть. Будут вопросы, задавайте в комментариях. Удачи вам в покорении интернета.