Параметры html таблиц: отступ, ширина, цвет фона, рамка
<table>
- width — задает ширину таблицы (в пикселах или % от ширины экрана),
- bgcolor — задает цвет фона ячеек таблицы,
- background — заливает фон таблицы рисунком,
- border — задает рамку указанной ширины (в пикселах) вокруг всей таблицы,
- cellpadding — задает отступ в пикселях между границей клетки и ее содержимым.
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 |
- align — задает выравнивание таблицы: слева (right), справа (left), по центру (center),
- cellspacing — задает расстояние между ячейками таблицы (в пикселах),
- cellpadding — задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
html table
| 1 | 2 | 3 |
|---|---|---|
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
cellspacing=»0″
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <tr></title> </head> <body> <table border = "1"> <!--начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!-- наименование таблицы--> <tr> <!--описываем первую строку--> <th>Ячейка заголовка 1</th> <th>Ячейка заголовка 2</th> <th>Ячейка заголовка 3</th> </tr> <tr> <!--описываем вторую строку--> <td>Ячейка данных 1 Строка 2</td> <td>Ячейка данных 2 Строка 2</td> <td>Ячейка данных 3 Строка 2</td> </tr> <tr> <!-- описываем третью строку--> <td>Ячейка данных 1 Строка 3</td> <td>Ячейка данных 2 Строка 3</td> <td>Ячейка данных 3 Строка 3</td> </tr> </table> <!-- конец таблицы--> </body> </html>
К данной таблице для наглядности мы добавили атрибут border (граница) со значением «1», которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.
Результат нашего примера:
Пример таблицы, составленной на HTML.
Объединение столбцов
Объединение столбцов в элементах <td> или <th> допускается с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек).
<!DOCTYPE html> <html> <head> <title>Пример объединения столбцов в таблице</title> </head> <body> <table border = "1"> <!--начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!--наименование таблицы--> <tr> <!--описываем первую строку--> <th colspan = "2">Ячейка заголовка 1</th> <!--растягиваем на 2 ячейки--> <th>Ячейка заголовка 2</th> </tr> <tr> <!--описываем вторую строку--> <td>Ячейка данных 1 Строка 2</td> <td>Ячейка данных 2 Строка 2</td> <td>Ячейка данных 3 Строка 2</td> </tr> <tr> <!--описываем третью строку--> <td>Ячейка данных 1 Строка 3</td> <td>Ячейка данных 2 Строка 3</td> <td>Ячейка данных 3 Строка 3</td> </tr> </table> <!--конец таблицы--> </body> </html>
Результат нашего примера:
Пример таблицы с объединёнными столбцами на HTML.
Объединение строк
Объединение строк в элементах <td> или <th> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).
<!DOCTYPE html> <html> <head> <title>Пример объединения строк в таблице</title> </head> <body> <table border = "1"> <!-- начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!--наименование таблицы--> <tr> <!--описываем первую строку--> <th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки--> <th>Ячейка заголовка 2</th> </tr> <tr><!--описываем вторую строку--> <td rowspan = "2">Ячейка данных 1 Строка 2</td> <td>Ячейка данных 2 Строка 2</td> <td>Ячейка данных 2 Строка 3</td> </tr> <tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) --> <td>Ячейка данных 2 Строка 3</td> <td>Ячейка данных 3 Строка 3</td> </tr> </table> <!--конец таблицы--> </body> </html>
Результат нашего примера:
Пример таблицы с объединёнными столбцами и строками на HTML.
1. Что такое HTML
HTML, он же HyperText Markup Languge — язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представлния, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используеттся CSS (Cascading Style Sheets) — документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользовалелем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.
Окончательный облик страницы формируется браузером после парсинга HTML-документа, описывающего эту страницу. В зависимости от браузера разные стили могут отображаться по-разному, а определенные элементы могут не поддерживатся некоторыми (обычно старыми или Explorer) браузерами. Все это надо учитывать при формировании HTML-документа.
Attributes
| Attribute | Value | Description |
|---|---|---|
| align |
right
left center justify char |
Aligns the content in a table row. Not supported in HTML 5. |
| bgcolor | bgcolor |
Specifies a background color for a table row. Not supported in HTML 5. |
| bordercolor | bordercolor |
Sets the color of the border. Not supported in HTML 5. |
| char | character |
Aligns the content in a table row to a character. It is used only if the attribute is align=»char». Not supported in HTML 5. |
| charoff | number |
Sets the number of characters the content will be aligned from the character specified by the char attribute. It is used only if the attribute is align=»char». Not supported in HTML 5. |
| valign |
top
middle bottom baseline |
Specifies the vertical alignment of the content inside a table row. Not supported in HTML 5. |
The <tr> tag supports the Global Attributes and the Event Attributes.
Параметр BGCOLOR
| ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Аргументы
Значение цвета можно задавать двумя способами.
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
Пример 3. Цвет фона
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
Группирование строк и столбцов таблицы
Тег <colgroup> создает структурную группу столбцов, выделяя логически объединенные ячейки. Он группирует один или несколько столбцов для единого форматирования, позволяя таким образом применять стили к столбцам, чтобы не повторять стили для каждой ячейки или строки.
Еще один важный тег – <col>. Он формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре. С его помощью можно задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>.
Давайте добавим к уже существующей таблице данные теги:
<colgroup> <col span="1" style="background:pink"> <col style="background-color:yellow"><!-- Задаем цвет фона для следующего столбца таблицы--> </colgroup>
Получаем следующее:
Группирование строк и столбцов таблицы позволяет нам быстро задать нужные стили без их дублирования.
Параметр ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание
осуществляется для всех ячеек в пределах одной строки. Если требуется применить
разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте
параметр align для тега <TD>
или <TH>.
Аргументы
- left
- Выравнивание содержимого ячеек по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
- justify
- Выравнивание по ширине (одновременно по правому и левому краю).
Аналог CSS
text-align
Пример 2. Выравнивание в строке
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TR, параметр align</title>
</head>
<body>
<table width=»600″ border=»1″>
<tr align=»center»>
<td> … </td>
<td> … </td>
</tr>
</table>
</body>
</html>
Теги в HTML
Тег–это основная конструкция HTML, которая состоит из символов, написанных на английском языке и угловых скобок. Именно теги превращают обычный текст в гипертекст для веб-страницы.
Существуют парные и одиночные теги
Парные теги. Это два тега – открывающий и закрывающий, между которыми находится содержимое тега–контент. Примером двойного тега является <title>. Особенность закрывающего тега в том, что он после угловой скобки содержит «/».
Одиночные теги. Примером такого тега служит <img>. У него нет закрывающего тега и, как и большинство таких тегов, он не содержит в себе информацию напрямую, а лишь служит для вставки изображения.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- <table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
- border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
- <caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
- <tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
- <th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
- <td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
- <colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
- <col> используется для той же цели, что и <colgroup>. <colgroup> может содержать <col>, но не наоборот.
- span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
- <thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
- colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan объединяет ячейки по столбцам.
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент tr</title>
</head>
<body>
<h1>Пример использования элемента «tr»</h1>
<table border=»1″>
<caption>Ближайшие праздники</caption>
<thead>
<tr> <th>Месяц \ Праздник</th> <th>Январь</th> <th>Февраль</th> <th>Март</th> <th>Апрель</th> <th>Май</th> </tr>
</thead>
<tfoot>
<tr> <td colspan=»6″>В данной таблице представлены праздники на ближайшие 5 месяцев.</td> </tr>
</tfoot>
<tbody>
<tr> <th>Новый год</th> <td>1</td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <th>Рождество</th> <td>7</td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <th>Старый<br>новый год</th> <td>14</td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <th>День защитника<br>отечества</th> <td></td> <td>23</td> <td></td> <td></td> <td></td> </tr>
<tr> <th>Международный<br>женский день</th> <td></td> <td></td> <td>8</td> <td></td> <td></td> </tr>
<tr> <th>День весны и труда</th> <td></td> <td></td> <td></td> <td></td> <td>1</td> </tr>
<tr> <th>День победы</th> <td></td> <td></td> <td></td> <td></td> <td>9</td> </tr>
</tbody>
</table>
</body>
</html><!DOCTYPE html><html><head><meta charset=»utf-8»><title>Элемент tr</title></head><body><h1>Пример использования элемента «tr»</h1><table border=»1″><caption>Ближайшие праздники</caption><thead><tr> <th>Месяц \ Праздник</th> <th>Январь</th> <th>Февраль</th> <th>Март</th> <th>Апрель</th> <th>Май</th> </tr></thead><tfoot><tr> <td colspan=»6»>В данной таблице представлены праздники на ближайшие 5 месяцев.</td> </tr></tfoot><tbody><tr> <th>Новый год</th> <td>1</td> <td></td> <td></td> <td></td> <td></td> </tr><tr> <th>Рождество</th> <td>7</td> <td></td> <td></td> <td></td> <td></td> </tr><tr> <th>Старый<br>новый год</th> <td>14</td> <td></td> <td></td> <td></td> <td></td> </tr><tr> <th>День защитника<br>отечества</th> <td></td> <td>23</td> <td></td> <td></td> <td></td> </tr><tr> <th>Международный<br>женский день</th> <td></td> <td></td> <td>8</td> <td></td> <td></td> </tr><tr> <th>День весны и труда</th> <td></td> <td></td> <td></td> <td></td> <td>1</td> </tr><tr> <th>День победы</th> <td></td> <td></td> <td></td> <td></td> <td>9</td> </tr></tbody></table></body></html>
Элемент tr