В этой последней части учебника про HTML, вы узнаете как сделать таблицу через HTML, и вообще как работать с таблицей.
Как делать таблицы в HTML:
Для того, что бы сделать таблицу, вам нужен тег <table>, как раз в нём вы и создаёте всё таблицу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <table border="1"> <caption>Билеты на самолёт</caption> <tr> <th>От куда</th> <th>Куда</th> <th>Время рейса</th> <th>Стоимость</th> </tr> <tr> <td>Москва</td> <td>Санкт-Петербург</td> <td>1 час</td> <td>3000 рублей</td> </tr> <tr> <td>Москва</td> <td>Екатеринбург</td> <td>2 часа</td> <td>5000 рублей</td> </tr> <tr> <td>Москва</td> <td>Владивосток</td> <td>8 часа</td> <td>12000 рублей</td> </tr> <tr> <td>Прага</td> <td>Москва</td> <td>2 часа 35 минут</td> <td>8000 рублей</td> </tr> </table> |
Давайте теперь разберём этот код, сначала вы видите атрибут в border внутри тега <table>, который задаёт размер рамок для таблице, по умолчанию ноль.
Внутри же этого же тега, вы видите тег <caption>, это просто заголовок таблице, потом тег <tr>, это же уже строчка таблице, в первом таком теги, внутри хранит <th>, это заголовки для столбцов.
Во следующих тегах <tr>, уже хранятся <td>, это уже обычная ячейка, вот результат.
Как видите вот такая таблица у нас получилась.
Как объединять ячейки:
Одна из проблем с которой может столкнутся начинающий верстальщик, так это объединение нескольких ячеек, что бы одна, занимала несколько.
Это делается через два атрибута, первый, colspan, он объединяет столбцы внутри одной строки и rowspan, он уже объединяет строки внутри одного столбца, вот не большой пример кода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <table border="1"> <tr> <td rowspan="2">Браузер</td> <th colspan="2">Internet Explorer</th> <th colspan="3">Opera</th> <th colspan="2">Firefox</th> </tr> <tr> <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th> </tr> <tr> <td>Поддерживается</td> <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td> </tr> </table> |
Вот результат программы.
Как видите многие ячейки действительно объединились.
Атрибуты таблицы HTML:
Последние что нам тут стоит рассмотреть, так это какие атрибуты имеет таблица для её настройки.
- align — Выравнивание текста внутри ячеек;
- background — Задаёт фоновый рисунок;
- bgcolor — Задаёт фоновый цвет;
- bordercolor — Цвет для рамки;
- cellpadding — Отступ от рамки до содержимого ячейки;
- cellspacing — Расстояние между ячейками;
- cols — Число колонок;
- summary -Краткое описание таблицы;
Как видите их не очень много, но это только уникальные, также таблицы поддерживают атрибуты для высоты и ширины к примеру.
Вывод:
В этой части учебника про то как сделать таблицу через HTML, и как с ней работать получилась не очень большая, но это только потому что вся настройка таблицы в основном происходит через CSS.
Подписываетесь на соц-сети:
Оценка:
Загрузка...