СТРОИМ ТАБЛИЦУ Построим простейшую таблицу, состоящую из одной строки и двух столбцов. <table> <br /> <tr> <br /> <td>Текст1</td> <br /> <td>Текст2</td> <br /> </tr><br /> </table> Текст1 Текст2 Теперь добавим рамку к нашей таблице. Для этого нужно в тег <table></table> добавить border="3" Этот параметр определяет ширину бордюра таблицы. Усли нужна рамка толщиной 10 пиксель то 3 меняем на 10. А если мы хотим сделать нашу таблицу на каком-нибудь фоне, то добавим к таблице параметр background и укажем адрес нашего фона <table border="3" background="//s60.radikal.ru/i170/0905/cf/597b1b96c0fc.jpg"> <br /> <tr> <br /> <td>Текст1</td> <br /> <td>Текст2</td> <br /> </tr><br /> </table> Текст1 Текст2 Теперь создадим вот такую таблицу Первая строка. Текст1 Первая строка. Текст2 Последняя строка. Текст1 Последняя строка. Текст2 Текст1 Текст2 <table border="1" width="100%"><br /> <thead align="left"> <br /> <tr> <br /> <td>Первая строка. Текст1</td> <br /> <td>Первая строка. Текст2</td> <br /> </tr> <br /> </thead> <br /> <thead align="right"> <br /> <tr> <br /> <td>Последняя строка. Текст1</td> <br /> <td>Последняя строка. Текст2</td> <br /> </tr> <br /> </thead> <br /> <tbody align="center"> <br /> <tr> <br /> <td>Текст1</td> <br /> <td>Текст2</td> <br /> </tr> <br /> </tbody> <br /> </table> В первой строке текст размещен слева, в последней строке - справа, а в центральной строке - посередине Таблица с заголовками Тег <th></th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Располагается этот тег только внутри тега <tr></tr> <table border="1" width="70%"> <br /> <tbody align="center"> <br /> <tr> <br /> <th>Заголовок1</th> <br /> <th>Заголовок2</th> <br /> </tr> <br /> <tr> <br /> <td>Текст1</td> <br /> <td>Текст2</td> <br /> </tr> <br /> </tbody> <br /> </table> Заголовок1 Заголовок2 Текст1 Текст2 Объеденим несколько ячеек таблицы. Для этого в теге <td></td> нужно указать colspan - объеденяет горизонтальные ячейки, rowspan - вертикальные Объеденим 2 ячейки первой строки в одну ячейку <table border="1" width="70%"> <br /> <tbody align="center"> <br /> <tr> <br /> <td colspan="2" rowspan="1">Текст1</td> <br /> </tr> <br /> <tr> <br /> <td>Текст2</td> <br /> <td>Текст3</td> <br /> </tr> <br /> </tbody> <br /> </table> Текст1 Текст2 Текст3 Объеденим 2 ячейки первого столбца в одну ячейку <table border="1" width="70%"> <br /> <tbody align="center"> <br /> <tr> <br /> <td colspan="1" rowspan="2">Текст1</td> <td>Текст2</td> <br /> </tr> <br /> <tr> <br /> <td>Текст3</td> <br /> </tr> <br /> </tbody> <br /> </table> Текст1 Текст2 Текст3 Параметры тега <table></table> cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками. <table border="1" cellspacing="10" cellpadding="30"> <br /> <tbody align="center"> <br /> <tr> <br /> <td>Текст1</td> <br /> <td>Текст2</td> <br /> </tr> <br /> <tr> <br /> <td>Текст3</td> <br /> <td>Текст3</td> <br /> </tr> <br /> </tbody> <br /> </table> Текст1 Текст2 Текст3 Текст3 Для тех, кому лень вникать во все эти премудрости, можете просто скопировать код вот такой рамки ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ Помощь блоггеру

Серия сообщений "HTML":

Часть 1 - 33 полезные кнопочки
Часть 2 - самые необходимые ТЕГИ для оформления записей
...
Часть 14 - Теги для ЖЖ
Часть 15 - Визуальный "Редактор HTML кода"
Часть 16 - Строим таблицу(урок от Джулии)
Часть 17 - рамочка моя
Часть 18 - ВСЕГДА ПОД РУКОЙ
...
Часть 20 - Делаем контейнер для окошек ЛИру с любыми кодами
Часть 21 - МОИ ПОДПИСИ на Лирушке + КУРСОРЫ(вверху)
Часть 22 - подсказка "КАК ПЕРЕНЕСТИ ЗАПИСИ из БЛОГА в ДНЕВНИК" часть2

Серия сообщений "коды,формулы":

