Таблицы

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

<table> Тег для создания таблицы.
<tr> Тег для создания строки, ячеек таблицы.
<td> Тег для создания ячейки в текущей строке.

Полностью запись для создания простейшей таблицы с одной строкой и одной ячейкой будет выглядеть так:

  <table>
<tr>
<td>
Простейшая таблица 1х1 </td>
</tr>
</table>

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

Простейшая таблица 1х1

Согласитесь, что на таблицу как-то не очень похоже. Для того чтоб было видно рамку таблицы, необходимо ввести в тег <table> атрибут border.
Получаем следующую запись:

  <table border="3">
<tr>
<td> Простейшая таблица 1х1 </td>
</tr>
</table>

Атрибуту border я присвоил числовое значение три, то есть задал толщину рамки в пикселях. В итоге получится вот такая не хитрая таблица:


Простейшая таблица 1х1

И так раскладываем все по полочкам.
Тег <table> указывает браузеру, что нужно построить таблицу.
Тег-контейнер <TR>...</TR> отвечает за построение строк и употребляется исключительно внутри тега <table> </table>. В любом другом месте браузеры в лучшем случае будут игнорировать этот тег, в худшем случае, трудно сказать каким образом будут интерпретировать его браузеры. Внутри тега <table> может быть сколько угодно тегов <TR>...</TR>.
Внутри тега <TR>...</TR> обязательно должен быть хотя бы один тег <TD>...</TD>, который отвечает за построение столбцов. Тег <TD> также не будет распознаваться браузерами, в случае если он стоит вне тега <TR>.

Зная выше перечисленные правила, для построения таблиц, можно смело приступать к их строительству. Пишем код таблицы у которой будет четыре строки и три столбца:


  <table border="3">
<tr>
<td> 1х1 </td>
<td> 1х2 </td>
<td> 1х3 </td>
</tr>
<tr>
<td> 2х1 </td>
<td> 2х2 </td>
<td> 2х3 </td>
</tr>
<tr>
<td> 3х1 </td>
<td> 3х2 </td>
<td> 3х3 </td>
</tr>
<tr>
<td> 4х1 </td>
<td> 4х2 </td>
<td> 4х3 </td>
</tr>
</table>

В итоге получаем вот такую не очень симпатичную таблицу:

1х1 1х2 1х3
2х1 2х2 2х3
3х1 3х2 3х3
4х1 4х2 4х3

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


  <table border="3" width="400" height="200">
<tr>
<td> 1х1 </td>
<td> 1х2 </td>
<td> 1х3 </td>
</tr>
<tr>
<td> 2х1 </td>
<td> 2х2 </td>
<td> 2х3 </td>
</tr>
<tr>
<td> 3х1 </td>
<td> 3х2 </td>
<td> 3х3 </td>
</tr>
<tr>
<td> 4х1 </td>
<td> 4х2 </td>
<td> 4х3 </td>
</tr>
</table>

Получилась вот такая черно белая таблица, с шириной 400 пикселей и высотой 300пикселов:

1х1 1х2 1х3
2х1 2х2 2х3
3х1 3х2 3х3
4х1 4х2 4х3

Самое время подумать о том как можно раскрасить таблицу. Задать фон таблицы можно несколькими способами при помощи атрибута bgcolor.
Чтобы задать фон всей таблицы атрибут bgcolor прописывается для тега <table>.

<table bgcolor="цвет фона">

Для фона целого ряда (строки), атрибут bgcolor прописывается для тега <tr>

<tr bgcolor="цвет фона">

Фон каждой ячейки тоже задается атрибутом bgcolor для тега <td>

<td bgcolor="цвет фона">


  <table border="3" width="400" height="200">
<tr bgcolor="#CCCCFF">
<td> 1х1 </td>
<td> 1х2 </td>
<td> 1х3 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC"> 2х1 </td>
<td> 2х2 </td>
<td bgcolor="#FFCCFF"> 2х3 </td>
</tr>
<tr>
<td bgcolor="#FFCCFF"> 3х1 </td>
<td> 3х2 </td>
<td bgcolor="#CCFFCC"> 3х3 </td>
</tr>
<tr bgcolor="#00FFFF">
<td> 4х1 </td>
<td> 4х2 </td>
<td> 4х3 </td>
</tr>
</table>

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

1х1 1х2 1х3
2х1 2х2 2х3
3х1 3х2 3х3
4х1 4х2 4х3


Вернуться назад Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru