Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Cellpadding – пространство внутри ячеек HTML таблицы

⇐ ПредыдущаяСтр 5 из 9Следующая ⇒

Определим пространство внутри ячейки HTML таблицы:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="0" cellpadding="8" style="background-color:#cc0000; color:#ffffff"> <tr> <td>ячейка 1, первый ряд</td> <td>   </td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td>ячейка 2, второй ряд</td> </tr> </table> </body> </html>

Атрибуты и значения

cellspacing="0" – определяет расстояние между ячейками HTML таблицы, а также между границами ячеек и границей таблицы.
cellpadding="8" – пространство между границей ячейки и ее содержимым.
style="" – линейное включение CSS.
background-color: – определяет цвет фона.
color: – определяет цвет текста.

Символ пробела   в этом месте заполняет пустое пространство внутри ячейки.

Результат:

ячейка 1, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд

Заметьте, что в данном случае ширина и высота таблицы определена ее содержимым и значением cellpadding. И еще, различными браузерами свойства некоторых атрибутов отображаются по разному, если в Internet Explorer четко видно, что рамка черная, то, например, в Firefox она будет переливаться. Как обойти эти расхождения, вы узнаете в уроке CSS таблицы.

Cellspacing – расстояние между ячеек HTML таблицы

Определим расстояние между ячейками и границей HTML таблицы в 12 пикселей:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="12" cellpadding="12"> <tr> <td style="background-color:#cc0000; color:#ffffff">ячейка 1, первый ряд</td> <td>   </td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td style="background-color:#cc0000; color:#ffffff">ячейка 2, второй ряд</td> </tr> </table> </body> </html>

cellspacing="", как уже было сказано выше, определяет расстояние между границами ячеек HTML таблицы, а также между границами ячеек и границeй таблицы.

Результат:

ячейка 1, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд

В следующем примере border="0" отменит границы HTML таблицы и ячеек:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="0" cellspacing="12" cellpadding="12"> <tr> <td style="background-color:#cc0000; color:#ffffff">ячейка 1, первый ряд</td> <td>   </td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td style="background-color:#cc0000; color:#ffffff">ячейка 2, второй ряд</td> </tr> </table> </body> </html>

Результат:

ячейка 1, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд

HTML таблица и ее размеры

Ширина и высота HTML таблицы:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="0" cellpadding="15" width="90%" height="130"> <tr> <td>ячейка 1, первый ряд</td> <td style="background-color:#ffffcc">ячейка 2, первый ряд</td> <td>ячейка 3, первый ряд</td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td>ячейка 2, второй ряд</td> <td>ячейка 3, второй ряд</td> </tr> </table> </body> </html>

Результат:

ячейка 1, первый ряд	ячейка 2, первый ряд	ячейка 3, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд	ячейка 3, второй ряд

Посмотреть в новом окне: HTML таблица

Атрибуты и значения

width – определяет, в данном случае, ширину HTML таблицы в пикселях или в процентах.
height – определяет высоту HTML таблицы.

или свойства HTML таблицы и ячеек на примерах

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

Ширина и высота ячеек HTML таблицы
Горизонтальное выравнивание внутри HTML таблицы
Вертикальное выравнивание внутри HTML таблицы
Заголовок HTML таблицы
HTML таблица по центру, с левой, с правой стороны
HTML таблица внутри ячейки другой таблицы

Ширина и высота ячеек HTML таблицы

Определим размеры ячеек HTML таблицы:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="0" cellpadding="12"> <tr> <td width="200" height="100">ячейка 1, первый ряд</td> <td>ячейка 2, первый ряд</td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td>ячейка 2, второй ряд</td> </tr> </table> </body> </html>

Результат:

ячейка 1, первый ряд	ячейка 2, первый ряд
ячейка 1, второй ряд	ячейка 2, второй ряд

Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.

Горизонтальное выравнивание внутри HTML таблицы

Текст слева, справа, по центру ячейки HTML таблицы:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="0" cellpadding="17" width="450"> <tr height="100"> <td align="left">ячейка 1</td> <td align="right">ячейка 2</td> <td align="center">ячейка 3</td> </tr> </table> </body> </html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Вертикальное выравнивание внутри HTML таблицы

Текст вверху, внизу, по центру ячейки HTML таблицы:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="0" cellpadding="17" width="450"> <tr height="100"> <td valign="top">ячейка 1</td> <td valign="bottom">ячейка 2</td> <td valign="middle">ячейка 3</td> </tr> </table> </body> </html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Атрибут valign применяется только для ячеек таблицы.

Заголовок HTML таблицы

Пример:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="0" cellpadding="10"> <tr> <th>Заголовок</th> <th>Заголовок</th> <th>Заголовок</th> </tr> <tr> <td>Текст</td> <td>Текст</td> <td>Текст</td> </tr> <tr> <td>Текст</td> <td>Текст</td> <td>Текст</td> </tr> </table> </body> </html>

Результат:

Заголовок	Заголовок	Заголовок
Текст	Текст	Текст
Текст	Текст	Текст

Теги <th> </th> определяют заголовок HTML таблицы.

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table align="center" width="220" bgcolor="#006699"> <tr height="220"> <td> <p>align="center"</p> </td> </tr> </table> <table align="left" width="220" height="220" bgcolor="#cc0000"> <tr> <td> <p>align="left"</p> </td> </tr> </table> <table align="right" width="220" height="220" bgcolor="#66cc66"> <tr> <td> <p>align="right"</p> </td> </tr> </table> </body> </html>

Результат: HTML таблица слева, справа, по центру страницы

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSS аналог – background-color.

HTML таблица внутри ячейки другой таблицы

Пример:

<html> <head> <title>Пример HTML таблицы</title> </head> <body> <table border="1" cellspacing="0" bgcolor="#cccccc"> <tr> <td width="150" height="100">   </td> <td width="150" align="center"> <table border="1" cellspacing="5" style="background-color:#ffffff; width:80px; height:60px"> <tr> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> </tr> </table> </td> </tr> </table> </body> </html>

Результат: HTML таблица внутри ячейки другой таблицы

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.

⇐ Предыдущая 1 2 3 456 7 8 9 Следующая ⇒

Приготовление дезинфицирующих растворов различной концентрации

Занятость населения и рынок труда

Социальный статус семьи и её типология

Последнее изменение этой страницы: 2016-08-01; просмотров: 473; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.14.6.194 (0.007 с.)