Рисуем таблицу
Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:
<tr><td>
Вместе эти теги пишутся так:
<table><tr><td>ячейка</td></tr></table>
Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец — ячейку
Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border «рамка», который добавит нам наглядности.
<html><head><title>Таблица</title></head><body><table border=»1″><tr><td>строка1 ячейка1</td><td>строка1 ячейка2</td><td>строка1 ячейка3</td></tr><tr><td>строка2 ячейка1</td><td>строка2 ячейка2</td><td>строка2 ячейка3</td></tr><tr><td>строка3 ячейка1</td><td>строка3 ячейка2</td><td>строка3 ячейка3</td></tr></table></body></html>
смотреть пример
Разобрались? Если да, идем дальше..
Еще примеры
Как добавить свернутые границы в таблице (с помощью CSS):
<html><head><style>table, th, td { border: 1px solid
black; border-collapse: collapse;}</style></head><body>
<table> <tr> <th>Месяц</th>
<th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table></body></html>
Как выровнять таблицу по правому краю (с помощью CSS):
<table style=»float:right»> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Как выровнять таблицу по центру (с помощью CSS):
<html><head><style>table, th, td { border: 1px solid
black;}table.center { margin-left: auto;
margin-right: auto;}</style></head><body><table
class=»center»> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Как добавить цвет фона в таблицу (с помощью CSS):
<table style=»background-color:#00FF00″> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Как добавить заполнение в таблицу (с помощью CSS):
<html><head><style>table, th, td { border: 1px solid
black;}th, td { padding: 10px;}</style></head><body><table> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table></body></html>
Как установить ширину таблицы (с помощью CSS):
<table style=»width:400px»> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Как создать заголовки таблицы:
Как создать таблицу с подписью:
<table>
<caption>Ежемесячные сбережения</caption> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Атрибуты и свойства тега
К открывающему тегу <table> можно прописывать различные атрибуты.
1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:
- left — выравнивание по левому краю
- center — выравнивание по центру
- right — выравнивание по правому краю
В разобранном выше примере мы выравнивали таблицу по центру align=»center».
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы <td> или строкам <tr>. Таким образом, в разных ячейках выравнивание будет разное.
Например
2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Пример
Преобразуется на странице в следующее:
| Пример таблицы | |
| Столбец 1 | Столбец 2 |
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
Обратите внимание на то, что в теге мы добавили style=»color:white;». Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым
Более подробно про фон читайте в статье: как сделать фон для сайта
3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″, что означает толщина рамки — 1 пиксель.
5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.
8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:
- void — не отрисовывать границы
- border — граница вокруг таблицы
- above — граница по верхнему краю таблицы
- below — граница снизу таблицы
- hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
- vsides — рисовать только вертикальные границы (слева и справа от таблицы)
- rhs — граница только на правой стороне таблицы
- lhs — граница только на левой стороне таблицы
10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:
- all — линия рисуется вокруг каждой ячейки таблицы
- groups — линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>
- cols — линия отображается между колонками
- none — все границы скрываются
- rows — граница рисуется между строками таблицы, созданными через тег <tr>
12. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.
14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге <td>.
Цвет фона
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th, то он и будет установлен в качестве фона (пример 3).
Пример 3. Цвет фона
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
background: #f5e8d0; /* Цвет фона таблицы */
border-spacing: 0; /* Расстояние между ячеек */
}
th {
background: #496791; /* Цвет фона ячеек */
color: #fff; /* Цвет текста */
}
td, th {
padding: 5px 10px; /* Поля в ячейках */
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan=»2″>Вид соединения</th>
<th colspan=»2″>Поля допусков ширины шпоночного паза</th>
</tr>
<tr>
<th>Вал</th><th>Втулка</th>
</tr>
<tr>
<td>Свободное</td><td>H9</td><td>D10</td>
</tr>
<tr>
<td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
</tr>
<tr>
<td>Плотное</td><td colspan=»2″>P9</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона
Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).
Пример 4. Создание зебры
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные линии */
}
thead {
background: #f5e8d0; /* Цвет фона заголовка */
}
td, th {
padding: 5px; /* Поля в ячейках */
border: 1px solid #333; /* Параметры рамки */
}
tbody tr:nth-child(even) {
background: #f0f0f0; /* Зебра */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan=»2″>Интервалы размеров, мм</th>
<th colspan=»4″>Допуск IT, мкм, для квалитетов</th>
</tr>
<tr>
<th>5</th><th>6</th><th>7</th><th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>До 3</td><td>4</td><td>6</td><td>10</td><td>14</td>
</tr>
<tr>
<td>Св. 3 до 6</td><td>5</td><td>8</td><td>12</td><td>18</td>
</tr>
<tr>
<td>Св. 6 до 10</td><td>6</td><td>9</td><td>15</td><td>22</td>
</tr>
<tr>
<td>Св. 10 до 18</td><td>8</td><td>11</td><td>18</td><td>27</td>
</tr>
<tr>
<td>Св. 18 до 30</td><td>9</td><td>13</td><td>21</td><td>33</td>
</tr>
<tr>
<td>Св. 30 до 50</td><td>11</td><td>16</td><td>25</td><td>39</td>
</tr>
<tr>
<td>Св. 50 до 80</td><td>13</td><td>19</td><td>30</td><td>46</td>
</tr>
</tbody>
</table>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Зебра
Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.
Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).
Activities
Now let’s add some graphical flair to our content.
- Add a table to your content. See what happens if you create a row with more or less cells than the other rows.
- Create a table with several rows and columns. Now introduce some rowspans and colspans. Experiment with putting more cells on a row or taking some away and see how the table is affected. What happens if you make the colspan or rowspan greater than the total number or rows or columns in the table?
As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.
HTML Lists
HTML Final Thoughts
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><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>
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
-
<thead> − to create a separate table header.
-
<tbody> − to indicate the main body of the table.
-
<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
This will produce the following result −
Теги таблицы
CAPTION предназначен для создания заголовка к таблице. Такой заголовок представляет собой текст, отображаемый перед таблицей и описывающий ее содержание.
COL задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.
COLGROUP предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.
TBODY предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили.
TD Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.
TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.
TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
THEAD предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.
TR служит контейнером для создания строки таблицы.
Деление строк таблицы на логические секции
Наша первая таблица достаточно примитивна, но встречаются таблицы, содержащие сотни строк, значительное количество столбцов и причудливым образом
объединенных ячеек, которые могут группироваться самыми различными способами, как по внешнему виду, так и по содержанию. Для этих целей предусмотрены
дополнительные теги и атрибуты, которые мы сейчас и рассмотрим.
Для группировки строк таблицы разбиваются элементами «thead», «tbody» и
«tfoot» на логические секции (наподобие веб-страницы), которые формируются соответствующими парными тегами:
<thead>
(от англ. table head – шапка таблицы),
<tbody>
(от англ. table body – тело таблицы) и
<tfoot>
(от англ. table foot – подвал таблицы).
Элемент «thead» предназначен для группирования одной или нескольких строк вверху таблицы.
По логике вещей в данной секции нужно размещать строки с заголовочными ячейками «th», однако в случае их отсутствия,
можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только
одного элемента «thead» в пределах одной таблицы, который должен располагаться после элементов
«caption» или «colgroup», если они конечно присутствуют, но перед элементами
«tbody», «tfoot» или «tr». При чем секция может
вообще не содержать строк и даже в некоторых случаях допускается отсутствие закрывающего тега. Но, как всегда, мы так поступать не будем, а,
соответственно, и описывать такие ситуации не станем ни здесь, ни далее.
Элемент «tfoot» предназначен для группирования одной или нескольких строк внизу таблицы.
Опять же, логика подсказывает, что в данной секции нужно размещать строки с итоговыми ячейками «td», однако в случае
их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается
применение только одного элемента «tfoot» в пределах одной таблицы, который разрешается располагать, как
непосредственно перед элементом «tbody», так и сразу же после него. Мы будем использовать второй вариант и всегда
располагать «подвал» таблицы после ее «тела». Если итоговых ячеек нет, то элемент
«tfoot» можно оставить пустым, но указывать его для сохранения логической разметки нужно, если мы указали элементы
«thead» и «tbody».
Cекций «tbody» может быть несколько. Располагаются они друг за другом после секции
«thead». Все они предназначены для размещения обычных строк с данными, как правило сгруппированных по каким-либо
признакам, если секций несколько. Кроме того, допускается отсутствие строк в секциях «tbody», но если секции
созданы, то использовать строки вне «thead», «tbody» и
«tfoot» не разрешается. Короче, если мы решили использовать логическую разбивку таблицы на перечисленные разделы, то
нужно соответствовать своим устремлениям до конца.
Теперь давайте рассмотрим простейшее деление таблицы на секции (см. пример №2).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Логическая разметка таблицы</title> </head> <!-- Заголовок документа не показан на рисунке --> <body> <table border="1"> <caption>Деление на секции с выделением разным фоном</caption> <thead style="background-color: yellow"> <tr> <th>Я – первая заглавная ячейка </th> <th>А я – вторая заглавная ячейка</th> </tr> </thead> <tbody style="background-color: green"> <tr> <td>Я – первая ячейка в первой строке тела</td> <td>Я – вторая ячейка в первой строке тела</td> </tr> <tr> <td>Я – первая ячейка во второй строке тела</td> <td>Я – вторая ячейка во второй строке тела</td> </tr> </tbody> <tfoot style="background-color: grey"> <tr> <td>Итог:</td> <td>использовано три фона</td> </tr> </tfoot> </table> </body> </html>
Пример №2. Разбиение таблицы на секции
Может показаться, что введение элементов «thead», «tbody» и
«tfoot» излишне. Ведь можно было бы разрешить использовать для выделения и группировки строк универсальный элемент
«div», применяя к нему нужные стили CSS. Однако давайте не будем забывать,
что «div» – элемент физической разметки, а перечисленные элементы осуществляют логическую разметку
Конечно,
без стилей CSS они, также как и «div» свое содержимое никак не изменяют, зато для
поисковых машин, вне зависимости от применяемых к ним стилей, дают четкое представление о структуре таблицы, а также виде и степени важности данных,
располагающихся в соответствующих разделах.
Объединение ячеек в таблице
За объединение ячеек в таблице html отвечают атрибуты (объединение столбцов) и (объединение строк).
Объединение двух ячеек в одной строке (объединение столбцов):
|
1 |
<table> <tr> <td colspan=»2″>Объединеннаяячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <tr> <table> |
Результат:
| Объединенная ячейка | Ячейка | |
| Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка |
Объединение трех ячеек в одном столбце (объединение строк):
|
1 |
<table> <tr> <td rowspan=»3″>Объединеннаяячейка<td> <td>Ячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <tr> <table> |
Результат:
| Объединенная ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | |
| Ячейка | Ячейка |
Объединение четырех смежных ячеек в центре таблицы:
|
1 |
<table> <tr> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td colspan=»2″rowspan=»2″>Объединеннаяячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <tr> <table> |
Результат:
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Объединенная ячейка | Ячейка | |
| Ячейка | Ячейка | ||
| Ячейка | Ячейка | Ячейка | Ячейка |
Пример шапки таблицы с объединенными ячейками:
|
1 |
<table> <tr> <th rowspan=»2″>Наименование<th> <th rowspan=»2″>Производитель<th> <th colspan=»2″>Лицензия<th> <tr> <tr> <th>Серияиномер<th> <th>Срокдействия<th> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <tr> <tr> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <td>Ячейка<td> <tr> <table> |
Результат:
| Наименование | Производитель | Лицензия | |
|---|---|---|---|
| Серия и номер | Срок действия | ||
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка | Ячейка |
Общая сводка по HTML-таблицам
Давайте закрепим полученную информацию. Вот теги, которые мы использовали при построении HTML-таблиц:
- <table> – тег, позволяющий создать контейнер таблицы;
- <tr> – тег для создания строки (ряда) таблицы, используемый совместно с <td> или <th>;
- <td> – тег обычной ячейки таблицы;
- <th> – тег ячейки-заголовка таблицы;
- <col> – тег, позволяющий создать колонки для таблицы;
- <colgroup> – тег, который группирует колонки;
- <thead> – тег для верхнего колонтитула таблицы;
- <tbody> – тег основной части таблицы;
- <tfoot> – тег для нижнего колонтитула таблицы;
- <caption> – используйте этот тег, чтобы задать общий заголовок для таблицы;
- colspan – показывает количество ячеек в строке для объединения по горизонтали;
- rowspan – показывает количество ячеек в столбце для объединения по вертикали;
- span – количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1;
- border – ширина границ таблицы в пикселях, по умолчанию: 0 – в таком случае обводка таблицы не видна;
- cellpadding – отступ от границ ячеек до их содержимого;
- cellspacing – отступ между границами ячеек.
Чтобы добавить визуальные эффекты, используйте CSS-стили – с их помощью можно как увеличить размер обводки границ, так и задать цвет фона, размер и шрифт текста.
Создание HTML-таблицы – это дело нескольких минут. Главное – разобраться с базовыми понятиями и попрактиковаться на нескольких примерах. В последующем создание таблицы не будет вызывать у вас никаких проблем.
Форматирование текста
<h1></h1>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
— жирный текст без придания важности выделенному фрагменту. — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
— выделение текста курсивом без придания важности.
— зачёркивает текст, помечая его удалённым.
— отображает перечёркнутый текст.
— подчёркивает текст, визуально выделяя внесённые изменения.
— подчёркивание без дополнительного акцентирования внимания. — расставление акцентов путём выделения фрагментов текста курсивом
<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.
<mark></mark> — выделение частей текста жёлтым маркером.
<tt></tt> — имитация текста, набранного на печатной машинке.
<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
<sub></sub> — подстрочное начертание символов.
<sup></sup> — надстрочное начертание символов.
<cite></cite> — оформление цитат.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.
<p></p> — контейнер для абзаца.
<br> — переносит текст на другую строку без создания абзаца.
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
<ol></ol> — список с цифрами.
<ul></ul> — список со значками.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).
<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
<code></code> — выделение фрагмента кода с помощью шрифта monospace.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | leftrightcenter | Не поддерживается в HTML5.Определяет выравнивание таблицы в соответствии с окружающим её текстом. |
| bgcolor | rgb(x,x,x)#xxxxxxcolorname | Не поддерживается в HTML5.Задает цвет фона для таблицы. |
| border | 01 | Атрибут определяет должна отображаться граница вокруг ячеек таблицы, или нет. |
| cellpadding | pixels | Не поддерживается в HTML5.Определяет расстояние между границей ячейки и ее содержимым. |
| cellspacing | pixels | Не поддерживается в HTML5.Указывает расстояние между ячейками. |
| frame | abovebelowhsideslhsrhsvsidesboxbordervoid | Не поддерживается в HTML5.Указывает, какие части внешних границ, должны быть видны. |
| rules | nonegroupsrowscolsall | Не поддерживается в HTML5.Указывает, какие части внутри границ должны быть видны. |
| sortable | sortable | Атрибут отсутствует в спецификации HTML 5.1.Указывает, что данные в таблице могут быть отсортированы. Это логический атрибут. |
| summary | text | Не поддерживается в HTML5.Вертикальное выравнивание содержимого в ячейке заголовка. |
| width | pixels% | Не поддерживается в HTML5.Определяет ширину таблицы. |
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
<!DOCTYPE html> <html> <head> <title>Пример таблицы</title> </head> <body> <table border="1"> <caption>Инструменты создания сайтов</caption> <tr> <th>Назначение</th><th colspan="2">Инструмент</th> </tr> <tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> <tr> <td>Оформление</td><td colspan="2">CSS</td> </tr> <tr> <td>Разработка</td><td>PHP</td><td>Python</td> </tr> </table> </body> </html>
В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
- <table border=»1″> — открыли таблицу, задав ей толщину рамок.
- <caption> Инструменты создания сайтов </caption> — озаглавили её.
- <tr> — открыли строку.
- <th>Назначение</th> — создали ячейку с оформлением заголовка.
- <th colspan=»2″>Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- </tr> — закрыли строку. Аналогично создали остальные строки.
- <tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
- </table> — закрыли таблицу.
Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Атрибуты тега <td>
height — с помощью этого атрибута задается высота ячейки, значение дается в пикселях. Если данный атрибут не задан, то высота ячейки растягивается по величине содержимого контента (текста). Если для всей таблицы (для тега <table>) задан атрибут height, а для ячейки (для тега <td>) данный атрибут не задан, то ячейка будет вытягиваться относительно заданной высоты для всей таблицы. Пример написания кода: <td height=»30px»>
width — с помощью этого атрибута задается ширина ячейки, значение дается в пикселях. Если данный атрибут не задан, то ширина ячейки растягивается по величине содержимого контента (текста). Если для всей таблицы (для тега <table>) задан атрибут width, а для ячейки (для тега <td>) данный атрибут не задан, то ячейка будет вытягиваться относительно заданной ширины для всей таблицы. Пример написания кода: <td width=»60px»>
bgcolor — атрибут для изменения цвета фона ячейки. В качестве значения для этого атрибута можно использовать любой цвет. Пример написания кода: <td bgcolor=»yellow»>
align — атрибут для выравнивания содержимого ячейки по горизонтали. Этому атрибуту могут быть даны следующие значения:left — выравнивает содержимое ячейки по левому краю. right — выравнивает содержимое ячейки по правому краю. center — выравнивает содержимое ячейки по центру. Пример написания кода: <td align=»center»>
valign — атрибут для выравнивания содержимого ячейки по вертикали. Этому атрибуту могут быть даны следующие значения:top — выравнивает содержимое ячейки по верхнему краю. middle — выравнивает содержимое ячейки посередине. bottom — выравнивает содержимое ячейки по нижнему краю. Пример написания кода: <td valign=»middle»>
Применим знания на практике.
В этом уроке мы рассмотрели основные атрибуты которые используются при создании таблиц. Выучивать всю эту информацию смысла нет, не забивайте себе голову. Всегда можно зайти и посмотреть подсказки.
Теперь, на основе данных которые размещены на этой странице мы создадим таблицу. Давайте сделаем таблицу из 4 строк и 2-ух столбцов. Чтобы у нас получилось 2 столбца нам нужно будет в каждой строчке создавать по 2 ячейки.
Комментарии к коду:1) Для тега <table> мы задали атрибут border и дали ему значение 1. Это означает, что ширина границ нашей таблицы 1 пиксель. 2) Еще для тега <table> мы задали атрибут cellspacing и дали ему значение . Это означает, что расстояние между нашими ячейками равно 0. Если бы мы не задали этот атрибут, то по умолчанию расстояние между ячейками составляло бы 2 пикселя. 3) Для 1-ой строки мы задали атрибут bgcolor и дали ему значение green. С помощью данного атрибута мы задали зеленый цвет фона всем ячейкам находящимся в этой строке. 4) Еще для 1-ой строки мы задали атрибут height и дали ему значение 50px. С помощью данного атрибута мы задали высоту ячеек первой строки. Данная строка будет выше, чем все другие, так как в нашем случае она является «шапкой» таблицы. 5) Для 1-ой ячейки первой строки мы задали атрибут width и дали ему значение 150px. С помощью этого атрибута мы задали ширину данной ячейки
Теперь внимание! Автоматически все ячейки которые располагаются под этой ячейкой, тоже будут иметь ширину 150px. 6) Тоже самое мы сделали и со 2-ой ячейкой первой строки, отличается только значение атрибута, для этой ячейки задана ширина 110px
Все нижние ячейки в этом столбце, соответственно, тоже будут иметь ширину 110px.7) И для 1-ой и для 2-ой ячейки первой строки мы задали атрибут align и дали ему значение center. С помощью данного атрибута мы выравняли текст по центру ячеек. 
Для других трех строк мы задали атрибут bgcolor и дали ему значение yellow. С помощью данного атрибута мы задали желтый цвет фона всем ячейкам этих строк. 9) Так же для этих трех строк мы задали одинаковую высоту с помощью тега height дав ему значение 30px.
Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]