Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу
caption
- необязательный тег, обозначающий заголовок таблицы
th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr
- обязательный тег, с которого открывается и закрывается строка
td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Стобец 1 | Стобец 2 |
---|---|
Текст в первой ячейке | Текст во второй ячейке |
В браузере отобразится
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...
Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table есть следующие атрибуты:width
- ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor
- цвет фона ячеек таблицы
background
- заливает фон таблицы рисунком
border
- рамка и границы в таблице. Толщина указывается в пикселях
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
Стобец 1 | Стобец 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Стобец 1 | Стобец 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
Стобец 1 | Стобец 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Стобец 1 | Стобец 2 |
Стобец 1 | Стобец 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
или | . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицыПо умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон. Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково. Напоследок, приведу весь код, который мы создали.
Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц. Для создания рамки применяется стилевое свойство border , которое добавляется к селектору TABLE . Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег
),
как показано на рис. 1.
| В примере 1 показано, как создать такую простую таблицу. Пример 1. Создание рамки вокруг таблицы
В данном примере выравнивание текста во всех ячейках происходит по левому краю, что не всегда удобно. На рис. 2 показана таблица, у которой содержимое ячеек выравнивается по центру за исключением левой колонки, где текст выравнивается по левому краю. Изменение выравнивания происходит с помощью стилевого свойства text-align , при этом для отдельных ячеек требуется вводить новый класс, чтобы гибко управлять некоторыми характеристиками (пример 2). Пример 2. Таблица с выравниванием содержимого ячеек
В данном примере добавляется стилевой класс с именем lc , он добавляется к ячейкам левой колонки для изменения выравнивания содержимого и создания жирного начертания текста. Эффектно смотрится таблица, у которой фон заголовка выполнен в виде градиента (рис. 3). При этом создание подобной таблицы не представляет особой сложности. При этом в качестве фона применяется заранее заготовленный рисунок, например, как показано на рис. 4. Для добавления фона только к одной строке таблицы имеется несколько способов.
Можно воспользоваться тегом
, который
предназначен для хранения одной или нескольких строк, которые представлены вверху
таблицы. Для этого тега добавляем стилевое свойство background
,
оно одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость
(пример 3).
Пример 3. Использование фонового рисунка
В данном примере тег
охватывает только
верхнюю строку таблицы с ее заголовком. Для этого тега в стилях одновременно
устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя
цвет под рисунком не виден, лучше его всегда добавлять, например, для случая
отключения пользователем отображения изображений в браузере.
|
---|