Как делать таблицы html
- Создание таблиц в HTML
- Инструкция по созданию таблиц
- Настройка внешнего вида таблицы
- Настройка отступов и выравнивания
- Использование CSS для таблиц
Создание таблиц в HTML
Создание интернет-сайтов сложно представить без таблиц. Ведь они – самый простой способ аккуратно и точно расположить информацию на странице. Нужно ли вам точно оформить данные или даже сверстать целый шаблон – таблицы выручат в любом случае.
Инструкция по созданию таблиц
1. Добавьте таблицу на страницу. Сделать это можно с помощью парного тэга <table> (закрывающий, соответственно, </table>). Все данные и разметка таблицы расположены между этими тэгами.
2. Создайте разметку таблицы. В таблице присутствуют столбцы и ячейки. Сначала добавляются столбцы. Они создаются тэгами <tr></tr>. Ячейки добавляются внутрь столбцов. Тэг для их создания - <td> и </td>. Обратите внимание, что тэг столбца вкладывается в тэг таблицы, а тэг ячейки – в тэг столбца.
Настройка внешнего вида таблицы
3. Если ваша таблица содержит названия столбцов, они добавляются в тэгах <th></th> (вставляются так же, как <td> и </td>). Чтобы настроить внешний вид таблицы, используйте следующие атрибуты: width (устанавливает ширину таблицы – можно указать в пикселях или в процентах от ширины экрана), bgcolor (цвет фона ячеек), для заливки фоном-картиной: background, border – создает рамку вокруг всей таблицы, при указании к тэгу td – для ячеек. Если вы не хотите видеть рамку вокруг таблицы, поставьте border=«0».
Настройка отступов и выравнивания
4. Если вас не устраивает расстояние между ячейками, измените данные атрибута cellspacing. Чтобы изменить размещение таблицы на странице, укажите нужное значение атрибута align: right (справа), left (слева), center (по центру). Также вы можете отрегулировать расстояние между содержимым ячейки и ее границей. Для этого в пикселях укажите нужное значение для атрибута cellpadding.
5. Содержимое ячейки вы также можете выровнять по своему усмотрению. Для тэга <td> в таком случае следует прописать такие атрибуты: align (горизонтальное размещение текста в ячейке - справа (right), слева (left), по центру (center); valign (выравнивает содержимое ячейки по вертикали - вверх (top), вниз (bottom), по центру (middle).
Использование CSS для таблиц
Чтобы сверстать шаблон сайта с помощью таблиц или просто расширить возможности настройки дизайна таблиц, используйте CSS. Вы можете прописать стили для всех страниц вашего сайта, а можете каждой таблице дать собственное имя (к тэгу table добавьте атрибут id=”имя таблицы”).
