|
Автор |
Сообщение |
den
Старожил
Зарегистрирован: 31.01.2006 Сообщения: 13870 Откуда: Кировоград, Украина
|
|
|
|
В таблицах на Web-страницах могут размещаться числовые и текстовые данные, в них можно вставлять изображения и гиперссылки. Но основным достоинством HTML-таблиц является возможность компоновки Web-страниц. Создав таблицу и заполнив содержимым ее ячейки, вы устанавливаете положение содержимого ячеек на странице.
Табицы HTML строятся по принципу вложения элементов. Таблица формируется тегами <TABLE> и </TABLE>. Каждая строка таблицы задается тегами <TR> и </TR>. Ячейки в строке задаются тегами <TD> и </TD>. В таблицах не предусмотрено тегов столбцов, так как в HTML принята построчная модель описания таблиц.
Пример таблицы, состоящей из двух строк по две ячейки в каждой:
<TABLE>
<TR>
<TD>содержимое ячейки</TD><TD>содержимое ячейки</TD>
</TR>
<TR>
<TD>содержимое ячейки</TD><TD >содержимое ячейки</TD>
</TR>
</TABLE>
Для выделения текста в отдельных ячейках таблицы часто используют тег заголовка <TH>. Заголовки можно вставлять в любом месте таблицы. Содержимое заголовка автоматически размещается по центру ячейки и отображается полужирным шрифтом. Для введения в документ названия таблицы предусмотрен элемент <CAPTION>< /CAPTION>, который размещается после элемента TABLE, до элементов TR и TD.
По умолчанию название таблицы располагается над таблицей сверху и отображается тем же шрифтом, что и содержание ячеек. Но для изменения формата названия элемент CAPTION дополняется следующими атрибутами:
- align - выравнивание left (по левой границе), right (по правой границе), top (название располагается над таблицей), bottom (название располагается под таблицей);
- valign выравнивание top (над таблицей), bottom (под таблицей), в случае, если в атрибуте align уже задано значение left или right.
Задание общих параметров таблицы
Ширина таблицы - это параметр, общий для всех строк, задается в теге <TABLE> атрибутом width. Значение может быть установлено как в пикселях, так и в процентах. Для выравнивания таблицы применяется атрибут align, он может принимать значения: LEFT, CENTER, RIGHT. Для вывода внешней рамки используется атрибут border.
Если в теге <TABLE> атрибут border отсутствует или равен нулю, то браузер отобразит таблицу без видимой рамки. Если атрибут border указан без значений, то таблица будет выведена с внешними и внутренними границами в виде двойной линии толщиной 1 пиксель. Для задания иной толщины границы нужно указать числовое значение атрибута: border=10.
Более гибкие средства задания рамки предоставляют атрибуты frame и rules.
Определение внешней рамки. Атрибут frame может принимать следующие значения:
- border (box) - устанавливает все линии внешней рамки;
- void - внешняя рамка не отображается;
- above - выводит верхнюю границу;
- below - выводит нижнюю границу;
- hsides - выводит только верхнюю и нижнюю линии рамки;
- vsides - выводит только левую и правую линии рамки;
- lhs - устанавливает только левую линию рамки;
- rhs - устанавливает только правую линию рамки.
Определение внутренних границ. Атрибут rules может принимать следующие значения:
- none - линии внутренних рамок не отображаются;
- groups - отображаются горизонтальные границы между группами строк и столбцов;
- rows - отображаются только горизонтальные линии между строками;
- cols - отображаются только вертикальные линии между столбцами;
- all - все внутренние линии рамки отображаются.
Ширина границ таблицы устанавливается атрибутом cellspacing. По умолчанию границы таблицы отображаются двойной линией с расстоянием между ними 2 пикселя. Чтобы изменить это расстояние, нужно в тег TABLE включить атрибут cellspacing, значение которого определит это расстояние. Расстояние от содержимого ячейки до рамки определяется атрибутом cellpadding тега TABLE, которое по умолчанию равно 1 пикселю. Выравнивание содержимого ячеек. По умолчанию содержимое всех ячеек выравнивается по левому краю каждой ячейки (для заголовков установлено выравнивание по центру).
Для задания иного выравнивания в тегах TR и TD вводятся атрибуты align , принимающие значения: left, right, center, justify.
С помощью атрибута valign задается выравнивание содержимого ячеек по вертикали. Этот атрибут может принимать значения: top - выравнивание по верхнему краю ячеек; bottom - выравнивание по нижнему краю ячеек; middle - центрирование по вертикали; baseline - выравнивание всех элементов строки по общей базовой линии.
Задание ширины и высоты. Для задания высоты в тегах TR, TD и TH предусмотрен атрибут height. Ширина элементов TD и TH определяется атрибутом width.
Объединение ячеек таблицы.
Для объединения смежных ячеек в тегах TH и TD предусмотрены атрибуты rowspan - для объединения ячеек смежных строк, значение атрибута задает количество объединяемых ячеек; colspan - для объединения ячеек смежных столбцов, значение атрибута задает количество объединяемых ячеек.
Цвет в таблицах.
Цвет фона в таблицах задается атрибутом bgcolor тегов TABLE, TR, TH, TD, в зависимости от того, в каком теге указан данный атрибут, получится четыре варианта задания цвета: фон всей таблицы, фон строки, фон заголовка, фон ячейки. Чтобы задать цвет внешней рамки таблицы, в тег TABLE добавляется атрибут bordercolor. Задание цвета задается либо шестнадцатеричным числом, либо именованным цветом. Цвет внутренних границ задается так же атрибутом bordercolor, но только тегов TR, TH, TD
Последний раз редактировалось: den (Вт Окт 28, 2008 6:02 am), всего редактировалось 1 раз |
|
Вернуться к началу |
dhsilabs@jabber.ru |
|
|
jeder
Почетный флеймер
Зарегистрирован: 08.06.2007 Сообщения: 1387
|
|
|
|
Это чего такое?
Кирпич для поисковых ботов? |
|
Вернуться к началу |
|
|
den
Старожил
Зарегистрирован: 31.01.2006 Сообщения: 13870 Откуда: Кировоград, Украина
|
|
|
|
Нет, это как было так и скопировал. Просто копирую для себя, чтоб потом не искать, где я это видел. |
|
Вернуться к началу |
dhsilabs@jabber.ru |
|
|
Tuxik
Тяпницо
Зарегистрирован: 02.07.2007 Сообщения: 1521
|
|
|
|
Кстати, я тож форум для этих целей замутил - пихаю туда всю необходимую для себя инфру. |
|
Вернуться к началу |
|
|
jeder
Почетный флеймер
Зарегистрирован: 08.06.2007 Сообщения: 1387
|
|
|
|
А опенОфис и файлы в формате odt уже не катят? |
|
Вернуться к началу |
|
|
Tuxik
Тяпницо
Зарегистрирован: 02.07.2007 Сообщения: 1521
|
|
|
|
Так удобнее, раз и откуда угодно зашел, хоть с сотика и посмотрел. |
|
Вернуться к началу |
|
|
den
Старожил
Зарегистрирован: 31.01.2006 Сообщения: 13870 Откуда: Кировоград, Украина
|
|
|
|
Конечно удобнее ))) И я могу откуда хоч прочитать и пользователи тоже |
|
Вернуться к началу |
dhsilabs@jabber.ru |
|
|
jeder
Почетный флеймер
Зарегистрирован: 08.06.2007 Сообщения: 1387
|
|
|
|
Но там же ничего не понятно. Просто кирпич в одно предложение |
|
Вернуться к началу |
|
|
den
Старожил
Зарегистрирован: 31.01.2006 Сообщения: 13870 Откуда: Кировоград, Украина
|
|
Вернуться к началу |
dhsilabs@jabber.ru |
|
|
Julia
Участник тусовки
Зарегистрирован: 28.01.2009 Сообщения: 385 Откуда: Россия
|
|
|
|
В партнерской программе организации предлагается поместить на сайт Flash-баннер. Он подгружается из другого ресурса инета. Но он у меня слишком мал для верхней ячейки таблицы сайта. Как мне его увеличить и возможно ли это вообще? Вот код:
<a href="http://www.linuxcenter.ru/shop/distros/linux-distros/Mandriva-Flash-2GB-USB/r_126711?sh=mandrivaflash"><img src="http://www.linuxcenter.ru/banners/linuxformat468_2.gif"></a> _________________ Первый блин комом, второй - eкзeшником! |
|
Вернуться к началу |
|
|
jeder
Почетный флеймер
Зарегистрирован: 08.06.2007 Сообщения: 1387
|
|
|
|
Julia, Мандриву продавать собираетесь?
Цитата: |
<a href="http://www.linuxcenter.ru/shop/distros/linux-distros/Mandriva-Flash-2GB-USB/r_126711?sh=mandrivaflash"><img src="http://www.linuxcenter.ru/banners/linuxformat468_2.gif"></a>
|
После <img добавляете style="width: сКоКаНаДа px; height: СкОкАнАда px;" |
|
Вернуться к началу |
|
|
Julia
Участник тусовки
Зарегистрирован: 28.01.2009 Сообщения: 385 Откуда: Россия
|
|
|
|
jeder писал(а): |
Julia, Мандриву продавать собираетесь?
Цитата: |
<a href="http://www.linuxcenter.ru/shop/distros/linux-distros/Mandriva-Flash-2GB-USB/r_126711?sh=mandrivaflash"><img src="http://www.linuxcenter.ru/banners/linuxformat468_2.gif"></a>
|
После <img добавляете style="width: сКоКаНаДа px; height: СкОкАнАда px;" |
Это другой вопрос. Посмотрите в галерее мой скрин с браузера, как все разъехалось. Картинки и текст - каждый сам по себе. Кроме того, после установки счетчика высота таблицы стала гигантской. Что делать? Ведь хотела ставить на хостинг! _________________ Первый блин комом, второй - eкзeшником! |
|
Вернуться к началу |
|
|
jeder
Почетный флеймер
Зарегистрирован: 08.06.2007 Сообщения: 1387
|
|
|
|
Цитата: |
Посмотрите в галерее мой скрин с браузера, как все разъехалось.
|
Можно ссылку?
Julia, а вообще с вашими проблемами в написании сайта, скачайте вот эту прогу и не мучайтесь http://jeder.ru/?p=461
Там в комплекте и учебник есть на русском. |
|
Вернуться к началу |
|
|
Julia
Участник тусовки
Зарегистрирован: 28.01.2009 Сообщения: 385 Откуда: Россия
|
|
|
|
jeder писал(а): |
Цитата: |
Посмотрите в галерее мой скрин с браузера, как все разъехалось.
|
Можно ссылку?
Julia, а вообще с вашими проблемами в написании сайта, скачайте вот эту прогу и не мучайтесь http://jeder.ru/?p=461
Там в комплекте и учебник есть на русском. |
Зачем мне твой композер,когда у меня есть Голубая Рыба!Ты мне лучше скажи,из-за чего этот трабл! _________________ Первый блин комом, второй - eкзeшником! |
|
Вернуться к началу |
|
|
олег алексеевич
Тысячник
Зарегистрирован: 18.01.2009 Сообщения: 1365 Откуда: ua Кропивницкий
|
|
|
|
Julia,
он не скажет-не знает.
я уже и в гугле искал ответ на проблему резиновых колонок,но безуспешно.когда нужна помощь-пишут,когда решили проблему-молчат.злые все-думают что пускай другие мучаются. _________________ помощь в личку платно.Удалю вирус,шелл с сайта Джумла, Битрикс .
Создам плагин , модуль под заказ для VirtueMart , JoomShopping |
|
Вернуться к началу |
|
|
|
|
 Главная страница сайта
|
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах
|
|