Cоздание таблицы в html
Содержание:
- Атрибут scope тега
- Табличная верстка веб-документа
- Table Width
- CSS для таблиц
- HTML Теги
- Создание таблиц в html
- Сложные таблицы
- Атрибуты и свойства и
- Атрибуты тегов и
- HTML Теги таблицы
- Определение и использование
- Позиционирование
- Alternating Background Color
- Практическая работа №6«Создаем табличные модели» (задания 5, 6)
- Теги группирования элементов таблиц
- Cell Padding
- Параметр BGCOLOR
- Объединение столбцов
- HTML Reference
- HTML Tags
Атрибут scope тега
Когда таблица хорошо структурирована, достаточно беглого взгляда, чтобы понять, какие где данные: мигом возникают визуальные ассоциации между основной информацией в таблице и заголовками её колонок и/или строк.
Но что, если наши пользователи не могут провести такую визуальную параллель. Например, они слабовидящие. Как им прочитать сложную таблицу?
Люди с ослабленным зрением часто применяют скринридеры — программы, которые читают для них веб-страницы. С обычным текстом скринридер справляется хорошо, но интерпретировать сложную таблицу для него проблема.
Поэтому разработчики должны позаботиться об этом и дополнить визуальные ассоциации в таблице программными, которые скринридер сможет понять.
Чаще всего это делают с помощью тега <th> и атрибута scope, который сообщает скринридеру, какие ячейки точно являются заголовками — например, заголовок строки, в которой программа находится, или же заголовок столбца.
Благодаря им все пользователи могут интерпретировать таблицу так же, как и зрячие люди.
Пример
Вернёмся к нашей таблице чётности чисел:
Таблица чисел
| Нечётное | Чётное |
|---|---|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа |
Чтобы однозначно указать заголовки столбцов, делаем вот так:
И у каждой строки тоже можно определить заголовок (если в таблице есть не только заголовки столбцов). Слегка изменим для этого наш пример:
Таблица чисел
| Пара № | Нечётное | Чётное |
|---|---|---|
| 1 | 1 | 2 |
| 2 | 3 | 4 |
| 3 | 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа |
И снова к HTML:
Скринридер распознаёт такую семантическую разметку и позволяет пользователям прочесть весь столбец или строку целиком.
У атрибута scope есть ещё два значения — colgroup и rowgroup. Они используются для таблиц с двумя и более уровнями заголовков (заголовки, которые группируют подзаголовки).
Так заголовок верхнего уровня получает scope=»colgroup», а у его подзаголовков scope=»col», и аналогично для строк.
Табличная верстка веб-документа
Это самый распространенный способ создания веб-страниц. Суть табличной верстки заключается в размещении элементов на странице сайта в ячейках при помощи таблиц. При этом берутся отдельные части сайта (футер, хидер, боди), которые, в свою очередь, также могут являться ячейками. На практике осуществляется табличная верстка в большинстве случаев по следующему алгоритму:
- веб-дизайнер подготавливает макет сайта;
- при помощи графических редакторов или иного программного обеспечения отдельные элементы макета (кнопки, изображения) отрезаются и становятся самостоятельными;
- веб-программист создает таблицу элементов сайта по замыслу дизайнера, оставляя ячейки незаполненными;
- веб-программист воссоздает из нарезанных элементов картинку сайта, используя языки разметки и веб-программирования, следя за функциональностью, работоспособностью каждого их них.
Табличная верстка сайта позволяет красиво и логично выстроить содержимое (контент) для предоставления зашедшему на него посетителю. Однако имеет два минуса:
- Требует большого объема кода.
- Утяжеляет объем сайта и снижает скорость его загрузки.
Но иногда, для того чтобы соблюсти техническое задание со строгим позиционированием элементов, верстка HTML в таблице становится единственным решением.
Table Width
Widths can be specified using the CSS property, in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to «grow» or «shrink» depending on what else is on the page and how wide the browser is.
Here’s an example of using percentages.
table {
width: 100%;
}
Note that we use only the selector in this case, because we’re only setting the width of the table — not the individual cells.
Here’s what the document looks like now.
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</body>
</html>
CSS для таблиц
Чтобы оформить таблицу, необходимо задать для тега <table>, как минимум, свойство border:
table { border: 2px solid #124480; }
| 1 | table{border2pxsolid#124480; } |
Вид рамки вы можете выбрать по собственному усмотрению, равно как и ее цвет.
Для тегов <td>, как правило, нужно задавать внутренние отступы и рамки:
td,
th { border: 1px solid #185eb2;
padding: 10px; }
|
1 |
td, th{border1pxsolid#185eb2; padding10px;} |
Да, и если у вас есть теги <th>, про них тоже не стоит забывать.
Что получилось:
В примере видно, что между всеми ячейками и границами таблицы и ячейками есть пустое пространство. Раньше оно определялось атрибутом для тега <table>. Но сейчас он считается устаревшим и заменяется css-свойством border-spacing:
Свойство border-spacing
table {
border: 2px solid #124480;
border-spacing: 10px;
}
|
1 |
table{ border2pxsolid#124480; border-spacing10px; } |
Прямо скажем, используют его нечасто, т.к. вид таблицы с border-spacing: 10px будет таким:
Поэтому значительно чаще для таблиц используют свойство со значением . В этом случае пустое пространство между ячейками «сплющивается», мы получаем привычный вид таблицы, а свойство с любым значением просто игнорируется.
Свойство border-collapse
table {
border: 2px solid #124480;
border-collapse: collapse;
}
|
1 |
table{ border2pxsolid#124480; border-collapsecollapse; } |
Если хочется получить таблицу с разделителями между строк, стоит задать такое правило:
Разделители для строк
tr { border: 1px solid #3f7ec9; }
| 1 | tr{border1pxsolid#3f7ec9; } |
Если необходимо «раскрасить» строки через одну, необходимо использовать следующие селекторы и свойства:
/* Для четных строк */
tr:nth-child(even){ background-color: #cde; }
/* Для нечетных строк */
tr:nth-child(odd){ background-color: #d3f5f4; }
|
1 |
/* Для четных строк */ trnth-child(even){background-color#cde; } /* Для нечетных строк */ trnth-child(odd){background-color#d3f5f4; } |
В последнем примере, чтобы расположить 2 таблицы рядом, для тега было использовано свойство:
table { display: inline-table }
| 1 | table{displayinline-table} |
В этом случае таблицы ведут себя аналогично элементам с .
Естественно, вы можете вместо использовать свойство :
tr:nth-child(even) {
background-image: url(img/diagonal-noise.png);
}
tr:nth-child(odd) {
background-image: url(img/tetr.gif);
}
|
1 |
trnth-child(even){ background-imageurl(imgdiagonal-noise.png); } trnth-child(odd){ background-imageurl(imgtetr.gif); } |
Для разнообразного управления ячейками таблицы можно использовать селекторы псевдоклассов типа или :
table {
border: 2px solid #124480;
border-collapse: collapse;
<strong>width: 500px;</strong>
}
td:first-child{
text-align: right;
}
td:last-child{
width: 30%;
text-align: right;
}
td:last-child:after{
content: ‘ грн.’;
}
|
1 |
table{ border2pxsolid#124480; border-collapsecollapse; <strong>width500px;<strong> } tdfirst-child{ text-alignright; } tdlast-child{ width30%; text-alignright; } tdlast-childafter{ content’ грн.’; } |
Так, с помощью правил выше мы задали width для , а также выравнивание текста по правому краю для первой и последней колонки. А с помощью псевдоэлемента для последней колонки добавили еще единицу для цены — ‘грн’. В результате получилась такая таблица:
О том, как создавать сложные таблицы, читайте в статье Объединение ячеек и строк в таблице.
Просмотров:
329
HTML Теги
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Создание таблиц в html
| столбец 1 | столбец 2 | столбец 3 |
|---|---|---|
| первый столбец первой строки | второй столбец первой строки | третий столбец первой строки |
| первый столбец второй строки | второй столбец второй строки | третий столбец второй строки |
| первый столбец третьей строки | второй столбец третьей строки | третий столбец третьей строки |
- сама таблица задается с помощью тегов <table></table>,
- у таблицы есть название — теги <caption></caption>,
- таблица состоит из строк — теги <tr></tr>,
- каждая строка состоит из столбцов — теги <td></td>,
- столбцы имеют названия, расположенные в первой строке — теги <th></th>.
html table
| 1 | 2 | 3 |
|---|---|---|
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
| 1 | 2 | 3 |
|---|---|---|
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
Сложные таблицы
Таблица типа «объекты-объекты-несколько» (ООН)
Таблица типа «объекты-объекты-несколько» — это таблица, содержащая информацию о нескольких свойствах пар объектов, принадлежащих разным классам.
Общий вид таблиц типа ООН:
В этой таблице головка (верхний заголовок) имеет трехъярусную структуру.
Пример 5
Таблица 2.9
В этом примере пары образуются из объектов, относящихся к классам «ученик» и «предмет». Свойствами здесь являются оценки, полученные учениками за разные периоды учебы.
Попробуем эту же информацию представить иначе. Образуем пары из объектов, принадлежащих классам «ученик» и «период обучения». Свойствами будем считать оценки, полученные учениками по предметам.
Таблица 2.10
Из этого примера видно, что объекты и свойства могут меняться ролями: то, что было объектом, становится свойством, и наоборот. Один или другой вариант следует выбирать в зависимости от цели составления таблицы. Например, чтобы проследить за успеваемостью ученика в разные периоды времени по одному и тому же предмету, удобнее воспользоваться первой таблицей. А общую картину успеваемости за весь период обучения проще понять с помощью второй таблицы. В таблице ниже приведен фрагмент сводной ведомости успеваемости учащихся, имеющейся в конце классного журнала.
Таблица 2.11
Таблица типа «объекты-свойства-объекты» (ОСО)
Таблица типа «объекты-свойства-объекты» — это таблица, содержащая информацию и о свойствах пар объектов, принадлежащих разным классам, и об одиночных свойствах объектов одного из классов.
Пример 6
В таблице ниже приведены антропометрические данные учеников 7 класса. Эта таблица относится к типу ОС.
Таблица 2.12
Результаты, показанные ребятами в школьной спартакиаде, приведены в таблице ниже. Эта таблица относится к типу ООН.
Таблица 2.13
Объединим информацию, содержащуюся в таблице в последних двух таблицах. Для этого «нарастим» боковик одной таблицы, вставив после него нужные графы из другой таблицы.
Получим:
Таблица 2.14
В этой таблице свойства «рост» и «вес» не являются парными, они относятся только к объектам класса «ученик». Свойства «результат» и «баллы» характеризуют пары объектов классов «ученик» и «упражнение».
В отличие от таблиц других типов, таблицы типа ОСО нельзя «повернуть набок», так как одиночные свойства объектов обязательно должны находиться в боковике.
Коротко о главном
Таблица типа «объекты-объекты-несколько» — это таблица, содержащая информацию о нескольких свойствах пар объектов, принадлежащих разным классам.
Таблица типа «объекты-свойства-объекты» — это таблица, содержащая информацию и о свойствах пар объектов, принадлежащих разным классам, и об одиночных свойствах объектов одного из классов.
Вопросы и задания
Приведите пример таблицы типа ООН.
Климатическая таблица:
Пример таблицы объекты-объекты-несколько
Приведите пример таблицы типа ОСО.
Расписание поезда:
Пример таблицы объекты-свойства-объекты
Атрибуты и свойства и
1. Свойство align=»параметр» — задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
- left — выравнивание по левому краю
- center — выравнивание по центру
- right — выравнивание по правому краю
2. Свойство background=»URL» — задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor=»цвет» — задает цвет фона ячейки.
4. Свойство bordercolor=»цвет» — задает цвет рамки ячейки.
5. Свойство char=»буква» — задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan=»число» — задает число объединяемых горизонтальных ячеек.
7. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan=»число» — задает число объединяемых вертикальных ячеек.
10. Свойство valign=»параметр» — выравнивание содержимого ячейки по вертикали.
- top — выравнивание содержимого ячейки по верхнему краю строки
- middle — выравнивание по середине
- bottom — выравнивание по нижнему краю
- baseline — выравнивание по базовой линии
Примечание 1
Для тега <tr> доступны такие же параметры, что и для <td>. Параметры для одного тега <tr> будут иерархично применены ко всем <td> внутри него
Атрибуты тегов и
Теги строк и теги ячеек так же имеют свои атрибуты специфичные в использовании.
COLSPAN — Атрибут тега <TD>? служит для объединения нескольких столбцов в один. Значением данного атрибута является количество столбцов которые необходимо соединить в один. Например: colspan=3, говорит о том, что данный столбец замещает собой три столбца таблицы (себя и еще два следующих), столбцы которые были соединены создавать данной строке больше не нужно.
ROWSPAN — атрибут тега <TD> позволяющий объединять строки таблицы для данного столбца. Значение атрибута является число строк в столбце необходимое для объединения.
ALIGN — атрибут позволяет задать выравнивание текста в ячейке, может принимать три значения: по центру (center), по левому краю (left), по правому краю (right).
VALIGN — позволяет установить вертикальное выравнивание содержимого ячейки. по умолчанию содержимое ячейки располагается по вертикали в центре. Может принимать четыре значения: по центру (middle), по верхнему краю (top), по нижнему краю (bottom), по базовой линии (baseline, при этом происходит привязка содержимого ячейки к одной линии).
BGCOLOR — позволяет установить цвет фона отдельной ячейки таблицы. Может принимать значения в виде названия цвета, либо код в шестнадцатеричной системе счисления по модели RGB.
HTML Теги таблицы
| Тег | Описание |
|---|---|
| <table> | Определяет таблицу |
| <th> | Определяет заголовок ячейки в таблице |
| <tr> | Определяет строки в таблице |
| <td> | Определяет ячейку в таблице |
| <caption> | Определяет надпись таблицы |
| <colgroup> | Задает группу из одного или нескольких столбцов в таблице для форматирования |
| <col> | Задает свойства столбца для каждого столбца в элементе <colgroup> |
| <thead> | Группирует содержимое заголовка в таблице |
| <tbody> | Группирует содержимое тела в таблице |
| <tfoot> | Группирует содержимое нижнего колонтитула в таблице |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.
Определение и использование
Тег <table> определяет таблицу HTML.
Таблица HTML состоит из элемента <table> и одного или нескольких <tr>,
<th>, и <td> элементов.
Элемент <tr> определяет строку таблицы, элемент <th> определяет заголовок таблицы, а элемент <td> определяет ячейку таблицы.
Более сложная HTML-таблица может также включать <caption>, <col>, <colgroup>, <thead>,
<tfoot>, и <tbody> элементы.
Примечание: Таблицы не должны использоваться для макета страницы!
Исторически сложилось так, что некоторые веб-авторы имеют неиспользуемые таблицы в HTML как способ управления их макета страницы. Однако существуют различные альтернативы использованию HTML-таблиц для макета, в первую очередь с использованием CSS.
Позиционирование
Смысл этого действия заключается в расположении как самого содержимого ячеек, так и в расположении самой таблицы на веб-странице. Однако технология HTML в таблицах, позиционируемых на веб-странице, ограничивается их расположением слева (по умолчанию), по центру и справа при помощи атрибута align и нужных для него значений:
| Значение | Расположение на странице |
| left | слева (по умолчанию) |
| center | по центру |
| right | справа |
Синтаксис такой:
В будущем, при изучении технологии CSS, вы узнаете, как позиционировать элементы веб-документов по вертикали.
Для задания расположения содержимого ячеек те же самые атрибуты с теми же значениями применяются к тегу <td>:
Расположим нашу таблицу справа, а содержимое ее ячеек выровняем по центру:
В итоге должно получиться вот что:
Alternating Background Color
As I explained previously, background color can be added to HTML elements using the CSS property.
You can apply a background color to the whole table, or just parts of it, like say, the table cells, or certain rows, etc.
Now let’s use a little CSS trick to apply alternating colors to the rows of our table. So, the first row will be color A, the second will be color B, the third will be color A, the fourth will be color B, and so on.
To do this, use the CSS pseudo-class selector along with the and value to determine the background color of odd and even rows.
table.alt tr:nth-child(even) {
background-color: #eee;
}
table.alt tr:nth-child(odd) {
background-color: #fff;
}
Note that in this example, I also create a class called and apply it to the table, then use that class as part of my selector in the style sheet. So if there’s more than one table in the document, only tables with that class will have these styles applied to them.
Here’s what the document looks like with these styles.
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
table.alt tr:nth-child(even) {
background-color: #eee;
}
table.alt tr:nth-child(odd) {
background-color: #fff;
}
</style>
</head>
<body>
<table class=»alt»>
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</body>
</html>
Практическая работа №6«Создаем табличные модели» (задания 5, 6)
Задание 5. Таблица типа ООН. Климат
1. Представьте в виде таблицы следующий текст (информация приведена за 2004 г.):
В Марий-Эл количество осадков в июле составило 79 мм. В Пермской области средняя температура в июле была +18 град. В Красноярском крае средняя температура в январе была -18 град. В Московской области количество осадков в январе составило 45 мм. В Оренбургской области средняя температура в январе была -11 град. В Удмуртии количество осадков в июле составило 61 мм. В Марий-Эл количество осадков в январе составило 26 мм. В Оренбургской области средняя температура в июле была +21 град. В Красноярском крае количество осадков в июле составило 55 мм. В Оренбургской области количество осадков в январе составило 35 мм. В Пермской области количество осадков в январе составило 52 мм. В Марий-Эл средняя температура в январе была -10 град. В Оренбургской области количество осадков в июле составило 89 мм. В Московской области средняя температура в июле была +20 град. В Удмуртии средняя температура в январе была -13 град. В Красноярском крае количество осадков в январе составило 36 мм. В Удмуртии средняя температура в июле была +19 град. В Московской области количество осадков в июле составило 66 мм. В Удмуртии количество осадков в январе составило 41 мм. В Пермской области количество осадков в июле составило 45 мм. В Марий-Эл средняя температура в июле была +20 град. В Красноярском крае средняя температура в июле была +17 град. В Пермской области средняя температура в январе была -14 град. В Московской области средняя температура в январе была -8 град.
Таблица может иметь следующую структуру:
2. Сохраните таблицу в собственной папке под именем Климат.
Задание 6. Таблица типа ООН. Производство бумаги
1. По данному тексту постройте таблицу той же структуры, что и в предыдущем задании.
В 1970 г. в СССР всего было произведено бумаги 4,2 млн т. В 1970 г. в СССР на душу населения было произведено бумаги 17 кг. В 1980 г. в Бельгии на душу населения было произведено бумаги 81 кг. В 1970 г. в Болгарии всего было произведено бумаги 0,2 млн т. В 1980 г. в Болгарии всего было произведено бумаги 0,3 млн т. В 1980 г. в СССР всего было произведено бума ги 5,3 млн т. В 1970 г. в Бельгии на душу населения было произведено бумаги 68 кг. В 1980 г. в Болгарии надушу населения было произведено бумаги 36 кг. В 1970 г. в Великобритании всего было произведено бумаги 3,6 млн т. В 1970 г. в Великобритании на душу населения было произведено бумаги 65 кг. В 1980 г. в Бельгии всего было произведено бумаги 0,8 млн т. В 1970 г. в Болгарии на душу населения было произведено бумаги 24 кг. В 1980 г. в Великобритании всего было произведено бумаги 3,0 млн т. В 1980 г. в СССР на душу населения было произведено бумаги 20 кг. В 1970 г. в Бельгии всего было произведено бумаги 0,7 млн т. В 1980 г. в Великобритании на душу населения было произведено бумаги 54 кг. В 1980 г. в Бельгии всего было произведено бумаги 0,8 млн т.
2. Попытайтесь изменить таблицу так, чтобы представить в ней дополнительную информацию:
В 1989 г. в Болгарии всего было произведено бумаги 0,4 млн т. В 1989 г. в Бельгии надушу населения было произведено бумаги 112 кг. В 1989 г. в СССР всего было произведено бумаги 6,3 млн т. В 1989 г. в Бельгии всего было произведено бумаги 1,1 млн т. В 1989 г. в Великобритании всего было произведено бумаги 3,6 млн т. В 1989 г. в СССР на душу населения было произведено бумаги 22 кг. В 1989 г. в Великобритании на душу населения было произведено бумаги 63 кг. В 1989 г. в Болгарии на душу населения было произведено бумаги 42 кг.
3. Сохраните таблицу в собственной папке под именем Бумага.
Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги <thead>, <tbody> и <tfoot>.
Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз
дания верхней шапки таблицы) используется тег <thead>. Заголовки таблицы
должны быть помещены в элемент <thead>, например:
Основное содержимое (тело) таблицы должно находиться внутри элемента <tbody> (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег <tfoot> (в одной таблице допускается не более одного тега <tfoot>). В исходном коде тег <tfoot> ставится до тега <tbody>.
Кроме логического группирования одной из причин использования элементов <thead> и <tfoot> является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок (<thead>) и последнюю строку (<tfoot>), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги <thead>, <tbody> и <tfoot>
- Результат
- HTML-код
- Попробуй сам »
| Это шапка таблицы | |||
|---|---|---|---|
| Это подвал таблицы | |||
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Несмотря на то, что мы перед <tbody> добавили <tfoot>, он, тем не менее, появляется в конце таблицы.
Это исходит из того, что <tbody> может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему <tfoot> в коде прописывается перед элементом <tbody>.
Cell Padding
You can use the CSS property to apply padding to the cells. You can specify how much padding you want.
For example, to apply padding of 10 pixels, add the following to your style sheet.
padding: 10px;
Here’s what the document looks like now.
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</body>
</html>
Параметр BGCOLOR
| ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Описание
Устанавливает цвет фона таблицы. Можно использовать этот параметр совместно
с background, подобрав цвет фона близкий к фоновому
рисунку
Аргументы
Значение цвета можно задавать двумя способами.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная
система, в отличие от десятичной системы, базируется, как следует из ее названия,
на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D,
E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной
системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной
системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят
символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый
и синий — может принимать значения от 00 до FF. Таким образом, обозначение
цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают
красную компоненту цвета, два средних — зеленую, а два последних —
синюю.
background-color
Пример 4. Цвет фона таблицы
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
Объединение столбцов
Ячейки по вертикали объединяются с помощью атрибута rowspan. Числовое значение его определяет количество сокращаемых по вертикали ячеек. Эта тема представляет самые большие трудности для студентов.
Самым легким для понимания ее является следующий способ: создайте таблицу и пронумеруйте ячейки разными цифрами. Например такую:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
Код таблицы будет следующий:
Давайте избавимся от двузначных чисел, объединив столбцы с цифрами 6 и 10, 7 и 11, 8 и 12. Оставим в объединенных по вертикали ячейках числа: 6, 7 и 8.
Объединяем 6 и 10. В теге <td>, содержащем цифру 6, прописываем: <td rowspan=»2″>, а конструкцию <td>10</td> удаляем вообще. Аналогично нужно сделать и для оставшихся пар цифр. В итоге код преобразится таким образом:
Браузер же должен выдать нужную нам таблицу:
Совет: пока вы не достигнете автоматизма действий при объединении столбцов, используйте этот способ с использованием цифр, заменяя их на нужные данные.
HTML Reference
HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts
HTML Tags
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
