Статистика форума
Самые активные пользователи
Уважаемые пользователи
Недавно обновленные темы
Новые участники
  • Страница 1 из 1
  • 1
Модератор форума: XemorDio  
Создаем таблицы для сайта
Основатель сайта
Пользователь №: 1
Регистрация: 11.10.2012
Звание: Легенда
Сообщений: 678
Сообщение # 1
Дата: 02.04.2014 в 17:14

Таблицы



Если размеры ячеек таблиц изначально не заданы, они "подстраиваются” под объем содержимого ячеек.

По умолчанию границы таблиц не отображаются (border=0), чтоб назначить минимальную окантовку, нужно задать border=1.




Столбец 1 Столбец 2 Столбец 3


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




Первая ячейка 1-й строкиВторая ячейка 1-й строки
Первая ячейка 2-й строкиВторая ячейка 2-й строки


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




Рамки таблиц рельефно-двойные. так как по умолчанию атрибут cellspacing=2

Зададим cellspacing=0
Заголовок 1Заголовок 2
Содержание 1Содержание 2


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




ГородНаселение
Москва10.000.000

Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!





Для плавного обтекания таблицы текстом:
ГородНаселение
Москва10.000.000


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!



в первый тег table нужно добавить
style="float: left; margin: 0 5px 2px 0;"
для аналогичного обтекания текстом справа:
style="float: right; margin: 0 0 2px 5px;"




Поместить несколько таблиц в ряд, например:
ГородНаселение
Москва10.000.000
ГородНаселение
Минск2.000.000
ГородНаселение
Киев2.000.000


Код:
Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




ГородНаселение
Москва10.000.000
Минск2.000.000
Киев2.000.000

Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




Заголовок 1Заголовок 2Заголовок 3
РЯД 2РЯД 2РЯД 2
РЯД 3РЯД 3РЯД 3
РЯД 4РЯД 4РЯД 4


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




Цветная ячейка 1Цветная ячейка 2
Цветная ячейка 3Цветная ячейка 4


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




Цветная ячейка 1Цветная ячейка 2
Цветная ячейка 3Цветная ячейка 4


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




БлогсервисыЖЖЛи.ру
ДиариЯ.ру


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




Блогсервисы
ЖЖЛи.руДиариЯ.ру


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!




Табличным кодом можно задать цветной фон поста:

Теги… Все эти кавычечки, буквочки и скобочки -
как узоры следов на снегу. Сначала - неизвестная азбука, а потом, когда
вникнешь - книга, прочтение которой не вызывает затруднений.
Упоительнейшее занятие - пишешь слово, затем оборачиваешь его
замысловатыми иероглифами, кутаешь в слои черно-белых символов и
получаешь восхитительнейший результат. © singita

Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!





Можно фоном поста сделать картинку:


Спокойной ночи, дорогие друзья мои…


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!


Параметр cellpadding задает оступ текста от границ
картинки. Если объем текста превышает размеры картинки, она будет
автоматически продублирована нужное число раз (в примере выше 2 раза)




Таблицей можно сделать рамку картинки:


ЗАКАТ


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!


Размер картинки любой - рамка сама "подгонится”




Быстро наложить текст на картинку без графических редакторов:



Закат на даче

Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!



В значения width и height вместо многоточий ставятся размеры картинки (их можно узнать из пункта "Свойства” вашей картинки)




Разделить пост на две части можно так:
Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis …


Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!



В качестве разделителя служит пустой столбец
Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!
, меняя
Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!
и
Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!
, меняем цвет и толщину разделителя




Делаем галереи картинок с помощью таблиц:

(здесь использованы кликабельные превьюшки. что и вам советую)


Ее код:

Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!


Или так:




Код
Гость вам запрещен показ кода - скрипта, зарегистрируйтесь !!!



Думаю, принцип понятен. Атрибут cellspacing=8 здесь задает расстояние между картинками, равное 8 пикселов





  • Страница 1 из 1
  • 1
Поиск:
Пользователи, посетившие форум за текущий день
22:11




Сайт управляется системой uCoz | Design by EXELENT
Авторское право на игру и использованные в ней материалы принадлежат GSC Game World
Администрация сайта не несёт ответственности за содержащиеся файлы на данном портале.
В случае полного, или частичного копирования ссылка на источник обязательна!
© 2012 Zona-chernobyl

  

Этот сайт использует файлы cookies для более комфортной работы пользователя. Продолжая просмотр страниц сайта, вы соглашаетесь с Политикой использования файлов cookies.