- Заработок без сайта
- Заработок на сайте
- Раскрутка сайта
- Темная раскрутка
- Рефералы
- Лохотроны
- Черный список
- Архив
- Домены
- Таблицы стилей CSS
- Контакты
- Ссылки
- Статьи
- Вводная
- Учимся раскрашивать
- Выравнивание текста
- Заголовки и выделение текста
- Шрифты в Html
- Вставляем картинки
- Картинки и текст в Html
- Текстовые ссылки
- Картинка как ссылка
- Навигационные карты
- Якоря
- Таблицы
- Выравнивание текста в таблицах
- Объединяем ячейки
- Расстояние между ячейками таблицы
- Вложенные таблицы
- Примеры с использованием таблиц
- Фреймы
- Полоса прокрутки во фреймах
- Плавающий фрейм
- Списки в документах Html
- Спецсимволы в документах html
- Линии в документах Html
- МЕТА теги
- Список основных тегов
- Таблица цветов
HTML
Начинающим
Таблицы
Модель таблиц HTML используются, в основном, для форматирования и оформления
страниц, хотя первоначальное их назначение как метода представления информации
не утратило своего значения. Таблицы дают широчайшие возможности для оформления
интернет-страниц. Например с помощью таблиц можно создать "каркас" страницы,
помогающий расположить текст и изображения так, как вам нравится.
Посмотреть пример
Для построения простейшей Таблицы HTML необходимы всего три тега.
<table> Тег для создания таблицы.
<tr> Тег для создания строки, ячеек таблицы.
<td> Тег для создания ячейки в текущей строке.
Полностью запись для создания простейшей таблицы с одной строкой и одной ячейкой будет выглядеть так:
|
<table>
<tr> <td> Простейшая таблица 1х1 </td> </tr> </table> |
Обратите внимание, что теги должны быть вложены друг в друга именно в таком порядке как приведено в вышеизложенном примере. В браузере такая запись будет выглядеть так:
Согласитесь, что на таблицу как-то не очень похоже. Для того чтоб было видно
рамку таблицы, необходимо ввести в тег <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>.
Для фона целого ряда (строки), атрибут bgcolor прописывается для тега <tr>
Фон каждой ячейки тоже задается атрибутом bgcolor для тега <td>
|
<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 |
| Вернуться назад | Перейти к следующей странице |
|---|