Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Как построить таблицу
|
|
Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. Теги < table> и < /table> обрамляют таблицу целиком, а ряд других тегов определяет, каким образом будет выводиться информация. В следующей таблице я приведу полное описание всех тегов таблиц.
| Теги | Описание |
| < table> и < /table> | Эти теги охватывают таблицу. Тег < table> сообщает браузеру, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER (получится < table border>), но подробней об этом позже. |
| < caption> и < /caption> | Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги < tc> и < /tc>. |
| < th> и < /th> | Теги отображают текст заголовка или строки столбца немного более крупным полужирным шрифтом. |
| < tr> и < /tr> | Теги, определяющие каждую строку таблицы. Тег < /tr> необязателен, но делает html-код более красивым и понятным. |
| < td> и < /td> | Эта пара тегов определяет текст каждой ячейки таблицы. |
При использовании этих тегов следует быть очень аккуратным, иначе создание таблицы, состоящей из нескольких строк, может оказаться сложным делом. Чтобы создать даже такую простую таблицу, как была приведена в качестве примера чуть выше (по бейсбол), понадобится довольно много строк html-кода. Теперь я покажу, в качестве примера правильной таблицы, код той самой таблицы:
| < table border=" 1" > < tr> < td align=" center" > < b> Имя< /b> < /td> < td align=" center" > < b> Команда< /b> < /td> < td align=" center" > < b> Победы/поражения< /b> < /td> < td align=" center" > < b> Очки< /b> < /td> < td align=" center" > < b> Ауты< /b> < /td> < /tr> < tr> < td> Пит Шурек< /td> < td> Цинциннати< /td> < td> 16-2< /td> < td> 2, 73< /td> < td> 194< /td> < /tr> < tr> < td> Гидео Немо< /td> < td> Лос-Анджелес< /td> < td> 19-8< /td> < td> 2, 94< /td> < td> 399< /td> < /tr> < tr> < td> Грег Энгриус< /td> < td> Атланта< /td> < td> 24-6< /td> < td> 2, 21< /td> < td> 275< /td> < /tr> < /table> |
Уф! И это все для маленькой таблички! На самом деле, елси вы терпеливо и аккуратно вводите теги, создаете таблицу, оказывается, весь процесс не так уж и сложен. Теперь давайте все по порядку.
Первый шаг - ввод инициализационного тега таблицы:
| < table> < /table> |
Чтобы ячейки таблицы были разделены тонкими линиями, добавим тег border. Без этого слова ячейки будут автоматически выровнены, но сетки в таблице не будет. Теперь начнем создавать ячейки, одну за другой. Сначала зададим строку:
| < table border=" 1" > < tr> < /tr> < /table> |
После этого зададим ячейки. Их у нас 5, соответственно 5 открытий и закрытий тегов < td> и < /td>
| < table border=" 1" > < tr> < td> Имя < /td> < td> Команда < /td> < td> Победы/поражения < /td> < td> Очки < /td> < td> Ауты < /td> < /tr> < /table> |
В итоге мы получим это:
|
Не очень-то и смотрится без центрирования таблицы. Давайте исправимся?
| < table align=" center" border=" 1" > < tr> < td> Имя< /td> < td> Команда< /td> < td> Победы/поражения< /td> < td> Очки< /td> < td> Ауты< /td> < /tr> < /table> |
В итоге мы получим это:
|
Теперь таблица по-середине, но было-бы лучше если-бы были и другие строки, а верхняя, в качестве озаглавляющей, была выделена тегами < th> и < /th> (чуть более жирнее):
| < table align=" center" border=" 1" > < tr> < th> Имя< /th> < th> Команда< /th> < th> Победы/поражения< /th> < th> Очки< /th> < th> Ауты< /th> < /tr> < tr> < td> Пит Шурек< /td> < td> Цинциннати< /td> < td> 16-2< /td> < td> 2, 73< /td> < td> 194< /td> < /tr> < /table> |
В итоге мы получим это:
|
В принципе все, основные команды управления таблицами вы уже знаете.
|
|