Часть 1 - 33 полезные кнопочки
Часть 2 - О кодах видео с ютуб
...
Часть 9 - Шпаргалочка по тегам Берём к себе в цитатник.
Часть 10 - Как можно расположить картинки в тексте УРОК
Часть 11 - Строим таблицу(урок от Джулии)
Часть 12 - рамочка моя
Часть 13 - ВСЕГДА ПОД РУКОЙ
Часть 14 - Оформление постов. Теги. Ответы на вопросы.
Часть 15 - Делаем контейнер для окошек ЛИру с любыми кодами

Серия сообщений "* Генераторы":

Часть 1 - On-line генераторы
Часть 2 - Как сделать слайд онлайн. Вариант 1
...
Часть 33 - Флеш-календари онлайн
Часть 34 - Подбираем сочетания цвета легко
Часть 35 - Генераторы таблиц
Часть 36 - ГЕНЕРАТОР ПЛЕЕРОВ MP3
Часть 37 - Генераторы он-лайн
Часть 38 - Отличный генератор кода цвета - в помощь для ваших работ
Часть 39 - Генератор кода цвета 2

Таблица для картинок и не только.
 

Таблица для картинок и не только.

Хотите выложить много картинок в один пост, но они все большие и разных размеров. А хочется, чтобы всё выглядело компактно и красиво. Что же делать?
Выход есть!
Построим табличку, в которую и вставим картинки. Эти картинки у нас кликабельны, т.е. при клике на картинке левой кнопкой мыши она откроется в другом окне в полный свой размер.

Построение таблиц

http://novice.ws/langtable.htm


ПРИ РАБОТЕ С ТАБЛИЦЕЙ ВСЕ *** УБРАТЬ !!!

Таблицы в "оригинальном" понимании этого слова при составления Web-страниц конечно же применяются для их прямого предназначения, но не так повсеместно как они используются при разметки страницы. С помощью них страница сайта делится на несколько частей, где количество частей не ограничено. Наряду с их большими возможностями позиционирования к дргуг к другу и широким выбором структурирования - способ разметки страниц таблицами делает лучшим на сегодняшний день инструментом для Web-дизайнера. Имеют место еще два способа заполнения страниц - с использованием программ-конструкторов и с помощью фреймов . Первые имея преимущества в простоте использования (объекты позиционируются пользователем визуально без знания языка HTML) имеют существенный недостаток - они создают страницы только под конкретное расширения экрана. На других расширениях страница будет выглядеть некорректно. С фреймами обстоят дела еще хуже - их не "видят" поисковые машины. Поэтому почти всегда применяют табличный метод, а Вам предлагаем подойти к этой теме с особым вниманием.
Теги таблиц

Применение таблиц
 

Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов

Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".

Таблицы

Таблица определяется тегами и .
Внутри этих тэгов допускаются теги

• предназначен для создания заголовка к таблице.
• задает ширину и другие атрибуты одной или нескольких колонок таблицы.
• предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
• предназначен для хранения одной или нескольких строк таблицы.
• определяет колонку таблицы.
• определяет строку таблицы.
• предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.
• предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
• предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.

Начало строки таблицы определяется тегом и заканчивается
Внутри строки располагаются теги столбцов

ОБРАЗЦЫ И КОДЫ ОТ ДЖУЛИИ
 

ИСТОЧНИК В кодах везде проставлен border="1". Чтобы не было видно этого серого контура, смените 1 на 0 (border="0"). Вместо слова ФОН или КОНТУР нужно ставить адрес фона начинается с: Вместо слов КАРТИНКА ставите код картинки: ВСЕ ФОРМУЛЫ В ОКОШКАХ ДЛЯ КОДОВ: Формула к этой рамке: <table border="1" cellspacing="0" cellpadding="8" background="ФОН"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН"><tr><td><table border="1" cellspacing="0" cellpadding="10" background="ФОН"><tr><td><center><text color="ffffff" size="3">Заголовок</text></center><br /><table align="center" border="1" cellspacing="1" cellpadding="6" background="ФОН"><tr> <td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"> <tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"> <tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"> <tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"> <tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"><tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td></tr><tr> <td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"><tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"> <tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"> <tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"><tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td></tr><tr> <td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"><tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"> <tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"> <tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td> <table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"><tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td></tr><tr><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"><tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"> <tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"> <tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td><td><table border="1" cellspacing="1" cellpadding="2" background="КОНТУР ЯЧЕЙКИ"><tr><td><table border="1" cellspacing="10" cellpadding="0" background="ФОН ЯЧЕЙКИ"><tr><td><text size="2" color="#000000">Текст</text></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><br />