www.popularsite.ru

RESTOR- От HTML до С++

Объявление

HTML

JavaScript

CSS

Flash MX
   

Содержание Курса(Введение в HTML)

     

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » RESTOR- От HTML до С++ » Введение в HTML » 5. Лекция: Таблицы в HTML

5. Лекция: Таблицы в HTML

Страница:   1 2
Тема закрыта

Сообщений 11 страница 18 из 18

11

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Атрибуты АLIGN и VALIGN

Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.

ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

АLIGN=сеnter располагает содержимое ячейки по центру.

АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

<HTML>
<BODY>
  <TABLE BORDER WIDTH=100%>
    <TR>
      <TD ALIGN=left>Текст или данные</TD>
        <TD ALIGN=center>Текст или данные</TD>
        <TD ALIGN=right>Текст или данные</TD>
    </TR>
    <TR>
      <TD ALIGN=right>Текст или данные</TD>
      <TD ALIGN=center>Текст или данные</TD>
      <TD ALIGN=left>Текст или данные</TD>
    </TR>
    <TR>
      <TD ALIGN=right>Текст или данные</TD>
      <TD ALIGN=right>Текст или данные</TD>
      <TD ALIGN=right>Текст или данные</TD>
    </TR>
    <TR>
      <TD ALIGN=center>Текст или данные</TD>
      <TD ALIGN=center>Текст или данные</TD>
      <TD ALIGN=center>Текст или данные</TD>
    </TR>
    <TR>
      <TD ALIGN=left>Текст или данные</TD>
      <TD ALIGN=left>Текст или данные</TD>
      <TD ALIGN=left>Текст или данные</TD>
    </TR>
  </TABLE>
</BODY>
</HTML>

0

12

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:

VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

VALIGN=middle центрирует содержимое ячейки по вертикали.

VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

<HTML>
<BODY>
  <CENTER>
  <TABLE BORDER WIDTH=90%>
    <TR>
      <TD WIDTH=100>Атрибут VALIGN осуществляет
          выравнивание текста и графики внутри
          ячейки по вертикали.</TD>
      <TD VALIGN=top>верх,</TD>
      <TD VALIGN=middle>середина,</TD>
      <TD VALIGN=bottom>низ.</TD>
    </TR>
    <TR VALIGN=top>
      <TD> VALIGN=top Выравнивает содержимое
          ячейки по ее верхней границе.</TD>
      <TD>верх,</TD>
      <TD>верх,</TD>
      <TD>верх.</TD>
    </TR>
    <TR VALIGN=middle>
      <TD>VALIGN=middle Центрирует содержимое
          ячейки по вертикали.</TD>
      <TD>середина,</TD>
      <TD>середина,</TD>
      <TD>середина.</TD>
    </TR>
    <TR VALIGN=bottom>
      <TD>VALIGN=bottom Выравнивает содержимое
          ячейки по ее нижней границе.</TD>
      <TD>низ,</TD>
      <TD>низ,</TD>
      <TD>низ.</TD>
    </TR>
  </TABLE>
  </CENTER>
</BODY>
</HTML>

0

13

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Атрибут BORDER

В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

0

14

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Атрибут CELLSPACING

Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

<HTML>
<BODY>
  <CENTER>
  <TABLE BORDER CELLSPACING=20>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
  </TABLE>
  <TABLE BORDER CELLSPACING=10>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
  </TABLE>
  <TABLE BORDER CELLSPACING=0>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TD>Текст или данные</TD>
      <TD></TD>
      <TD>Текст или данные</TD>
    </TR>
  </TABLE>
  </CENTER>
</BODY>
</HTML>
       

0

15

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Атрибут BGCOLOR

Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

<HTML>
<BODY>
    <CENTER>
    <TABLE BORDER BGCOLOR=yellow>
      <TR BGCOLOR=blue>
        <TD>Текст или данные</TD>
        <TD BGCOLOR=red>Текст или данные
        </TD>
        <TD>Текст или данные</TD>
      </TR>
      <TR BGCOLOR=green>
        <TD>Текст или данные</TD>
        <TD>Текст или данные</TD>
        <TD BGCOLOR=lime>Текст или данные
        </TD>
      </TR>
    </TABLE>
    </CENTER>
</BODY>
</HTML>

0

16

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Атрибут BACKGROUND

Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.

0

17

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Использование таблиц в дизайне страницы

Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью (открыть)

<HTML>
<BODY>
  <CENTER>
  <TABLE CELLPADDING="10" CELLSPACING="0"
         BORDER="16">
    <TR>
      <TD ALIGN="center">
        <H2>Интернет-Университет
            Информационных Технологий</H2>
        <H3>Добро пожаловать!</H3>
        <TABLE BORDER WIDTH="100%">
          <TR>
            <TD ALIGN="center"><I>Учебный курс
             "Основы Web-технологий"</I></TD>
          </TR>
        </TABLE>
      </TD>
    </TR>
  </TABLE>
  </CENTER>
</BODY>
</HTML>

0

18

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Создание разноцветных таблиц

Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.

Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:
<BODY ВАСКGROUND="image.gif" ВGCOLOR="#FF0000">

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

0

Тема закрыта
Страница:   1 2

Вы здесь » RESTOR- От HTML до С++ » Введение в HTML » 5. Лекция: Таблицы в HTML

Рейтинг форумов | Создать форум бесплатно