В этой главе мы поговорим об атрибутах тега table
.
summary
- этот атрибут определяет общую информацию о назначении и структуре таблицы для не визуальных(речевых) браузеров, т.е. предостовляет краткую информацию о содержимом таблицы. На первый взгляд кажется что для новичков этот атрибут не обязателен, но это не так, валидатор выдает предупреждение об его отсутствии, так что ставте его хотя бы пустым summary="".
summary="Краткая
информация
о таблице."
>
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
Я информацию разбросал на три строки, вам этого делать не обязательно, можно в одну строку, просто показал, что такой синтаксис допустим.
border
- этот атрибут задает толщину бордюра вокруг таблицы как и в картинках в пикселях.
border="5"
>
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
| первый ряд, первая ячейка
|
первый ряд, вторая ячейка
|
если значение этого атрибута больше ноля то можно(но не желательно) вставить еще один атрибут
bordercolor="#FFAA00"
с цветом бордюра.
align
- это атрибут служит для выравнивания таблицы и может принимать одно из этих значений:left
или center
или right
.
height
задает высоту таблицы в пикселях. Этот атрибут задается только в тех случаях если нам необходимы установить конкретную высоту.
width
- задает ширину таблицы в пикселях или в процентах относительно ширины окна браузера.
cellspacing
- задает расстояние между ячейками в пикселях
cellspacing="10"
>
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
| первый ряд, первая ячейка
|
первый ряд, вторая ячейка
|
cellpadding
задает расстояние между ячейкой и ее содержимым:
cellpadding="10"
>
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
bgcolor
как и в теге body задает цвет для таблицы.
background
делает картинку фоном таблицы как и теге body.
Создадим страницу table.html
:
таблицы в хтмл
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
| второй ряд, первая ячейка |
второй ряд, вторая ячейка |
А теперь просмотрим (откроется в новой вкладке) что у нас получилось.
Этим примером хотел обратить ваше внимание на то что если мы задаем размер таблице то ячейки делят этот размер поровну. А так-же обратите внимание что текст у нас застрял по центру... Не порядок!!!
valign
- этот атрибут служит для вертикального выравнивания содержимого ячейки и может принимать следующие занчения:
valign="middle"
текст расположен по центру, можно не задавать т.к. это значение по умолчанию.
valign="top"
текст расположен вверху ячейки.
valign="bottom"
текст расположен внизу ячейки.
Домашнее задание:
самостоятельно подставить атрибуты valign, cellpadding и cellspacing с разными значениями в файле table.html
.
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и |
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега |
использовать тег |
. Текст в ячейке, оформленной с помощью тега |
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги |
и |
нет.
Пример 12.1. Создание таблицы
Тег TABLE
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Порядок расположения ячеек и их вид показан на рис. 12.1.
Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу
caption
- необязательный тег, обозначающий заголовок таблицы
th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr
- обязательный тег, с которого открывается и закрывается строка
td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Таблица html
Название таблицы
Стобец 1
|
Стобец 2
|
Текст в первой ячейке
|
Текст во второй ячейке
|
В браузере отобразится
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон
(или его цвет), отступ
, ширину
, границу
и другие параметры
, что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна
! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table
есть следующие атрибуты:width
- ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor
- цвет фона ячеек таблицы
background
- заливает фон таблицы рисунком
border
- рамка и границы в таблице. Толщина указывается в пикселях
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th
) и зададим параметр атрибуту border (граница)
, width (ширина таблицы, строки или ячейки)
и bgcolor (цвет ячейки)
Таблица html
Стобец 1
|
Стобец 2
|
|
|
В результате в браузере будет выведена таблица следующего вида
frame
- атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения: Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки. rules
- атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения: None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.
Рассмотрим пример кода
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат 
Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице
. Для этого есть следующие уже знакомые параметры: align
- выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing
- расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
В браузере отобразится выравненная по центру таблица следующего вида 
Строки tr и ячейки td в таблицах HTML
Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек
(td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.
Стобец 1
|
Стобец 2
|
Для тегов tr и td есть следующие align
- выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign
- выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor
- задает цвет строки
width
- ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height
- высота ячейки (все ячейки в строке примут данный параметр)
Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат
 С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!) Спасибо за внимание! Надеюсь материал был полезен!
Описание
Таблицы в HTML могут содержать множество различных тегов, включая HTML тег , т.е. имеется возможность создания вложенных таблиц.
Основным тегом-контейнером для HTML-таблицы является тег , который требует обязательного присутствия закрывающего тега. Любая таблица состоит из строк (определяются тегом ), содержащих любое количество как заголовочных ячеек (определяются тегом th), так и ячеек с любыми данными (определяются тегом | ). Тег | , отличается от | визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге | , отображается жирным начертанием с выравниванием текста по центру, а текст тега | - обычным начертанием с выравниванием по левому краю.
Более сложные таблицы могут содержать такие элементы как, , , , , | и .
Примечание:
по стандарту HTML5 все ранее используемые атрибуты таблицы, такие как align, bgcolor, border и т.д. больше не поддерживаются и их использование валидатор будет считать за ошибки в коде. Поэтому для стилизации таблиц нужно использовать CSS, с помощью которого можно заменить все атрибуты. Например, чтобы добавить рамку для таблицы используется свойство border , для изменения заднего фона - свойство background , а для выравнивания строчного содержимого в ячейках таблицы - свойства text-align и vertical-aling .
Атрибуты
Стиль по умолчанию
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Пример
| Месяц |
Денег на счету |
| Декабрь |
100р |
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- контейнер, внутри которого располагается таблица (такой же, как для маркированных или
для нумерованных списков).
- border
- атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
-
задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
|
- тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри |
обозреватель выделяет жирным и размещает по центру.
- контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег
, столько ячеек в ней и будет: один тег - одна ячейка.
-
позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега
, если его нет, то после
.
-
используется для той же цели, что и
.
может содержать
, но не наоборот.
- span
- атрибут, задающий число столбцов, к которым применяются свойства контейнера
.
-
,
и
- контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров
,
и в HTML-документе.
- colspan
нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan
объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы
Инструменты создания сайтов
| Назначение | Инструмент |
| Разметка | HTML | XHTML |
| Оформление | CSS |
| Разработка | PHP | Python |
В браузере документ будет выглядеть так: Разберём, какие строчки кода за что отвечают.
- открыли таблицу, задав ей толщину рамок.
-
Инструменты создания сайтов
- озаглавили её.
- открыли строку.
|
Назначение |
- создали ячейку с оформлением заголовка.|
Инструмент |
- создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- закрыли строку. Аналогично создали остальные строки. |
Разметка |
HTML |
XHTML |
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
- закрыли таблицу.
Оценка статьи:
 Загрузка...
Закрыть
Найти на сайте
Например: виды гипсокартона
| |
|
