Размещение таблицы в html. Пример: Применение атрибута colspan
Стал популярен, 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 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
Name | Mass (10 24 kg) | Diameter (km) | Density (kg/m 3) | Gravity (m/s 2) | Length of day (hours) | Distance from Sun (10 6 km) | Mean temperature (°C) | Number of moons | Notes | ||
---|---|---|---|---|---|---|---|---|---|---|---|
Terrestial planets | Mercury | 0.330 | 4,879 | 5427 | 3.7 | 4222.6 | 57.9 | 167 | 0 | Closest to the Sun | |
Venus | 4.87 | 12,104 | 5243 | 8.9 | 2802.0 | 108.2 | 464 | 0 | |||
Earth | 5.97 | 12,756 | 5514 | 9.8 | 24.0 | 149.6 | 15 | 1 | Our world | ||
Mars | 0.642 | 6,792 | 3933 | 3.7 | 24.7 | 227.9 | -65 | 2 | The red planet | ||
Jovian planets | Gas giants | Jupiter | 1898 | 142,984 | 1326 | 23.1 | 9.9 | 778.6 | -110 | 67 | The largest planet |
Saturn | 568 | 120,536 | 687 | 9.0 | 10.7 | 1433.5 | -140 | 62 | |||
Ice giants | Uranus | 86.8 | 51,118 | 1271 | 8.7 | 17.2 | 2872.5 | -195 | 27 | ||
Neptune | 102 | 49,528 | 1638 | 11.0 | 16.1 | 4495.1 | -200 | 14 | |||
Dwarf planets | Pluto | 0.0146 | 2,370 | 2095 | 0.7 | 153.3 | 5906.4 | -225 | 5 | Declassified as a planet in 2006, but this remains controversial . |
When done correctly, even blind people can interpret tabular data in an HTML table - a successful HTML table should enhance the experience of sighted and visually impaired users alike.
Table styling
Take the following simple example:
Data 1 | Data 2 |
---|---|
Calcutta | Orange |
Robots | Jazz |
Which gives us the following result:
Data 1 | Data 2 |
---|---|
Calcutta | Orange |
Robots | Jazz |
This isn"t ideal, as we have to repeat the styling information across all three cells in the column (we"d probably have a class set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a
Data 1 | Data 2 |
---|---|
Calcutta | Orange |
Robots | Jazz |
Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank
If we wanted to apply the styling information to both columns, we could just include one
Just like colspan and rowspan , span takes a unitless number value that specifies the number of columns you want the styling to apply to.
Active learning: colgroup and col
Now it"s time to have a go yourself.
Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.
Recreate the table by following the steps below.
- First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
- Add a
element at the top of the table, just underneath the tag, in which you can add your
elements (see the remaining steps below). - The first two columns need to be left unstyled.
- Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
- Set a separate width on the fourth column. The value for your style attribute is width: 42px;
- Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
- Add a different background color plus a border to the sixth column, to signify that this is a special day and she"s teaching a new class. The values for your style attribute are background-color:#DCC48E; border:4px solid #C1437A;
- The last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px;
See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also).
Summary
That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Элемент
служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента
парный блочный тег
(сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы .(сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом Элемент
(сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами. Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
- Попробуй сам »
Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3 Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:
Пример: Применение свойства border
- Попробуй сам »
Рамка вокруг таблицы
Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3
Одинарная рамка для таблицы
По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:
Пример: Применение свойства border-collapse
- Попробуй сам »
Рамка вокруг таблицы
Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3
Поля и интервалы таблицы
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding ) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу
или . Интервал ячеек (border-spacing ) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing . Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента
, но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding и border-spacing :
Пример: Применение свойств padding и border-spacing
- Попробуй сам »
padding и border-spacing
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет "растягиваться" или "сжиматься" в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width :Table {width: 100%;}
Пример: Применение свойства width
- Попробуй сам »
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 width: 100%
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки
или ячейки объединяются посредством добавления атрибутов colspan или rowspan . Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали. Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan в элементах
или — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца. Пример: Применение атрибута colspan
- Попробуй сам »
Атрибут colspan
colspan ="2">Ячейка на два столбца Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Объединение строк
Строки, объединенные при помощи атрибута rowspan , ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:Пример: Применение атрибута rowspan
- Попробуй сам »
Ячейка на две строки Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Атрибут rowspan
rowspan ="2">Ячейка на две строки Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег
, но вне описания строки или ячейки.
Пример: Применение тега
- Попробуй сам »
Элемент caption
Ячейка на две строки Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги , и . Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег . Заголовки таблицы должны быть помещены в элемент , например:
Заголовок 1 Заголовок 2< /th> Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги , и
- Попробуй сам »
Теги thead, tbody и tfoot
Это шапка таблицы Это подвал таблицы Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Несмотря на то, что мы перед добавили , он, тем не менее, появляется в конце таблицы. Это исходит из того, что может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему в коде прописывается перед элементом .
Задачи
Убрать двойную рамку таблицы
По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.
В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>ТD>. Число тегов <ТD>ТD> в строке определяет число ячеек
Таблица
Если в таблице два тега TR, то в ней две строки. Если в строке три тега TD, то в ней три столбца. Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН>ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD>ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Заголовок центрирован по умолчанию Заголовок может объединять столбцы Заголовок может быть расположен перед столбцами Текст или данные Текст или данные Заголовок может объединять строки Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Использование заголовков таблицы - тег <САРТIОN>
Тег
позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ. Заголовок над таблицей Текст или данные Текст или данные Текст или данные Текст или данные Заголовок под таблицей Текст или данные Текст или данные Текст или данные Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN=2, чтобы растянуть ее над любым количеством обычных ячеек. Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
Текст или данные - ширина 100%
Текст или данные - ширина 50%
Текст или данные - ширина 200 пикселов
Текст или данные - ширина 100 пикселов Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные
Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle центрирует содержимое ячейки по вертикали.
VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. верх, середина, низ. VALIGN=top Выравнивает содержимое ячейки по ее верхней границе. верх, верх, верх. VALIGN=middle Центрирует содержимое ячейки по вертикали. середина, середина, середина. VALIGN=bottom Выравнивает содержимое ячейки по ее нижней границе. низ, низ, низ. Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Текст или данные Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью
Уральский государственный педагогический университет
Добро пожаловать!
Учебный курс "Основы WEB-мастеринга" Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
.Каждая строка таблицы помещается в элемент
... .Ячейка заголовка таблицы помещается в элемент
... (при этом содержимое отображается жирным начертанием и выравнивается по центру).Каждая ячейка данных таблицы помещается в элемент
... .Наименование таблицы, если оно требуется размещается внутри элемента
... (необязательный элемент таблицы). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом..
.Давайте перейдем к практической части составления таблицы:
Пример использования элемента border = "1" >
Элементарная таблица Ячейка заголовка 1 Ячейка заголовка 2 Ячейка заголовка 3 Ячейка данных 1 Строка 2 Ячейка данных 2 Строка 2 Ячейка данных 3 Строка 2 Ячейка данных 1 Строка 3 Ячейка данных 2 Строка 3 Ячейка данных 3 Строка 3 К данной таблице для наглядности мы добавили атрибут border (граница) со значением "1" , которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности. В рамках изучения HTML мы научимся граммотно формировать таблицы, а при изучении CSS 3 в статье " " научимся их профессионально стилизовать.
Результат нашего примера:
Объединение столбцов
Объединение столбцов в элементах
(ячейка данных) или (заголовочная ячейка) допускается производить с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек). Пример объединения столбцов в таблицах border = "1" >
Элементарная таблица Ячейка заголовка 1 Ячейка заголовка 2 Ячейка данных 1 Строка 2 Ячейка данных 2 Строка 2 Ячейка данных 3 Строка 2 Ячейка данных 1 Строка 3 Ячейка данных 2 Строка 3 Ячейка данных 3 Строка 3 Результат нашего примера:
Объединение строк
Объединение строк в элементах
или допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз). Пример объединения строк в таблицах border = "1" >
Элементарная таблица Ячейка заголовка 1 Ячейка заголовка 2 rowspan = "2" > Ячейка данных 1 Строка 2 Ячейка данных 2 Строка 2 Ячейка данных 2 Строка 3 Ячейка данных 2 Строка 3 Ячейка данных 3 Строка 3 Результат нашего примера:
Свойства столбцов
Пример использования атрибута span к отдельным столбцам таблицы:
span = "2" style = "background-color:khaki" > № заявки Услуга Цена, руб. Итого 31337 Чтение в слух 1 000 1 000 Результат нашего примера:
Если Вам необходимо стилизовать только один столбец, то достаточно указать атрибут span внутри элемента
, а не внутри элемента : Пример использования атрибута span HTML тега № заявки Услуга Цена, руб. Комиссия, руб. 31337 Чтение в слух 1 000 150 Результат нашего примера:
Разделение таблицы на части
Следующие HTML теги используются для разделения таблицы на части:
- Тег используется для содержания заголовка группы в таблице ("шапка таблицы", не путайте с заголовками).
- Тег используется для содержания "подвала" таблицы (футер).
- Тег используется для содержания "тела" таблицы (боди).
Элемент должен быть использован только один раз в одной таблице в следующем контексте: в составе элемента
(как дочерний (вложенный) элемент), при наличии тегов
(наименование таблицы) и (определяет группу столбцов в таблице) должен следовать после этих элементов, но прежде , чем любой тег , и. Кроме того, элемент должен иметь один или более тегов и не влияют на расположение таблицы по умолчанию. Тем не менее, с использованием CSS, вы сможете стилизовать эти элементы по своему усмотрению.внутри (контейнер для создания строки). Элементы ,
style= "background-color:silver" >
Услуга Стоимость Сумма 3 000 Чтение в слух 1 000 Игра на перфораторе 2 000 Результат нашего примера.
- Тег используется для содержания "подвала" таблицы (футер).