HTML ТАБЛИЦЫ

HTML имеет много элементов что делает возможным для построения различных конструкций в HTML. Эта статья посвящена основам построения таблиц и их свойства.
Есть три основных тегов для таблиц:

"<table>" - таблица;
"<tr>" - строка таблицы
"<td>" - данные таблицы.

Основной синтаксис выглядит так

"<table>"
"<tr>"
"<td>"
.... табличные данные ....."</ td>
"</ tr>"
" </ table>"

Как видим, таблица начинается с тега " <table>" и заканчивается тегом
"</ table>".
Например:

"<table>"
"<tr>"
"<td>
"ячейка 1 "</ td>"
"<td>"ячейка 2 "</ td>"
"</ tr>"
"<tr>"

"<td>" ячейка 3 "</ td>"
"<td>"
ячейка 4 "</ td>"
"</ tr>"
"</ table>"

Таблица в браузере имеет следующий вид

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Создавая таблицу, можно ее поместить в рамку с помощью атрибута border
Этот атрибут также устанавливает толщину самой рамки. Число определяет толщину границы рамки в пикселях.  Рассмотрим пример


<table border="1">
<tr>

<td>
ячейка 1</td>
<td>
ячейка 2</td>
</tr>
<tr>

<td>
ячейка 3</td>
<td>
ячейка 4</td>
</tr>
</table>

Этот пример определяет таблицу с толщиной границы в 1 пиксель. Вот как наша таблица с рамкой выглядит в браузере:

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

С помощью CELLSPACING и CELLPADDING
вы  можете установить, сколько места должно быть между отдельными клетками таблицы, а также между содержанием ячейки таблицы и границы ячейки.
CELLSPACING это атрибут устанавливает, сколько места в пикселях должно быть между клетками. Вот пример использования 10 пикселей:

<table cellspacing="10" border="1"> <tr> <td> ячейка 1</td> <td> ячейка 2</td> </tr> <tr> <td> ячейка 3</td> <td> ячейка 4</td> </tr> </table>

Вот как выглядит таблица в браузере:

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

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

<table cellpadding="10" border="1"> <td> ячейка 1</td> <td> ячейка 2</td> </tr> <tr> <td> ячейка 3</td> <td> ячейка 4</td> </tr> </table>

Вот как выглядит таблица в браузере:

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


Вы также можете установить интервалы и отступы  клеток с помощью CSS свойств border-spacing и padding
Thead, tfoot и tbody элементы.
HTML-таблица может определить шаблон таблицы "голову" <thead>  и ее составные <tfoot>.
Вот пример:

<table border="1"> <thead> <tr> <th> Домашняя страница 1</th> <th> Домашняя страница 2</th> <th> Домашняя страница 3</th> </tr> </thead> <tfoot> <tr> <td>1.2 миль.</td> <td>1.5 миль</td> <td>2.1 миль.</td> </tr> </tfoot> <tbody> <tr> <td> Европа </td> <td> Америка </td> <td> Азия </td> </tr> <tr> <td> Копенгаген </td> <td> Нью-Йорк </td> <td> Бангкок </td> </tr> </tbody>
Домашняя страница 1 Домашняя страница 2 Домашняя страница 3
1.2 миль. 1.5 миль 2.1 миль.
Европа Америка Азия
Копенгаген Нью-Йорк Бангкок

Обратите внимание, что TBODY в разделе определяется тоже.

<th> элемент
Элемент определяет заголовок ячейки таблицы и внутренность таблицы.
<th> элемент определяет себя таким же образом, как < td>. Этот тег определяет внутренность самой таблицы.
< td> - должен размещаться внутри  <tr>, который в свою очередь располагается внутри тега  <table>.

<rowspan> и <colspan> элементы
Используя  <rowspan> и <colspan>  эти атрибуты,  строки и столбцы таблицы могут объединяться.
Вот пример, где ячейка в первом ряду объединяет 3 колонки:

