Главная страница
Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
Как построить таблицу
Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. Теги < 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>
|
Уф! И это все для маленькой таблички! На самом деле, елси вы терпеливо и аккуратно вводите теги, создаете таблицу, оказывается, весь процесс не так уж и сложен. Теперь давайте все по порядку.
Первый шаг - ввод инициализационного тега таблицы:
Чтобы ячейки таблицы были разделены тонкими линиями, добавим тег 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>
|
В итоге мы получим это:
Имя
| Команда
| Победы/поражения
| Очки
| Ауты
| Пит Шурек
| Цинциннати
| 16-2
| 2, 73
|
| |
В принципе все, основные команды управления таблицами вы уже знаете.
|