Студопедия

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

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

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






  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
  • HTML - таблицы






    Информация в таблице содержится как в горизонтально расположенных строках, так и в вертикальных – столбцах. Пересечения строк и столбцов образубт ячейки.Но 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>  

     
     






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