<table border="1"> <tr> <td colspan="3" > 1 </td> <td> 4 </td> <td> 5 </td> </tr> <tr> <td> a </td> <td> b </td> <td> c </td> <td> d </td> <td> e </td> </tr> </table>

Вот как выглядит таблица в браузере:

1 4 5
a b c d e

Для того, чтобы объединить  колонок несколько строк можно использовать RowSpan атрибут. Вот пример:

<table border="1"> <tr> <td></td> <td rowspan="2" > </td> <td></td> </tr> <tr> <td> </td> <td></td> </tr> </table>

Вот как выглядит таблица в браузере:

1 2 3
a c

align и valign элементы
Эти элементы предназначены для выравнивания текста в ячейке таблицы.
Align  элемент выравнивает содержимое ячейки таблицы по горизонтали. Также вы можете использовать эти значения для выравнивая:

Left  - Выравнивает содержимое ячейки по отношению к левому краю ячейки.
Right - Выравнивает содержимое ячейки по отношению к правому краю ячейки.
Center - Выравнивание содержимого ячейки по направлению к центру ячейки.
Justify - Растягивается содержание клеток так, чтобы каждая линия имела одинаковую ширину.

Для выравнивание текста вправо,все, что вам нужно сделать, это align="right" после атрибута <td>, который вы хотите применить к выравнивание.
Вот простой пример:

<td align="right"></td>

Вы также можете сделать вертикальное выравнивание с помощью VALIGN.
Например

Это очень длиный, длиный, длиный, предлинный текст Короткий текст

А так прописывается тест снизу таблицы в второй ячейке с помощью <valign>

<td valign="bottom"></td>

Вот список из атрибутов для VALIGN:

Top - Выравнивает содержимое ячейки по отношению к верхней части ячейки
Middle - Выравнивает содержимое ячейки по отношению к середине ячейки.
Bottom - Выравнивание содержимого ячейки по отношению к нижней части ячейки.

width и height элементы
Используются для определения широты и высоты таблицы.
Этот пример определяет ширину таблицы до 300 пикселей:

<table width="300" border="1"> <tr><td> Ячейка 1</td></tr> <tr><td> Ячейка 2</td></tr> </table>

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

Ячейка 1
Ячейка 2

Высота прописывается так же как и ширина, аналогично все.
Конечно, не каждая ячейка может иметь свою ??собственную  ширину и высоту, так как ячейки таблицы отображаются в виде строк и столбцов.
Рассмотрим пример

<table border="1"> <tr> <td width="50" > Ячейка 1</td> <td width="100"> Ячейка 2</td> </tr> <tr> <td> Ячейка 3</td> <td> Ячейка 4</td> </tr> </table>

А вот как выглядит таблица в браузере.

Ячейка1 Ячейка 2
Ячейка 3 Ячейка 4

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

<table border="1"> <tr> <td height="50"> Ячейка 1</td> <td> Ячейка 2</td> </tr> <tr> <td> Ячейка 3</td> <td> Ячейка 4</td> </tr> </table>

Вот как выглядит таблица в браузере:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Обратите внимание, как высота первой ячейки в первой строке задает высоту для всех ячеек в том же ряду.
Вы также можете установить ширину и высоту ячеек таблицы через width и height  свойства CSS.

Чтобы оставить комментарий, необходимо зарегистрироваться

Комментарии

  • Комментарии не найдены

Последние новости

Как начать работать в ...

  Работайте и зарабатывайте неплохие деньги в ...

коммерческий хостинг - ...

Выбор коммерческого веб-хостинга Надежность и ...

Выбор бесплатного ...

Выбор веб-хостинга бесплатно Выбор лучшего ...

youtube html- видео в ...

 YouTube Видео в HTML странице  Самый простой ...

Поля формы html - виды ...

HTML ФОРМЫ HTML формы используются для сбора и ...

Scroll to top