Главная | Мой профиль | Регистрация | Выход | Вход Вы вошли как Гость | Группа "Гости" | Приветствую Вас Гость | RSS
Меню сайта
Катигории
Скрипты [2]
Таблицы [1]
jQuery [1]
Шаблоны сайтов [2]
Меню для сайтов [2]
Текст [1]
Linkslot
Купить ссылку здесь за руб.
Поставить к себе на сайт
Linkslot
Оплаченная реклама
Форма входа
Socialchance
Linkslot
Видео
Главная » 2015 » Январь » 29 » Таблицы html
14:12
Таблицы html

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

 

Код простой таблицы html:

 

<table border="1">

 <tr>
 
 <td>Ячейка 1</td>

 </tr>

</table>


 

 

Результат:

     
Ячейка 1

 

 

Значения:

 
*Теги <table></table> – объявляют о создании HTML таблицы.
*border="1" – устанавливает границу HTML таблицы и ее ячеек в 1 пиксел. Если атрибут border отсутствует или его значение равно 0 – границ не будет.
*Теги <tr> </tr> – определяют табличный ряд.
*Теги <td> </td> – определяют ячейку HTML таблицы.




Пример таблицы с четырьмя ячейками:

 

<table border="1">
 
<tr>

 <td>ячейка 1, первый ряд</td>

 <td>ячейка 2, первый ряд</td>
 
</tr>

<tr>

 <td>ячейка 1, второй ряд</td>

 <td>ячейка 2, второй ряд</td>

<tr>

</table>

 

 


Результат:

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

 

HTML таблица может иметь множество рядов и ячеек, а ячейка, в свою очередь, может содержать внутри себя другую таблицу.

 


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

<table border="1" cellspacing="0"

cellpadding="8" style="background-color:#cc0000; color:#ffffff">

<tr>
 
 <td>ячейка 1, первый ряд</td>


 <td> &nbsp; </td>

</tr>

<tr>

 <td>ячейка 1, второй ряд</td>

 <td>ячейка 2, второй ряд</td>

</tr>

</table>

 


Результат:

 

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

 

 


Значения:

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

 

Размер таблицы.

 

Высота и ширина таблицы:

 

<table border="1" cellspacing="0" cellpadding="15" width="95%" height="90">

<tr>
 
<td>ячейка 1, первый ряд</td>
 
<td style="background-color:#ffccbb">ячейка 2, первый ряд</td>

</tr>

<tr>

 <td>ячейка 1, второй ряд</td>
 
 <td>ячейка 2, второй ряд</td>

</tr>

</table>

 


Результат:

 

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

 


Значения:

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

 

Выравнивание внутри таблицы.

 

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

<table border="1" cellspacing="0" cellpadding="17" width="500">

<tr height="60">

 <td align="left">ячейка 1</td>

 <td align="
center">ячейка 2</td>
 
 <td align="
right">ячейка 3</td>
 
</tr>

</table>

 


Результат:

 

ячейка 1 ячейка 2 ячейка 3

 


Выравнивание в таблице.

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

<table border="1" cellspacing="0" cellpadding="17" width="500">

<tr height="80">

 <td valign="top">ячейка 1</td>

 <td valign="middle">ячейка 2</td>

 <td valign="bottom">ячейка 3</td>

</tr>

</table>

 


Результат:

 

ячейка 1 ячейка 2 ячейка 3

 


Категория: Таблицы | Просмотров: 252 | Добавил: ret123r | Теги: таблицы html, cellpadding или пространство внутри, размер таблицы, значения | Рейтинг: 4.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Статистика
Linkslot
Бесплатные СМС
Мини-чат
Link Wall
Бесплатное
WMlink
© 2012-2017 - ret123r123r.narod.ru


 Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика Проверка тИЦ и PR     
 
 
 %