Web-дизайн

:

Введение в HTML
[+]
Опубликован: 12.08.2003 | Уровень: для всех | Доступ: платный | ВУЗ: Российский государственный гуманитарный университет
Лекция 5:

Таблицы в HTML
A
|
версия для печати
< Лекция 4 || Лекция 5: 123 || Лекция 6 >
Применение пустых ячеек

Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.

Атрибут СЕLLРАDDING

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

<HTML>
<BODY>
  <CENTER>
  <TABLE BORDER CELLPADDING=20>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
  </TABLE>
<BR>
  <TABLE BORDER CELLPADDING=0>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TD>Текст или данные</TD>
        <TD>Текст или данные</TD>
        <TD>Текст или данные</TD>
    </TR>
  </TABLE>
  </CENTER>
</BODY>
</HTML>
Атрибуты А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>

Атрибут 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>
Атрибут BORDER

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

Атрибут 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>
Атрибут 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>
Атрибут BACKGROUND

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

Дальше >>
< Лекция 4 || Лекция 5: 123 || Лекция 6 >

Вопросы и ответы

вопросов: 6
Олеся Артюх
Олеся Артюх

(Лекция №2, курс Введение в HTML:

"...Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа ( HEAD ) и тела документа ( BODY ). Рассмотрим простейший пример классического документа.

<HTML> <HEAD> <TITLE>Простейший документ</TITLE> </HEAD> <BODY TEXT=#0000ff BGCOLOR=#f0f0f0> <H1>Пример простого документа</H1> <HR> Формы HTML-документов <UL> <LI>Классическая <LI>Фреймовая </UL> <HR> </BODY> </HTML>

ответить
Роман Шумилов
Роман Шумилов

В Тесте #4 в качестве ответа на одно из заданий, причем верного ответа, используется тег, о котором ни в лекции 4, ни в предыдущих вообще не упоминалось. По этой причине, сдать тест #4 на отлично с первой попытки возможно только наугад. Конкретно тег <INPUT> до 4-ой лекции не упоминался ни разу.

ответить

Студенты

всего: 14303
Наталья Алмаева
Наталья Алмаева
Россия
предложить дружбу
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск
предложить дружбу