Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






💸 Как сделать бизнес проще, а карман толще?
VisitTime
Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое раписание, но и напоминать клиентам о визитах тоже. Проблема в том, что средняя цена по рынку за такой сервис — 800 руб/мес или почти 15 000 руб за год. И это минимальный функционал. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
⚡️ Для новых пользователей первый месяц бесплатно. А далее 290 руб/мес, это в 3 раза дешевле аналогов. За эту цену доступен весь функционал: напоминание о визитах, чаевые, предоплаты, общение с клиентами, переносы записей и так далее.
✅ Уйма гибких настроек, которые помогут вам зарабатывать больше и забыть про чувство «что-то мне нужно было сделать».
Сомневаетесь? нажмите на текст, запустите чат-бота и убедитесь во всем сами!

HTML - таблицы


⇐ ПредыдущаяСтр 6 из 6




Информация в таблице содержится как в горизонтально расположенных строках, так и в вертикальных – столбцах. Пересечения строк и столбцов образубт ячейки.Но Html – таблицы не способны производить математические расчеты.

Для включения таблицы в Html-документ используется тег < TABLE>. Параметры самой таблицы задаются с помощью трех тегов:

< TH> -для заголовков таблицы;

< TR> -для задания строк;

 
 

< TD> -для задания данных (то есть информации, которая будет содержаться в ячейках таблицы).

< table> < tr> < td bgcolor=" #CCCCСС" > a< /td> < td bgcolor=" #999999" > b< /td> < td bgcolor=" #CCCCСС" > c< /td> < /tr> < tr> < td bgcolor=" #999999" > a1< /td> < td bgcolor=" #CCCCСС" > b2< /td> < td bgcolor=" #999999" > c3< /td> < /tr> < /table>
Пример:

Фон задается параметром bgcolor=" цвет_фона". Фон можно задать для таблицы в целом, для строки, для столбца (в пределе одной строки). В нашем случае задали фон для каждого столбца. Высота и ширина ячейкам таблицы задается параметрами height и width. Их можно задать для всей таблицы, для одной строки, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. Зададим ширину и высоту в пикселях для столбцов (ячеек).

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

То же самое со строками, если задать для какой-то строки наибольшую длину, то все остальные строки выровняются по этой наибольшей строке. Можно задать высоту и ширину для всей таблицы, тогда все ячейки и строки поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).

Выровнять текст можно при помощи тега < center> < /center>. В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). Для форматирования текста применяются рассмотренные выше теги.

Пример:

 

< table> < tr> < td height=" 40" width=" 55" bgcolor=" #CCCCCC" > < center> a < /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> b < /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> c < /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" > < center> a1 < /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2 < /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> c3 < /center> < /td> < /tr> < /table>

 
 

 


Вертикальное выравнивание задается следующим атрибутом - valign=" middle" (top, bottom) - содержимое конкретной ячейки будет находиться в середине ячейки (наверху или внизу).

< table> < tr> < td height=" 40" width=" 55" bgcolor=" #CCCCCC" valign=" top" > < center> a< /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> b< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" valign=" bottom" > < center> c< /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" valign=" bottom" > < center> a1< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2< /center> < /td> < td width=" 55" bgcolor=" #999999" valign=" top" > < center> c3< /center> < /td> < /tr> < /table>
Пример:

 
 

 

Для создания таблиц сложной структуры применяются параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество строк (эти параметры могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (строки)).

Пример:

 

 
 

 
 
< table> < tr> < td height=" 40" bgcolor=" #CCCCCC" colspan=" 2" > < center> a< /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> b< /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" > < center> a1< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2< /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> c3< /center> < /td> < /tr> < /table>

 

 


 
 

В этом примере использовался параметр colspan=2, прописав его для ячейки «а» Ячейки «с» нет, т.к. ячейка «а» равна по длине двум ячейкам (что указано параметром colspan). Для избавления от пространства между ячейками таблицы используется атрибут cellspacing.

< table cellspacing=0> < tr> < td height=" 40" bgcolor=" #CCCCCC" colspan=" 2" > < center> a< /center> < /td> < td width=" 55" bgcolor=" #999999" rowspan=" 2" > < center> b< /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" > < center> a1< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2< /center> < /td>   < /tr> < /table>
Пример:

 

Можно увеличить пространство между ячейками, присвоив параметру другое значение cellspacing=5. Существует атрибут cellpadding, который добавляет свободное пространство между содержимым ячейки и ее границами.

Использовние параметра bgcolor задает цвет фона для таблицы (строки, ячейки), а параметр background задает фоновую картинку для таблицы (строки, ячейки). Применение этого параметра необходимо так, как Internet Explorer отображает параметр bgcolor для вложенных таблиц, а Netscape Navigator этот параметр для вложенных таблиц не отображает, поэтому используется background.

Чтобы ячейка не пустовала, в нее вводится & nbsp (символ неразрывного пробела), потому что конструкцию < td> < /td> броузеры игнорируют. Поэтому для корректного отображения таблицы везде необходимо вставлять в пустые ячейки & nbsp.

Параметр align можно задать для содержимого ячейки, но удобного align=" justify" тут нет.

Рамка вводится параметром border. Например, зададим рамку равную 3 пикселям:

< table border=" 3" >

Для задания рамке цвета используется параметр:

< table border=" 3" bordercolor=" #000000" >

 

Ниже в таблице приведена краткая сводка допустимых атрибутов:

Атрибут Элемент Назначение
ALIGN= Таблица, заголовок, строка, ячейка. Выравнивание таблицы по горизонтали; выравнивание данных по горизонтали; размещение заголовка над или под таблицей.
VALIGN= Строка, ячейка. Выравнивание по вертикали.
WIDTH= Таблица, ячейка. Ширина.
HEIGHT= Ячейка. Высота.
COLSPAN= Ячейка. Протяженность в несколько столбцов.
POWSPAN= Ячейка. Протяженность в несколько строк.
BGCOLOR= Таблица, ячейка. Цвет фона.
CELLSPACING= Таблица. Зазор между ячейками.
CELLPADDING= Таблица. Зазор между содержимым ячейки и ее границей.
BORDER= Таблица. Отображение границ ячеек и внешней рамки таблицы.
BORDERCOLOR= Таблица Цвет рамки.

 

Пример таблицы с использованием допустимых атрибутов:

 

< html> < head> < title> Таблицы < /title> < /head> < body text=" blue" bgcolor=" lightblue" > < center> < b> Отметка посещаемости< /b> < table cellspacing=0 border=" 3" bordercolor=" darkblue" > < tr> < td width=" 50" height=" 60" rowspan=" 2" align=" center" > № п/п< /td> < td width=" 250" rowspan=" 2" valign=" middle" align=" center" > Фамилия И.О.< /td> < td width=" 360" height=" 30" colspan=" 6" valign=" middle" align=" center" > Присутствие< /td> < /tr> < tr bgcolor=" #CCCCCC" > < td width=" 60" height=" 30" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < /tr> < tr> < td width=" 50" height=" 30" valign=" middle" align = " center" > 1. < /td> < td width=" 250" > & nbsp < /td> < td width=" 60" > & nbsp< /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < /tr> < /table> < /center> < /body> < /html>  

 
 


⇐ Предыдущая123456




© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.