Как сделать таблицу в HTML
Вы здесь: Главная — HTML — HTML Основы — Как сделать таблицу в HTML
Бывалые вебмастера до сих пор с содроганием вспоминают времена, когда целые сайты верстались на таблицах. Это вам не email-рассылку сверстать, где из-за особенностей почтовых клиентов семейства Microsoft, все ещё живет понятие «табличная верстка». С развитием мобильных устройств табличная верстка потеряла актуальность, ввиду отсутствия гибкости при перестраивании макетов под маленькие экраны. Но эта статья не о табличной верстке, а о таблицах предназначенных для контента (чисел и текста).
HTML теги у таблиц
Данная таблица состоит из одной строки (tr) и столбца (td), вместе они образуют ячейку и это самый необходимый минимум для валидной таблицы. Тег table
<table>
<tr>
<td>Как сделать таблицу</td>
</tr>
</table>
HTML код таблицы вместе с заголовком
Для создания заголовка есть тег caption, который прописывается внутри table.
<table>
<caption>Заголовок таблицы</caption>
<tr>
<td>ячейка в первом ряду</td>
<td>ячейка в первом ряду</td>
</tr>
<tr>
<td>ячейка во втором ряду</td>
<td>ячейка во втором ряду</td>
</tr>
<tr>
</table>
У таблиц может быть шапка (thead), основная часть (tbody) и подвал (tfoot). Появление в HTML коде тега (thead), тянет за собой тег (tbody). Таким образом мы отделяем шапку от контента. Все три тега могут использоваться только один раз внутри одной таблицы и идти именно в том порядке, как записано ниже. В противном случае верстка будет не валидна. Текст внутри тега
<table>
<thead>
<tr>
<td>шапка таблицы</td>
<td>шапка таблицы</td>
</tr>
</thead>
<tbody>
<tr>
<td>тело таблицы</td>
<td>пустая ячейка</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>пустая ячейка</td>
<td>подвал таблицы</td>
</tr>
</tfoot>
</table>
Объединение ячеек таблицы
Для объединения ячеек таблицы существует два атрибута colspan и rowspan. Атрибут colspan объединяет ячейки по горизонтали, а rowspan — по вертикали.
Объединение по горизонтали
Значение в атрибуте colspan указывает, сколько ячеек по горизонтали нужно объединить.
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">слияние ячеек по горизонтали</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Объединение по вертикали
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="2">слияние ячеек по вертикали</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Если поначалу вы будете испытывать трудности с запоминанием табличных тегов, то существует большое количество генераторов таблиц. Тогда вопрос о том, как сделать таблицу в HTML отпадет.
-
Создано 26.02.2020 10:49:15 -
Михаил Русаков
Создано 26.02.2020 10:49:15
Михаил РусаковДобавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
Создаем самую простую таблицу в HTML.
При создании веб-страниц часто нужно структурировать какую-либо информацию и представить ее в виде таблиц.
В этой заметке я публикую информацию о том, как можно создать самую простую таблицу с помощью HTML.
Работать с таблицами для начинающего веб-разработчика может быть не совсем просто, т.к. нет одного элемента, который сразу бы создал таблицу. Чтобы таблица появилась, нужно использовать целую серию HTML элементов. Самые главные из них рассмотрим прямо сейчас.
Прежде чем начнем, нужно понимать, что составными элементами таблицы являются строки, столбцы(колонки) и ячейки.
Строки располагаются по горизонтали таблицы:
На изображении они выделены зеленым цветом.
Столбцы (колонки) располагаются по вертикали таблицы:
На изображении они выделены красным цветом.
Ячейка — это элемент таблицы, который образуется на пересечении строки и столбца.
На изображении некоторые из них выделены синим цветом.
Самый главный элемент, который создает таблицу — это парный элемент
<table></table>
Но, написав только его никакой таблицы у нас не появиться.
Убедимся в этом здесь:
Для того, чтобы таблица появилась, нужно сообщить браузеру сколько строк и колонок в ней должно быть.
Указание количества строк в таблице производится с помощью элемента <tr></tr>, а указание количества столбцов с помощью элемента <td></td>.
Правило для создания таблицы следующее:
сначала создается одна строка, в ней, по порядку, создаются столбец за столбцом, затем создается следующая строка, в ней также создаются столбцы и.т.д.
Давайте посмотрим, как это будет выглядеть, если создавать таблицу с помощью HTML-кода:
<table> <tr> <td>Столбец 1</td> <td>Столбец 2</td> </tr> <tr> <td>Столбец 1</td> <td>Столбец 2</td> </tr> </table>
Только что мы с вами создали самую простую HTML-таблицу. В таблице есть 2 строки, которые создавались с помощью элемента tr и в каждой строке есть 2 столбца, которые создавались с помощью элемента td.
Единственное, в ней пока еще нет границ, но это уже полноценная таблица. Создание и оформление границ для таблицы — это задача стилей CSS. В разделе по HTML я останавливаться на этом не буду.
Это основы, которые нужно знать для создания таблиц. Попробуйте сами поэкспериментировать с этим и создавать таблицы с разным количеством строк и столбцов.
HTML таблицы основы — Изучение веб-разработки
Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия — строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.
Что такое таблица ?
Таблица — это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например — человек и его возраст, или расписание в плавательном бассейне.
Люди постоянно используют таблицы, причем уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.
Как работает таблица?
Смысл таблицы в том, что она жесткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведенную ниже таблицу и найдите единственное (Singular) личное местоимение, используемое в третьем лице («3rd Person»), с полом (gender) ♀, выступающее в качестве объекта (object) в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
| Subject | Object | |||
|---|---|---|---|---|
| Singular | 1st Person | I | me | |
| 2nd Person | you | you | ||
| 3rd Person | ♂ | he | him | |
| ♀ | she | her | ||
| o | it | it | ||
| Plural | 1st Person | we | us | |
| 2nd Person | you | you | ||
| 3rd Person | they | them | ||
Если правильно представить таблицу HTML, интерпретировать ее данные смогут даже люди, имеющие проблемы со зрением.
Оформление таблиц
Исходный код HTML (HTML source code) вышеприведенной таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведенный в GitHub пример информации о стиле не имеет.
Не питайте ложных иллюзий — чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Styling tables.
В этом разделе мы не фокусируемся на CSS, но все же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти здесь, можно также использовать шаблон HTML, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.
Когда не надо использовать таблицы HTML?
HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для офорления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Поднобнее об этом можно узнать в Page Layouts на Accessibility Learning Module. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда все же попадается.
Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :
- Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
- Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц дает более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
- Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например,
<header>,<section>,<article>, или<div>) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходими принимать дополнительные меры.
Упражение: Ваша первая таблица
Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.
- Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
- Содержимое любой таблицы заключается между двумя тегами :
<table></table>. Добавьте их в тело HTML. - Самым маленьким контейнером в таблице является ячейка, она создается элементом
<td>(‘td’ — сокращение от ‘table data’). Введите внутри тегов table следующее:<td>Hi, I'm your first cell.</td>
- Чтобы получить строку из четырех ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
<td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td>
Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <td> создает отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.
Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <tr> (‘tr’ — сокращение от ‘table row’). Попробуем, как это получится.
- Поместите четыре уже созданных ячейки между тегами
<tr>как здесь показано:<tr> <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td> </tr>
- Теперь, когда одна строка уже есть, добавим еще — каждую строку надо вложить в дополнительный элемент
<tr>, а каждая ячейка должна быть внутриэлемента <td>.
В результате получится таблица, которая будет выглядеть примерно так:
| Hi, I’m your first cell. | I’m your second cell. | I’m your third cell. | I’m your fourth cell. |
| Second row, first cell. | Cell 2. | Cell 3. | Cell 4. |
Добавление заголовков с помощью элементов <th>
Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмем следующий пример. Сначала исходный код:
<table>
<tr>
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Breed</td>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Age</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Owner</td>
<td>Mother-in-law</td>
<td>Me</td>
<td>Me</td>
<td>Sister-in-law</td>
</tr>
<tr>
<td>Eating Habits</td>
<td>Eats everyone's leftovers</td>
<td>Nibbles at food</td>
<td>Hearty eater</td>
<td>Will eat till he explodes</td>
</tr>
</table>Теперь как выглядит таблица:
| Knocky | Flor | Ella | Juan | |
| Breed | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
| Age | 16 | 9 | 10 | 5 |
| Owner | Mother-in-law | Me | Me | Sister-in-law |
| Eating Habits | Eats everyone’s leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |
Проблема в том, что, хотя вы и можете представить, о чем идет речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.
Упражнение: заголовки
Попробуем улучшить эту таблицу.
- Сначала создайте локальную копию dogs-table.html и minimal-table.css в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.
- Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент
<th>(‘th’ сокращение от ‘table header’). Он работает в точности как<td>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своем HTML все элементы<td>, содержащие заголовки, на элементы<th>. - Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.
Для чего нужны заголовки?
Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.
Примечание: По умолчанию к заголовкам таблицы примеряется определенный стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно
Слияние нескольких строк или столбцов
Иногда нам нужно, чтобы ячейки распротранялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
Исходная разметка выглядит так:
<table>
<tr>
<th>Animals</th>
</tr>
<tr>
<th>Hippopotamus</th>
</tr>
<tr>
<th>Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
<tr>
<th>Crocodile</th>
</tr>
<tr>
<th>Chicken</th>
<td>Cock</td>
</tr>
<tr>
<td>Rooster</td>
</tr>
</table>Но результат не такой, как хотелось бы:
| Animals | |
|---|---|
| Hippopotamus | |
| Horse | Mare |
| Stallion | |
| Crocodile | |
| Chicken | Cock |
| Rooster |
Нужно, чтобы «Animals», «Hippopotamus» и «Crocodile» распространялись на два столбца, а «Horse» и «Chicken» — на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты colspan и rowspan, которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, colspan="2" распространяет ячейку на два столбца.
Воспользуемся colspan и rowspan чтобы улучшить таблицу.
- Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
- Затем используйте атрибут
colspanчтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца. - Наконец, используйте атрибут
rowspanчтобы распространить «Horse» и «Chicken» на две строки. - Сохраните код и откройте его в браузере, чтобы увидеть улучшения.
Стилизация столбцов
И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы <col> и <colgroup>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде :nth-child() было бы слишком утомительно.
Возьмем простой пример:
<table>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>Что дает нам:
| Data 1 | Data 2 |
|---|---|
| Calcutta | Orange |
| Robots | Jazz |
Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трех ячеек в столбце (в реальном проекте, возможно, придется вводить class на всех трех и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <col>. Элемент <col> задается в контейнере <colgroup> сразу же за открывающим тегом <table>. Эффект, который мы видели выше, можно задать так:
<table>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент <col> ввести необходимо — иначе к первому столбцу не будет применен стиль.
Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <col> с атрибутом span, таким образом:
<colgroup> <col span="2"> </colgroup>
Подобно colspan и rowspan, span принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.
Упражнение: colgroup и col
Теперь попробуйте сами.
Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподает.
| Mon | Tues | Wed | Thurs | Fri | Sat | Sun | |
|---|---|---|---|---|---|---|---|
| 1st period | English | German | Dutch | ||||
| 2nd period | English | English | German | Dutch | |||
| 3rd period | German | German | Dutch | ||||
| 4th period | English | English | Dutch |
Заново создайте таблицу, проделав указанные ниже действия.
- Сначала создайте локальную копию файла timetable.html в новой папке на вашем копьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
- Добавьте элемент
<colgroup>вверху таблицы, сразу же под тегом<table>, куда вы сможете вставлять элементы<col>. - Первые два столбца надо оставить без стиля..
- Добавьте цвет фона для третьего столбца. Значением атрибута
styleбудетbackground-color:#97DB9A; - Задайте ширину для четвертого столбца.
Значением атрибута styleбудетwidth: 42px; - Добавьте цвет фона для пятого столбца. Значением атрибута
styleбудетbackground-color: #97DB9A; - Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведет новый класс. Значениями атрибута
styleбудут:background-color:#DCC48E; border:4px solid #C1437A; - Последние два дня выходные; значением атрибута style
будет width: 42px;
Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).
Итог
Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.
Назначение таблиц
Таблицы в HTML имеют две функции. Первая — это собственно таблицы, то есть вывод информации в виде таблицы. А вторая — это вёртска страницы. Отдельные части контента размещаются в разных ячейках таблицы и таким образом оказываются в нужном месте страницы. Табличная вёрстка устарела и почти не используется.
Создание таблицы
Рассмотрим, как создать таблицу в HTML. Это делается с помощью тэга <table>. Таблицы состоят из строк, внутри которых находятся ячейки. Эти ячейки и содержат контент таблицы. Тэг <tr> добавляет в таблицу строку, а тэг <td> добавляет в строку ячейку. Не забывайте, что тэги нужно закрывать. Для примера создадим такую таблицу:
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Вот код такой таблицы:
+
8 | <table border="1">
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
</tr>
</table> |
Для того, чтобы были видны рамки таблицы, тэгу <table> был задан атрибут border, но в HTML5 этот атрибут считается устаревшим, и использование его не желательно. Кроме того, есть и другие атрибуты для работы с рамками и изменения фона, а так же у ячеек есть атрибуты для выравнивания контента. Все эти атрибуты также нежелательны, вместо них нужно использовать стили.
Объединение ячеек таблицы
Есть возможность объединить ячейки таблицы в одну. Для этого у тэга <td> есть атрибут colspan, который объединяет ячейки внутри одной строки, а также атрибут rowspan, который объединяет ячейки из разных строк. Значением этих атрибутов является количество объединяемых ячеек.
Создадим такую таблицу:
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| Объединённая ячейка | |
Код такой таблицы выглядит так:
17 | </table>
<table border="1">
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td colspan="2">Объединённая ячейка</td>
</tr></table> |
Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек. Поэтому общее количество ячеек в этой строке будет меньше, чем в других, в данном случае, одна.
Теперь создадим такую таблицу:
| строка 1 ячейка 1 | Объединённая ячейка |
| строка 2 ячейка 1 |
Код у этой таблицы такой:
27 | <table border="1">
<tr>
<td>строка 1 ячейка 1</td>
<td rowspan="2">Объединённая ячейка</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
</tr></table> |
Дополнительные табличные тэги
Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы.
<th> — заголовочная ячейка. Обычно находятся в первой строке таблицы. Используются для создания названия колонки таблицы. От тэга <td> отличается только жирным шрифтом и выравниванием по центру.
<caption> — находится внутри тэга <table>, добавляет заголовок таблицы.
<thead> — cодержит несколько первых строк таблицы для указания особого стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с самой первой строки.
<tbody> — содержит несколько строк таблицы для указания особого стиля. Таких тегов в таблице может быть несколько.
<tfoot> — содержит строки таблицы, которые отобразятся в самом низу таблицы.
<col> — определяет стиль для одной колонки таблицы, начиная с первой. То есть первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает по-разному в разных браузерах.
HTML-таблицы
HTML-таблицы позволяют веб-авторам упорядочивать данные, такие как текст, изображения, ссылки, другие таблицы и т.д. в строки и столбцы ячеек.
HTML-таблицы создаются с помощью тега <table>, в котором тег <tr> используется для создания строк таблицы и тег <td> используется для создания ячеек данных. Элементы под тегом <td> являются регулярными и по умолчанию выровнены по левому краю.
Пример
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html> |
В результате будет получено —
Здесь, border является атрибутом <table> и он использован для того чтобы поставить границы для всех ячеек. Если вам не нужна граница, то вы можете использовать border = «0».
Заголовок таблицы
Заголовок таблицы определяется тегом <th>. Этот тег заменит тег <td>, который используется для представления фактической ячейки данных. Обычно верхняя строка используется в качестве заголовка таблицы, как показано ниже. Заголовки, определенные в теге <th>, по умолчанию центрированы и выделены жирным шрифтом.
<!DOCTYPE html> <html> <head> <title>HTML таблица — заголовок</title> </head> <body> <table border = «1»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>HTML таблица — заголовок</title> </head> <body> <table border = «1»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html> |
В результате будет получено —
Атрибуты Cellpadding и Cellspacing
Атрибута cellpadding и cellspacing используются для корректировки пробелов в ячейках таблицы. Атрибут cellspacing определяет пространство между ячейками таблицы, в то время как cellpadding представляет расстояние между границами ячейки и содержимым внутри ячейки.
<!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = «1» cellpadding = «5» cellspacing = «5»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = «1» cellpadding = «5» cellspacing = «5»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html> |
В результате будет получено —
Атрибуты Colspan и Rowspan
Атрибут colspan используется если надо объединить два или несколько столбцов в один столбец. Подобным образом вы будете использовать свойство rowspan если надо объединить два или более строк.
<!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border = «1»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border = «1»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html> |
В результате будет получено —
Фон таблицы
Фон таблицы можно установить с помощью одного из следующих двух способов −
- атрибут bgcolor − задает цвет фона для всей таблицы или только на одну клетку.
- атрибут background — можно задать фоновый рисунок для всей таблицы или только на одну клетку.
Можно установить цвет границы, используя атрибут bordercolor.
Пример
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» bgcolor = «yellow»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» bgcolor = «yellow»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html> |
В результате будет получено —
Пример использования в качестве фона изображения-
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» background = «/html/images/test.png»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» background = «/html/images/test.png»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html> |
В результате будет получено —
Высота и ширина таблицы
Задать таблице ширину и высоту можно с помощью атрибутов width и height . Ширину или высоту таблицы можно задавать в пикселях или в процентах от доступной области экрана.
<!DOCTYPE html> <html> <head> <title>HTML таблица Width/Height</title> </head> <body> <table border = «1» width = «400» height = «150»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>HTML таблица Width/Height</title> </head> <body> <table border = «1» width = «400» height = «150»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html> |
В результате будет получено —
Заголовок, тело и нижний колонтитул таблицы
Таблицу можно разделить на три части — шапку, тело и футер (окончание). Шапка и футер очень похожи на верхние и нижние колонтитулы в текстовом документе, которые остаются одинаковыми для каждой страницы, в то время как тело является основным держателем содержимого таблицы.
Три элемента для разделения шапки, тела и футера таблицы:
- <thead> − создает отдельный заголовок таблицы.
- <tbody> − указывает на основную часть таблицы.
- <tfoot> − создает отдельную таблицу футер.
Таблица может содержать несколько <tbody> элементов для указания различных страниц или групп данных. Теги <thead> и <tfoot> должны располагаться перед <tbody>
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1» width = «100%»> <thead> <tr> <td colspan = «4»>Это шапка таблицы</td> </tr> </thead> <tfoot> <tr> <td colspan = «4»>Это футер таблицы</td> </tr> </tfoot> <tbody> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </tbody> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1» width = «100%»> <thead> <tr> <td colspan = «4»>Это шапка таблицы</td> </tr> </thead> <tfoot> <tr> <td colspan = «4»>Это футер таблицы</td> </tr> </tfoot> <tbody> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </tbody> </table> </body> </html> |
В результате будет получено —
Вложенная таблица
Можно использовать одну таблицу внутри другой таблицы.
Пример использования другой таблицы и других тегов внутри ячейки таблицы.
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = «1» width = «100%»> <tr> <td> <table border = «1» width = «100%»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = «1» width = «100%»> <tr> <td> <table border = «1» width = «100%»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html> |
Результат будет следующий —
Вложенная таблица
Как создать таблицу в HTML?
Как запустить видеоурок:- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Как сделать таблицу?
Давайте перейдем в код. Не будем тратить время на ерунду и сразу же начнем заниматься нашей табличкой. Открываем страницу about.html. Почему именно about.html – думаю понятно. Страница index.html у нас заполнена и, поэтому, для простоты обзора нашей таблицы, мы будем использовать about.html.
Итак, сначала прописываем таблицу. Прописывается она в тегах <table></table>. Тег <table> может иметь внутри себя теги строк <tr></tr> и теги столбцов <td></td>.
<table> <tr> <td> </td> </tr> </table>
Давайте посмотрим на нашу табличку: она состоит из двух столбцов и трех строк. Так как сначала прописываются строки, а первую строку и первый столбец мы уже прописали, то давайте пропишем второй столбец и еще две строки.
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
Прописали.
Для того, чтобы таблица отображалась, нам нужно задать какое-нибудь значение в ячейках. Это может быть текст или изображение. Введем сначала текст: «1 ячейка», «2 ячейка» , «3 ячейка» , «4 ячейка» , «5 ячейка» , «6 ячейка».
<table> <tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr> <tr> <td>3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td>6 ячейка </td> </tr> </table>
Сохраним документ и проверим в браузере. Как мы видим, задано шесть ячеек. Посмотрим на наш пример снова. Каждая ячейка имеет свой цвет. Цвет можно задать или отдельно для каждой ячейки, или задать фоновый цвет и некоторым ячейкам задать свой цвет. Мы воспользуемся вторым способом. Фоновый цвет у нас будет голубым, так как это наиболее используемый цвет в наших ячейках. А трем ячейкам установим свой цвет.
Как же узнать цвет ячейки? Для этого нам нужно использовать специальную бесплатную программку «Pixel». Она достаточно проста в использовании. Наводим мышь на нужную нам область экрана и копируем с помощью горячих клавиш Ctrl+Alt+C. Скопировали, сворачиваем программу, открываем код и задаем цвет нашей таблице. Цвет, как вы помните, у нас задается с помощью атрибута bgcolor. Не забываем вводить решетку, и вставляем код цвета.
<table bgcolor = "#00D9FA"> <tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr> <tr> <td>3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td>6 ячейка </td> </tr> </table>
Давайте сохраним и проверим снова. Теперь стало больше походить на таблицу, но все же не до конца.
Давайте зададим рамку нашей таблице, а также оставшиеся цвета ячеек. Начнем с цветов. Копируем цвет и задаем его, с помощью того же атрибута, соответствующей ячейке. Проделываем эти действия со второй, третьей и шестой ячейками.
<table bgcolor = "#00D9FA"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем. Посмотрим, что у нас получилось — более-менее. Скачать браузеры вы можете из первого видеоурока по HTML.
Теперь зададим рамку. Рамка задается с помощью атрибута border. Поставим, например, три пикселя.
<table bgcolor = "#00D9FA" border = "3"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Теперь стало видно, что это все-таки у нас таблица.
Давайте зададим цвет нашей рамке. Делается это с помощью атрибута bordercolor. Этот атрибут можно было использовать так же, как в уроке про изображения. Там тоже при ссылках задавалась рамка. Минус данного атрибута – он не поддерживается в браузере Opera. Поэтому далее мы будем тестировать наш сайт в браузере Mozilla Firefox. Итак, зададим цвет нашей рамки, как в примере. Снова воспользуемся программой «Pixel». Наводим курсор на рамку, копируем и вставляем в код.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем, проверяем в браузере Opera. Как видим, ничего не изменилось, поэтому закрываем браузер и открываем нашу страничку в браузере Mozilla Firefox. Как мы видим, цвет у рамки стал серым. Не понятно лишь одно: почему рамка у нас совсем не похожа на ту, которая в примере, и почему в примере ячейки шире.
Давайте зададим ширину и высоту наших ячеек. Для этого используем атрибуты height (высота) и width (ширина). Я задал высоту и ширину 200×200 пикселей. Задаем эти атрибуты для всех ячеек.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td height = "200" width = "200" >5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем, проверяем в браузере Mozilla Firefox. Размер ячеек изменился.
Теперь поработаем над рамкой. Давайте разберемся, что за расстояния у нас получились. На самом деле это у нас не рамка. Рамка – это однопиксельная полоса. А пространство между рамками – это отступ от ячеек. Давайте его уберем, а именно, зададим значение, равное нулю. Прописываем атрибут cellspacing, который означает «расстояние между ячейками». Ставим значение, равное нулю.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td height = "200" width = "200" >5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим. Да, стало значительно красивее.
Имеется похожий на cellspacing атрибут — cellpadding . Их нужно различать. Cellpaddig означает отступ от рамки до содержимого ячейки. Давайте мы его тоже поставим, например, равный трем.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200">4 ячейка </td> </tr> <tr> <td height = "200" width = "200">5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним, обновим. Вот появился наш отступ в три пикселя.
Давайте сделаем так, чтобы наш текст в ячейке отображался по центру. Осуществим это либо с помощью тега <center>, либо с помощью атрибута align. Давайте для первой ячейки зададим с помощью тега <center>, а для остальных – с помощью атрибута align.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td height = "200" width = "200"><center>1 ячейка</center></td> <td align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" >5 ячейка </td> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем. Проверяем. Как мы видим, разницы между двумя способами нет.
Что делать, если возникнет необходимость в том, чтобы текст в ячейке располагался сверху или снизу? Насколько вы помните, мы проходили данный атрибут. Он означает вертикальное выравнивание – vertical align. Перейдем в код, и для первых двух ячеек зададим его. Для первой становим значение top, а для второй – bottom. Насколько мы помним, существует третье значение, которое устанавливается по умолчанию – middle.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td valign = "top" height = "200" width = "200"><center>1 ячейка</center></td> <td valign = "bottom" align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" >5 ячейка </td> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим. Всё получилось.
Сейчас мы немножко поиграем с нашей таблицей. Давайте изменим ее вид: у нас пойдет первая ячейка, длиной в две ячейки, потом идет вторая ячейка, высотой в две ячейки и далее – третья и четвертая ячейки обычного размера. Это можно сделать, просто прописав код с помощью <tr> и <td>, а можно сделать это с использованием специальных атрибутов. Давайте рассмотрим это. Растягиваются наши ячейки с помощью атрибутов colspan и rowspan. Сначала давайте удалим вторую ячейку. Теперь вводим атрибут colspan со значением «2» в первую ячейку. Теперь удалим пятую ячейку, так как, как мы видели на примере, у нас ее не будет. Задаем атрибут rowspan третьей ячейке.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing = "0" cellpadding = "3"> <tr> <td valign = "top" colspan = "2" height = "200" width = "200"><center>1 ячейка</center></td> </tr> <tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим в браузере. У нас получилось так, как мы и задумывали. Хочу заострить ваше внимание на этом пункте, поскольку это довольно важная часть в основе верстки веб-страниц. Поэтому потренируйтесь здесь, а затем нажмите «Play» для продолжения видеоурока.
Как создать вложенные таблицы в HTML?
Сейчас мы займемся такой интересной вещью, как вложенные таблицы. Давайте создадим таблицу в третьей ячейке. Таблица будет состоять из двух столбцов и трех строк, высота которых будет различной: она будет расти от первой строки к последней.
Давайте перейдем в код и найдем третью ячейку. Убираем текст и создаем новую таблицу. Прописываем в ней три строки, а в каждой строке по две ячейки. В первой ячейке будет имя, во второй – число. Например, имя – Олег, число – 10; имя – Дима, число – 9.
<tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995"> <table> <tr> <td>Имя</td> <td>Число</td> </tr> <tr> <td>Олег</td> <td>10</td> </tr> <tr> <td>Дима</td> <td>9</td> </tr> </table> </td> <td align = "center" height = "200" width = "200" >4 ячейка </td> </tr> <tr>
Сохраним нашу работу. Посмотрим в браузере. Как мы видим, у нас появилась таблица, состоящая из двух столбцов и трех строк. Давайте ей тоже зададим рамку в 1 пиксель и высоту. Цвет рамки укажем черным.
<tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995"> <table border = "1" bordercolor = "#000000"> <tr> <td>Имя</td> <td>Число</td> </tr> <tr> <td>Олег</td> <td>10</td> </tr> <tr> <td>Дима</td> <td>9</td> </tr> </table> </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr>
Сохраним и посмотрим, что у нас получилось. Наша задача выполнена, только уберем отступы.
<table border = "1" bordercolor = "#000000" cellspacing = "0">
Проверяем – расстояние между ячейками исчезло. Задача выполнена. Однако, давайте зададим другой цвет нашим ячейкам, например розовый. Зададим всей таблице. Кстати, чтобы задать цвет изображениям, мы используем атрибут background и вводим путь для изображения, если конечно оно вам нужно.
<table bgcolor = "FF00CC" border = "1" bordercolor = "#000000"> <tr height="10"> <td>Имя</td> <td>Число</td> </tr> <tr> <td>Олег</td> <td>10</td> </tr> <tr> <td>Дима</td> <td>9</td> </tr> </table>
Сохраним. Проверим цвет. Всё получилось.
Теперь давайте проверим нашу страничку в браузерах Internet Explorer и Opera. В браузере IE рамка у нас серого цвета, как положено, а в браузере Opera цвет рамки серым не отображается.
Давайте перейдем к домашнему заданию. Домашнее задание будет такое: вам нужно составить табличку, задать цвет каждой ячейке, ширину и высоту 200×200 пикселей, рамку 4 пикселя, убрать расстояние между ячейками, то есть поставить значение, равное нулю, отобразить текст в ячейке по центру, вертикальное выравнивание тоже сделать по центру, то есть посередине, поэкспериментировать с атрибутами colspan, rowspan и посоздавать еще свои таблицы. После этого вы можете переходить в следующий видеоурок, где мы рассмотрим создание сайта на html-таблицах.
Спасибо за внимание. До встречи в следующем видеоуроке, в котором мы рассмотрим табличную верстку сайта!
основ HTML-таблиц — изучение веб-разработки
В этой статье вы познакомитесь с HTML-таблицами, в которых рассматриваются такие основы, как строки и ячейки, заголовки, разделение ячеек на несколько столбцов и строк, а также способы объединения всех ячеек в столбце в целях стилизации.
| Пререквизиты: | Основы HTML (см. Введение в HTML). |
|---|---|
| Цель: | Ознакомиться с таблицами HTML. |
Что такое стол?
Таблица — это структурированный набор данных, состоящий из строк и столбцов ( табличных данных ). Таблица позволяет вам быстро и легко искать значения, которые указывают на некоторую связь между различными типами данных, например, человеком и его возрастом, или днем недели, или расписанием для местного бассейна.
Таблицы очень часто используются в человеческом обществе и используются в течение длительного времени, о чем свидетельствует документ переписи населения США от 1800:
Поэтому неудивительно, что создатели HTML предоставили средства для структурирования и представления табличных данных в Интернете.
Как работает стол?
Смысл стола в том, что он жесткий. Информация легко интерпретируется путем создания визуальных ассоциаций между заголовками строк и столбцов. Например, посмотрите на таблицу ниже и найдите газового гиганта Jovian с 62 лунами. Вы можете найти ответ, связав соответствующие заголовки строк и столбцов.
| Имя | Масса (10 24 кг) | Диаметр (км) | Плотность (кг / м 3 ) | Гравитация (м / с 2 ) | Продолжительность дня (часы) | Расстояние от Солнца (10 6 км) | Средняя температура (° C) | Количество лун | Примечания | ||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Планеты земные | Меркурий | 0.330 | 4,879 | 5427 | 3,7 | 4222,6 | 57,9 | 167 | 0 | Ближайший к Солнцу | |
| Венера | 4,87 | 12,104 | 5243 | 8,9 | 2802,0 | 108,2 | 464 | 0 | |||
| Земля | 5,97 | 12 756 | 5514 | 9.8 | 24,0 | 149,6 | 15 | 1 | Наш мир | ||
| Марс | 0,642 | 6,792 | 3933 | 3,7 | 24,7 | 227,9 | -65 | 2 | Красная планета | ||
| Jovian Planets | Газовые гиганты | Юпитер | 1898 | 142,984 | 1326 | 23.1 | 9,9 | 778,6 | -110 | 67 | Самая большая планета |
| Сатурн | 568 | 120 536 | 687 | 9,0 | 10,7 | 1433,5 | -140 | 62 | |||
| Ледяные великаны | Уран | 86,8 | 51,118 | 1271 | 8.7 | 17,2 | 2872,5 | -195 | 27 | ||
| Нептун | 102 | 49 528 | 1638 | 11,0 | 16,1 | 4495,1 | -200 | 14 | |||
| Карликовые планеты | Плутон | 0,0146 | 2,370 | 2095 | 0,7 | 153.3 | 5906,4 | -225 | 5 | Рассекречена как планета в 2006 году, но это остается спорным. | |
Если все сделано правильно, даже слепые люди могут интерпретировать табличные данные в таблице HTML — успешная таблица HTML должна улучшить восприятие как зрячих, так и слабовидящих пользователей.
Стиль стола
Вы также можете посмотреть живой пример на GitHub! Одна вещь, которую вы заметите, заключается в том, что таблица там выглядит немного более читаемой — это потому, что таблица, которую вы видите выше на этой странице, имеет минимальный стиль, в то время как в версии GitHub применяется более значимый CSS.
Не пребывай в иллюзии; чтобы таблицы были эффективными в Интернете, необходимо предоставить некоторую информацию о стилях с помощью CSS, а также хорошую прочную структуру с помощью HTML. В этом модуле мы фокусируемся на части HTML; чтобы узнать о CSS-части, вы должны посетить нашу статью о таблицах стилей после того, как закончите здесь.
Мы не будем фокусироваться на CSS в этом модуле, но мы предоставили для вас минимальную таблицу стилей CSS, которая сделает ваши таблицы более удобочитаемыми, чем стандартные, которые вы получаете без каких-либо стилей.Вы можете найти здесь таблицу стилей, а также найти HTML-шаблон, который применяет таблицу стилей — все это вместе даст вам хорошую отправную точку для экспериментов с таблицами HTML.
Когда не следует использовать таблицы HTML?
HTML-таблицы должны использоваться для табличных данных — это то, для чего они предназначены. К сожалению, многие люди использовали HTML-таблицы для разметки веб-страниц, например, одна строка содержит заголовок, одна строка содержит столбцы содержимого, одна строка содержит нижний колонтитул и т. д.Вы можете найти более подробную информацию и пример на странице макетов в нашем модуле обучения доступности. Это обычно использовалось, потому что поддержка CSS во всех браузерах была ужасной; макеты таблиц в наше время встречаются гораздо реже, но вы все равно можете увидеть их в некоторых уголках сети.
Короче говоря, использование таблиц для разметки, а не техник разметки CSS — плохая идея. Основными причинами являются следующие:
- Таблицы макетов уменьшают доступность для пользователей с нарушениями зрения : программы чтения с экрана, используемые слепыми людьми, интерпретируют теги, существующие на странице HTML, и считывают содержимое для пользователя.Поскольку таблицы не являются подходящим инструментом для разметки, а разметка является более сложной, чем при использовании методов разметки CSS, вывод программ чтения с экрана будет вводить пользователей в заблуждение.
- Таблицы производят суп-суп из меток : Как упоминалось выше, макеты таблиц обычно включают в себя более сложные структуры разметки, чем надлежащие методы компоновки. Это может привести к тому, что код будет сложнее писать, поддерживать и отлаживать.
- Таблицы не реагируют автоматически : при использовании правильных контейнеров компоновки (таких как
Активное обучение: создание вашего первого стола
Мы достаточно разбирались в теории таблиц, поэтому давайте рассмотрим практический пример и составим простую таблицу.
- Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новом каталоге на вашем локальном компьютере.
- Содержимое каждой таблицы заключено в эти два тега:
<таблица>. Добавьте это внутри тела вашего HTML. - Самый маленький контейнер внутри таблицы — это ячейка таблицы, которая создается элементом
(«td» обозначает «данные таблицы»). Добавьте следующее в теги таблицы: Привет, я твоя первая клетка. - Если нам нужен ряд из четырех ячеек, нам нужно скопировать эти теги три раза.Обновите содержимое таблицы так, чтобы оно выглядело так:
Привет, я твоя первая камера. Я твоя вторая клетка. Я твоя третья клетка. Я твоя четвертая камера. Как вы увидите, ячейки не расположены друг под другом, а автоматически выровнены друг с другом в одном ряду. Каждый элемент
создает одну ячейку, и вместе они составляют первый ряд.Каждая ячейка, которую мы добавляем, увеличивает длину строки. Чтобы остановить рост этой строки и начать размещение последующих ячеек во второй строке, нам нужно использовать элемент
(«tr» означает «строка таблицы»). Давайте исследуем это сейчас. - Поместите четыре ячейки, которые вы уже создали, в теги
, примерно так: Привет, я твоя первая клетка. Я твоя вторая клетка. Я твоя третья клетка. Я твоя четвертая клетка. - Теперь вы сделали одну строку и можете сделать еще одну или две — каждая строка должна быть обернута в дополнительный элемент
, каждая ячейка должна содержаться в . Это должно привести к таблице, которая выглядит примерно так:
Привет, я твоя первая клетка. Я твоя вторая клетка. Я твоя третья клетка. Я твоя четвертая камера. Второй ряд, первая ячейка. Cell 2. Cell 3. Cell 4. Теперь давайте обратим наше внимание на заголовки таблиц — специальные ячейки, которые идут в начале строки или столбца и определяют тип данных, содержащихся в строке или столбце (например, см. Ячейки «Персона» и «Возраст» в первый пример, показанный в этой статье). Чтобы проиллюстрировать, почему они полезны, взгляните на следующий пример таблицы.Сначала исходный код:
<таблица>
& NBSP; Knocky Flor Ella Juan Порода Джек Рассел Пудель Streetdog кокер-спаниель Возраст 16 9 10 5 Владелец теща Me Me Сестры в законе Привычки в еде Съедает все остатки Клев на еду Сердечный едок будет есть, пока он не взорвется Теперь фактическая таблица:
Knocky Flor Элла Хуан Порода Джек Рассел Пудель Streetdog кокер спаниель Возраст 16 9 10 5 владелец теща Me Me Сестра в законе Привычки в еде ест все остатки Клев на еду Сердечный едок будет кушать, пока не взорвется Проблема здесь в том, что, хотя вы можете как-то разобрать, что происходит, справиться с данными не так просто, как могло бы быть.Если бы заголовки столбцов и строк выделялись каким-то образом, это было бы намного лучше.
Давайте попробуем улучшить эту таблицу.
- Сначала создайте локальную копию наших файлов dogs-table.html и minimal-table.css в новом каталоге на вашем локальном компьютере. HTML содержит тот же пример Dogs, что вы видели выше.
- Чтобы распознавать заголовки таблиц как заголовки, как визуально, так и семантически, вы можете использовать элемент
(«th» означает «заголовок таблицы»).Это работает точно так же, как , за исключением того, что оно обозначает заголовок, а не нормальную ячейку. Зайдите в ваш HTML и замените все элементы , окружающие заголовки таблицы, на элементы . - Сохраните ваш HTML и загрузите его в браузер, и вы должны увидеть, что заголовки теперь выглядят как заголовки.
Мы уже частично ответили на этот вопрос — легче найти искомые данные, когда заголовки четко выделяются, а дизайн в целом выглядит лучше.
Примечание : заголовки таблиц поставляются с некоторыми стилями по умолчанию — они выделены жирным шрифтом и центрированы, даже если вы не добавляете собственный стиль в таблицу, чтобы помочь им выделиться.
Заголовки таблицтакже имеют дополнительное преимущество — наряду с атрибутом
scope(о котором мы узнаем в следующей статье), они позволяют вам сделать таблицы более доступными, связав каждый заголовок со всеми данными в одной строке или колонка. Затем программы чтения с экрана могут считывать всю строку или столбец данных одновременно, что довольно полезно.Разрешение ячеек занимать несколько строк и столбцов
Иногда мы хотим, чтобы ячейки занимали несколько строк или столбцов. Возьмите следующий простой пример, который показывает имена обычных животных. В некоторых случаях мы хотим показывать имена самцов и самок рядом с именем животного. Иногда мы этого не делаем, и в таких случаях мы просто хотим, чтобы имя животного охватывало всю таблицу.
Начальная разметка выглядит так:
<таблица>
<Й> Животные <Й> Бегемот <Й> Лошадь Mare Жеребец <Й> Крокодил <Й> Chicken Курица Петух Но вывод не дает нам то, что мы хотим:
Животные Бегемот Лошадь Mare Жеребец Крокодил Курица Курица Петух Нам нужен способ, чтобы «Животные», «Бегемот» и «Крокодил» располагались в двух столбцах, а «Лошадь» и «Цыпленок» — в двух рядах вниз.К счастью, заголовки и ячейки таблиц имеют атрибуты
colspanиrowspan, которые позволяют нам делать именно эти вещи. Оба принимают значение числа без единиц, которое равно числу строк или столбцов, которые вы хотите охватить. Например,colspan = "2"создает ячейку с двумя столбцами.Давайте используем
colspanиrowspanдля улучшения этой таблицы.- Сначала сделайте локальную копию наших animals-table.html и minimal-table.CSS-файлы в новом каталоге на вашем локальном компьютере. HTML-код содержит тот же пример животных, что вы видели выше.
- Затем используйте
colspan, чтобы «Животные», «Бегемот» и «Крокодил» охватывали две колонки. - Наконец, используйте
rowspan, чтобы «Horse» и «Chicken» охватывали два ряда. - Сохраните и откройте свой код в браузере, чтобы увидеть улучшение.
Обеспечение общего стиля для столбцов
Есть еще одна особенность, о которой мы расскажем в этой статье, прежде чем двигаться дальше.В HTML есть метод определения информации о стилях для всего столбца данных в одном месте —
или в столбце, или использовать сложный селектор например : nth-child ().Возьмем следующий простой пример:
<таблица>
Данные 1 Данные 2 Calcutta Orange Роботы Jazz Что дает нам следующий результат:
Данные 1 Данные 2 Калькутта оранжевый Роботы Джаз Это не идеально, так как мы должны повторить информацию о стилях для всех трех ячеек в столбце (у нас, вероятно, будет
, класс, установленный для всех трех в реальном проекте, и мы зададим стиль в отдельной таблице стилей).Вместо этого мы можем указать информацию один раз для элемента. Мы могли бы создать тот же эффект, что и выше, указав нашу таблицу следующим образом:
<таблица>
<Цв> <Цв> Данные 1 Данные 2 Calcutta Orange Роботы Jazz По сути, мы определяем два «столбца стиля», один из которых задает информацию о стиле для каждого столбца.Мы не стилизуем первый столбец, но мы все равно должны включить пустой
элемент— если бы мы этого не сделали, стилизация была бы применена только к первому столбцу.Если бы мы хотели применить информацию о стилях к обоим столбцам, мы могли бы просто включить один элемент
Точно так же, как
colspanиrowspan,spanпринимает значение числа без единиц, которое указывает количество столбцов, к которым вы хотите применить стиль.Активное обучение: colgroup и col
Теперь пришло время попробовать себя.
Ниже вы можете увидеть расписание учителя языка. В пятницу у нее новый класс, где весь день преподают нидерландский язык, но она также преподает немецкий в течение нескольких периодов во вторник и четверг. Она хочет выделить столбцы, содержащие дни, которые она преподает.
Создайте таблицу заново, выполнив следующие действия.
- Сначала сделайте локальную копию нашего расписания.HTML-файл в новом каталоге на вашем локальном компьютере. HTML-код содержит ту же таблицу, которую вы видели выше, за исключением информации о стиле столбца.
- Добавьте элемент
<таблица>, в который вы можете добавить свои элементы - Первые два столбца необходимо оставить без стилей.
- Добавить цвет фона в третий столбец. Значение атрибута в стиле
-: цвет фона: # 97DB9A; - Установите отдельную ширину в четвертом столбце.Значение атрибута
в стиле- ширина: 42 пикселя; - Добавить цвет фона в пятом столбце. Значение атрибута в стиле
-: цвет фона: # 97DB9A; - Добавьте другой цвет фона плюс рамку к шестому столбцу, чтобы показать, что это особенный день, и она преподает новый класс. Значения для вашего атрибута в стиле
: цвет фона: # DCC48E; граница: 4px solid # C1437A; - Последние два дня являются выходными днями, поэтому просто установите для них цвет фона, а не ширину; значение атрибута
стиля- ширина: 42 пикселя;
Посмотрите, как вы справляетесь с примером.Если вы застряли или хотите проверить свою работу, вы можете найти нашу версию на GitHub как schedule-fixed.html (смотрите также вживую).
Резюме
Это почти завершает основы таблиц HTML. В следующей статье мы рассмотрим некоторые более продвинутые функции таблиц и начнем думать, насколько они доступны для людей с нарушениями зрения.
,Как создать таблицу HTML
- Программирование
- Как создать таблицу HTML
Автор Steve Suehring, Janet Valade
При создании веб-страниц вам необходимо знать, как добавлять различные типы данных и элементов, включая таблицы. Чтобы создать веб-страницу с таблицей, выполните следующие действия:
Откройте ваш текстовый редактор.
В текстовом редакторе создайте новый текстовый документ.
Большинство текстовых редакторов для начала откроют пустой или пустой документ. Если у вас есть что-то в документе, очистите его, прежде чем продолжить.
Введите следующий HTML-код:
<Голова>
Моя первая веб-страница </ title> </ HEAD> <Тело> <div> Моя таблица </ h2> <Таблица> <TR> <th> код аэропорта </ th> <th> Общее имя / Город </ th> </ TR> <TR> <TD> CWA </ TD> <td> Центральный аэропорт Висконсина </ td> </ TR> <TR> <TD> ORD </ TD> <td> Чикаго О'Хара </ td> </ TR> <TR> <TD> LHR </ TD> <td> Лондон Хитроу </ td> </ TR> </ Table> </ Body> </ html> </pre></li><li><p> Сохраните файл как таблицу.HTML.</p><p> Сохраните файл с расширением .html. Файл должен быть сохранен в корне вашего документа.</p><p></p></li><li><p> Просмотр файла в вашем браузере.</p><p> Откройте веб-браузер и введите <b> http: //localhost/table.html </b> в адресную строку. Это покажет страницу, подобную этой.</p><p></p><p> Обратите внимание, что у стола нет границ вокруг. Если вы хотите добавить границы, продолжайте работать в этом упражнении.</p></li><li><p> Открытый стол.HTML в вашем текстовом редакторе.</p><p> Если вы закрыли текстовый редактор, откройте его снова и загрузите table.html.</p></li><li><p> Измените код в table.html на следующий:</p><pre> <! Doctype html> <HTML> <Голова> <title> Моя первая веб-страница </ title> </ HEAD> <Тело> <div> Моя таблица </ h2> <table <b> border = "1" </b>> <TR> <th> код аэропорта </ th> <th> Общее имя / Город </ th> </ TR> <TR> <TD> CWA </ TD> <td> Центральный аэропорт Висконсина </ td> </ TR> <TR> <TD> ORD </ TD> <td> Чикаго О'Хара </ td> </ TR> <TR> <TD> LHR </ TD> <td> Лондон Хитроу </ td> </ TR> </ Table> </ Body> </ html> </pre><p> Обратите внимание, что единственным изменением является добавление пробела и затем border = ”1 ″ в элементе<table>.</p></li><li><p> Перезагрузите table.html в вашем браузере.</p><p> Если вы закрыли браузер, снова откройте его и перейдите по адресу <b> http: //localhost/table.html </b>. Если ваш браузер все еще открыт, нажмите Ctrl + R, чтобы обновить страницу (Ctrl + R на Mac). Теперь вы видите рамку вокруг стола, как показано здесь.</p><p></p></li></ol><h5><span class="ez-toc-section" id="i-26"> Об авторе книги </span></h5><p> <b> Стивен Сюринг </b> - технологический архитектор и автор или редактор нескольких популярных технологических книг.Джанет Валаде - технический писатель, веб-дизайнер, программист и системный аналитик. Она провела различные технические семинары и написала несколько книг, в том числе <i> PHP & MySQL для чайников, 4-е издание </i>.</p> ,<div> HTML-тег таблицы</h2> <br/><h4><span class="ez-toc-section" id="i-27"> Пример </span></h4><p> Простая таблица HTML, содержащая два столбца и две строки:</p><p> <таблица> <br/><tr> <br/><th> месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> январь </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/> </ Table></p> Попробуй сам "<p> Ниже приведены примеры "Попробуйте сами".</p><hr/><h3><span class="ez-toc-section" id="i-28"> Определение и использование </span></h3><p> Тег <code><table> </code> определяет таблицу HTML.</p><p> HTML-таблица состоит из одного <code> элемента<table> </code> и одного или нескольких<tr>, элементы<th> и<td>.</p><p> Элемент<tr> определяет строку таблицы, элемент<th> определяет заголовок таблицы и Элемент<td> определяет ячейку таблицы.</p><p> HTML-таблица может также включать<caption>,<colgroup>,<thead>, элементы<tfoot> и<tbody>.</p><hr/><h3><span class="ez-toc-section" id="i-29"> Поддержка браузера </span></h3><table><tr><th> Элемент</th><th title="Chrome"/><th title="Internet Explorer / Edge"/><th title="Firefox"/><th title="Safari"/><th title="Opera"/></tr><tr><td> <таблица></td><td> да</td><td> да</td><td> да</td><td> да</td><td> да</td></tr></table><hr/><h3><span class="ez-toc-section" id="i-30"> Глобальные атрибуты </span></h3><p> Тег <code><table> </code> также поддерживает глобальные атрибуты в HTML.</p><hr/><h3><span class="ez-toc-section" id="i-31"> Атрибуты события </span></h3><p> Тег <code><table> </code> также поддерживает атрибуты событий в HTML.</p><hr/><hr/><h3><span class="ez-toc-section" id="i-32"> Дополнительные примеры </span></h3><h4><span class="ez-toc-section" id="i-33"> Пример </span></h4><p> Как добавить свернутые границы в таблицу (с помощью CSS):</p> <br/> <br/> <br/> таблица, тыс. Т {<br/> граница: 1px solid черный; <br/> граница-коллапс: коллапс; <br/>} <br/> <br/><p> <таблица> <br/><tr> <br/><th> Месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> января </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/><tr> <br/><td> февраль </ td> <br/><td> 80 долларов </ td> <br/> </ tr> <br/> </ table></p><p> </ body> <br/> </ html></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-34"> Пример </span></h4><p> Как выровнять таблицу по правому краю (с помощью CSS):</p><p> <таблица> <br/><tr> <br/><th> Месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> января </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/><tr> <br/><td> февраль </ td> <br/><td> 80 долларов </ td> <br/> </ tr> <br/> </ table></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-35"> Пример </span></h4><p> Как выровнять таблицу по центру (с помощью CSS):</p> <br/> <br/> <br/> таблица, тыс. Т {<br/> граница: 1px solid черный; <br/>} <br/> табл.центр {<br/> поле слева: авто; <br/> поле справа: авто; <br/>} <br/> <br/><p> <таблица > <br/><tr> <br/><th> Месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> января </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/><tr> <br/><td> февраль </ td> <br/><td> 80 долларов </ td> <br/> </ tr> <br/> </ table></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-36"> Пример </span></h4><p> Как добавить цвет фона в таблицу (с помощью CSS):</p><p> <таблица> <br/><tr> <br/><th> Месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> января </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/><tr> <br/><td> февраль </ td> <br/><td> 80 долларов </ td> <br/> </ tr> <br/> </ table></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-37"> Пример </span></h4><p> Как добавить отступы к таблице (с помощью CSS):</p> <br/> <br/> <br/> таблица, тыс. Т {<br/> граница: 1px solid черный; <br/>}<p> th, td {<br/> padding: 10px; <br/>} <br/> </ style> <br/> </ head> <br/><body></p><p><table> <br/><tr> <br/><th> Месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> января </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/><tr> <br/><td> февраль </ td> <br/><td> 80 долларов </ td> <br/> </ tr> <br/> </ table></p><p> </ body> <br/> </ html> <br/></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-38"> Пример </span></h4><p> Как установить ширину таблицы (с помощью CSS):</p><p> <таблица> <br/><tr> <br/><th> Месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> января </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/><tr> <br/><td> февраль </ td> <br/><td> 80 долларов </ td> <br/> </ tr> <br/> </ table></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-39"> Пример </span></h4><p> Как создать заголовок таблицы:</p><p><table> <br/><tr> <br/><th> Name </ th> <br/><th> Электронная почта </ th> <br/><th> Телефон </ th> <br/> </ tr> <br/><tr> <br/><td> Джон Доу </ td> <br/><TD> джон.doe@example.com </ td> <br/><td> 123-45-678 </ td> <br/> </ tr> <br/> </ table></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-40"> Пример </span></h4><p> Как создать таблицу с подписью:</p><p> <таблица> <br/><caption> Ежемесячная экономия </ caption> <br/><tr> <br/><th> Месяц </ th> <br/><th> Экономия </ th> <br/> </ tr> <br/><tr> <br/><td> января </ td> <br/><td> $ 100 </ td> <br/> </ tr> <br/><tr> <br/><td> февраль </ td> <br/><td> 80 долларов </ td> <br/> </ tr> <br/> </ table></p> Попробуй сам "<h4><span class="ez-toc-section" id="i-41"> Пример </span></h4><p> Как определить ячейки таблицы, которые занимают более одной строки или одного столбца:</p><p><table> <br/><tr> <br/><th> Name </ th> <br/><th> Электронная почта </ th> <br/><th colspan = "2"> Телефон </ th> <br/> </ tr> <br/><tr> <br/><td> Джон Доу </ td> <br/><TD> джон.doe@example.com </ td> <br/><td> 123-45-678 </ td> <br/><td> 212-00-546 </ td> <br/> </ tr> <br/> </ table></p> Попробуй сам "<hr/><h3><span class="ez-toc-section" id="i-42"> Связанные страницы </span></h3><p> Учебник по HTML: Таблицы HTML</p><p> HTML DOM ссылка: Объект таблицы</p><p> Учебник CSS: таблицы стилей</p><hr/><h3><span class="ez-toc-section" id="_CSS"> Настройки CSS по умолчанию </span></h3><p> Большинство браузеров отображают элемент <code> <таблица> </code> со следующими значениями по умолчанию:</p><h4><span class="ez-toc-section" id="i-43"> Пример </span></h4><p> таблица {<br/> дисплей: таблица; <br/> пограничный коллапс: отдельный; <br/> межстрочный интервал: 2 пикселя; <br/> цвет бордюра: серый; <br/>}</p> Попробуй сам " ,<h2><span class="ez-toc-section" id="_Table">: элемент Table - веб-технология для разработчиков </span></h2><p> <strong> HTML <code><table> </code> элемент </strong> представляет табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.</p><p> Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.</p><table><tbody><tr><th scope="row"> Категории контента</th><td> Поток</td></tr><tr><th scope="row"> Разрешенное содержание</th><td> В этом порядке:<ol><li> необязательный элемент <code><caption> </code>,</li><li> ноль или более <code><colgroup> </code> элементов,</li><li> необязательный элемент <code><thead> </code>,</li><li> одно из следующих:<ul><li> ноль или более <code><tbody> </code> элементов</li><li> один или несколько <code><tr> </code> элементов</li></ul></li><li> дополнительный элемент <code><tfoot> </code></li></ol></td></tr><tr><th scope="row"> Пропуск метки</th><td> Нет, начальный и конечный тег обязательны.</td></tr><tr><th scope="row"> Разрешенные родители</th><td> Любой элемент, который принимает содержимое потока</td></tr><tr><th scope="row"> Неявная роль ARIA</th><td> <code> стол </code></td></tr><tr><th scope="row"> Разрешенные роли ARIA</th><td> Любой</td></tr><tr><th scope="row"> DOM интерфейс</th><td> <code> HTMLTableElement </code></td></tr></tbody></table><h3><span class="ez-toc-section" id="i-44"> Атрибуты </span></h3><p> Этот элемент включает в себя глобальные атрибуты.</p><h4><span class="ez-toc-section" id="i-45"> Устаревшие атрибуты </span></h4><dl><dt> <strong> <code> выровнять </code> </strong> <i> </i></dt><dd><p> Этот перечисляемый атрибут указывает, как таблица должна быть выровнена внутри содержащего документ.Может иметь следующие значения:</p><ul><li> <code>, слева </code>: таблица отображается с левой стороны документа;</li><li> <code> по центру </code>: таблица отображается в центре документа;</li><li> <code> справа </code>: таблица отображается с правой стороны документа.</li></ul><p> Установите <code> margin-left </code> и <code> margin-right </code> на <code> auto </code> или <code> margin </code> на <code> 0 auto </code> для достижения эффекта, аналогичного атрибуту выравнивания.</p></dd><dt> <strong> <code> bgcolor </code> </strong> <i> </i></dt><dd><p> Цвет фона таблицы. Это шестизначный шестнадцатеричный код RGB с префиксом «<code> # </code>». Также можно использовать один из предопределенных цветов.</p><p> Для достижения аналогичного эффекта используйте свойство CSS <code> background-color </code>.</p></dd><dt> <strong> <code> граница </code> </strong> <i> </i></dt><dd><p> Этот целочисленный атрибут определяет в пикселях размер кадра, окружающего таблицу.Если установлено в 0, атрибут <code> кадра </code> устанавливается в void.</p><p> Для достижения аналогичного эффекта используйте сокращенное свойство CSS <code> border </code>.</p></dd><dt> <strong> <code> сотовый телефон </code> </strong> <i> </i></dt><dd><p> Этот атрибут определяет пространство между содержимым ячейки и ее границей, отображается или нет. Если длина cellpadding определена в пикселях, это пространство размером в пиксель будет применено ко всем четырем сторонам содержимого ячейки. Если длина определяется с использованием процентного значения, содержимое будет отцентрировано, и общее вертикальное пространство (сверху и снизу) будет представлять это значение.То же самое верно для всего горизонтального пространства (слева и справа).</p><p> Для достижения аналогичного эффекта примените свойство <code> border-collapse </code> к элементу <code><table> </code> с его значением, установленным на сжатие, а свойство <code> padding </code> к элементам <code><td> </code>.</p></dd><dt> <strong> <code> cellspacing </code> </strong> <i> </i></dt><dd><p> Этот атрибут определяет размер пространства между двумя ячейками в процентах или пикселях.Атрибут применяется как по горизонтали, так и по вертикали, к пространству между верхней частью таблицы и ячейками первой строки, слева от таблицы и первым столбцом, справа от таблицы, последним столбцом и нижней частью таблицы. таблица и последний ряд.</p><p> Для достижения аналогичного эффекта примените свойство <code> border-spacing </code> к элементу <code><table> </code>. <code> интервал границы </code> не имеет никакого эффекта, если <code> бордюрный коллапс </code> настроен на коллапс.</p></dd><dt> <strong> <code> кадр </code> </strong> <i> </i></dt><dd><p> Этот перечисляемый атрибут определяет, какая сторона рамки, окружающей таблицу, должна отображаться.</p><p> Для достижения аналогичного эффекта используйте свойства </code> в стиле границы <code> и ширину </code> в виде границы <code>.</p></dd><dt> <strong> <code> правила </code> </strong> <i> </i></dt><dd><p> Этот перечисляемый атрибут определяет, где правила, то есть строки, должны появляться в таблице.Может иметь следующие значения:</p><ul><li> <code> нет </code>, что означает, что никакие правила не будут отображаться; это значение по умолчанию;</li><li> <code> группы </code>, что приведет к отображению правил между группами строк (определенными <code><thead> </code>, <code><tbody> </code> и <code><tfoot> </code> элементами) и между группами столбцов (определенными <code><col Только> </code> и <code> (<colgroup> </code> элементов);</li><li> <code> строки </code>, что приведет к отображению правил между строками;</li><li> <code> столбцы </code>, которые приведут к отображению правил между столбцами;</li><li> <code> все </code>, что приведет к отображению правил между строками и столбцами.</li></ul><p> Для достижения аналогичного эффекта примените свойство <code> border </code> к соответствующим элементам <code><thead> </code>, <code><tbody> </code>, <code><tfoot> </code>, <code><col> </code> или <code><colgroup> </code>.</p></dd><dt> <strong> <code> резюме </code> </strong> <i> </i></dt><dd> Этот атрибут определяет альтернативный текст, который суммирует содержание таблицы. Вместо этого используйте элемент <code><caption> </code>.</dd><dt> <strong> <code> ширина </code> </strong> <i> </i></dt><dd><p> Этот атрибут определяет ширину таблицы. Вместо этого используйте свойство CSS <code> width </code>.</p></dd></dl><h3><span class="ez-toc-section" id="i-46"> Примеры </span></h3><h4><span class="ez-toc-section" id="i-47"> Простая таблица </span></h4><pre> <таблица> <TR> <TD> John </ TD> <TD> Doe </ TD> </ TR> <TR> <TD> Джейн </ TD> <TD> Doe </ TD> </ TR> </ Table> </pre><h4><span class="ez-toc-section" id="i-48"> Дополнительные примеры </span></h4><pre> <p> Простая таблица с заголовком </ p> <Таблица> <TR> <th> Имя </ th> <th> Фамилия </ th> </ TR> <TR> <TD> John </ TD> <TD> Doe </ TD> </ TR> <TR> <TD> Джейн </ TD> <TD> Doe </ TD> </ TR> </ Table> <p> Таблица с thead, tfoot и tbody </ p> <Таблица> <THEAD> <TR> <th> Заголовок 1 </ th> <th> Заголовок 2 </ th> </ TR> </ THEAD> <TBODY> <TR> <td> Содержание тела 1 </ td> <td> Содержание тела 2 </ td> </ TR> </ TBODY> <TFOOT> <TR> <td> Содержание нижнего колонтитула 1 </ td> <td> Содержание нижнего колонтитула 2 </ td> </ TR> </ TFOOT> </ Table> <p> Таблица с колгруппой </ p> <Таблица> <colgroup span = "4"> </ colgroup> <TR> <Й> Страна </ е> <Й> Столица </ е> <Й> Население </ й> <Й> Язык </ е> </ TR> <TR> <TD> США </ TD> <td> Вашингтон, Д.С. </ TD> <td> 309 миллионов </ td> <TD> английский </ TD> </ TR> <TR> <TD> Швеция </ TD> <TD> Стокгольм </ TD> <td> 9 миллионов </ td> <TD> Swedish </ TD> </ TR> </ Table> <p> Таблица с colgroup и col </ p> <Таблица> <COLGROUP> <Цв> <col span = "2"> </ COLGROUP> <TR> <Й> Известь </ е> <Й> Лимон </ й> <Й> Orange </ е> </ TR> <TR> <TD> Green </ TD> <TD> Желтый </ TD> <TD> Orange </ TD> </ TR> </ Table> <p> Простая таблица с заголовком </ p> <Таблица> <caption> Потрясающая подпись </ caption> <TR> <td> Потрясающие данные </ td> </ TR> </ Table> </pre><pre> стол { коллапс границы: коллапс; интервал границы: 0px; } стол, тд, тд { обивка: 5px; граница: 1px сплошной черный; } </pre><h3><span class="ez-toc-section" id="i-49"> Проблемы доступности </span></h3><h4><span class="ez-toc-section" id="i-50"> Подписи </span></h4><p> Предоставляя элемент </code><caption> <code>, значение которого четко и кратко описывает назначение таблицы, он помогает людям решить, нужно ли им читать остальную часть содержимого таблицы или пропустить ее.</p><p> Это помогает людям ориентироваться с помощью вспомогательных технологий, таких как программа чтения с экрана, люди с плохим зрением и люди с когнитивными проблемами.</p><h4><span class="ez-toc-section" id="i-51"> Обозначение строк и столбцов </span></h4><p> Атрибут <code> области действия <code> в элементах заголовка является избыточным в простом контексте, поскольку область действия выводится. Однако некоторые вспомогательные технологии могут не сделать правильные выводы, поэтому указание области заголовка может улучшить взаимодействие с пользователем. В сложных таблицах можно указать область действия, чтобы предоставить необходимую информацию о ячейках, связанных с заголовком.</p><h5><span class="ez-toc-section" id="i-52"> Пример </span></h5><pre> <таблица> <caption> Имена и значения цветов </ caption> <TBODY> <TR> <th scope = "col"> Имя </ th> <th scope = "col"> HEX </ th> <th scope = "col"> HSLa </ th> <th scope = "col"> RGBa </ th> </ TR> <TR> <th scope = "row"> Teal </ th> <TD> <код> # 51F6F6 </ код> </ TD> <td> <code> hsla (180, 90%, 64%, 1) </ code> </ td> <td> <code> rgba (81, 246, 246, 1) </ code> </ td> </ TR> <TR> <th scope = "row"> Goldenrod </ th> <TD> <код> # F6BC57 </ код> </ TD> <td> <code> hsla (38, 90%, 65%, 1) </ code> </ td> <td> <code> rgba (246, 188, 87, 1) </ code> </ td> </ TR> </ TBODY> </ Table> </pre><p> Предоставление объявления <code> scope = "col" </code> для элемента <code> <9> 5000 поможет описать, что ячейка находится в верхней части столбца.Предоставление объявления <code> scope = "row" </code> для элемента <code><th> </code> поможет описать, что ячейка является первой в строке.</p><h4><span class="ez-toc-section" id="i-53"> Сложные таблицы </span></h4><p> Вспомогательные технологии, такие как программы чтения с экрана, могут испытывать трудности при разборе таблиц, которые настолько сложны, что ячейки заголовков не могут быть связаны строго горизонтально или вертикально. На это обычно указывает наличие атрибутов <code> colspan </code> и <code> rowspan </code>.</p><p> В идеале рассмотрим альтернативные способы представления содержимого таблицы, в том числе разбиение его на набор небольших связанных таблиц, на которые не нужно полагаться при использовании атрибутов <code> colspan </code> и <code> rowspan </code>.Помимо помощи людям, использующим вспомогательные технологии, для понимания содержания таблицы, это также может помочь людям с когнитивными проблемами, которые могут испытывать затруднения при понимании ассоциаций, описываемых макетом таблицы.</p><p> Если таблица не может быть разбита на части, используйте комбинацию атрибутов заголовков </code> идентификатора <code> и <code> с идентификатором <code>, чтобы программно связать каждую ячейку таблицы с заголовком (заголовками), с которым связана ячейка.</p><h3><span class="ez-toc-section" id="i-54"> Технические характеристики </span></h3><h3><span class="ez-toc-section" id="i-55"> Совместимость браузера </span></h3> Обновление данных о совместимости GitHub<table><thead><tr><td/><th colspan="6"> Рабочий стол</th><th colspan="6"> Мобильный</th></tr><tr><td/><th> Chrome</th><th> Edge</th><th> Firefox</th><th> Internet Explorer</th><th> Opera</th><th> Safari</th><th> Android-веб-браузер</th><th> Chrome для Android 9009 90x5 для Android <abbr title="Full support"> Chrome для Android 9009x 905</th><th> Opera для Android</th><th> Safari на iOS</th><th> Samsung Интернет</th></tr></thead><tbody><tr><th scope="row"> <code> таблица </code></th><td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> выровнять </code></th><td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> bgcolor </code></th><td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> бордюр </code></th><td> хром <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> сотовый телефон </code></th><td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> cellspacing </code></th><td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> рамка </code></th><td> хром <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> правила </code></th><td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> резюме </code></th><td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr><tr><th scope="row"> <code> ширина </code></th><td> Хром <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Edge <abbr title="Full support"> Полная поддержка </abbr> 12</td><td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> IE <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Опера <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 1</td><td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 18</td><td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 4</td><td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> Да</td><td> Samsung Интернет Android <abbr title="Full support"> Полная поддержка </abbr> 1.0</td></tr></tbody></table><h4><span class="ez-toc-section" id="i-56"> Легенда </span></h4><dl><dt> <abbr title="Full support"> Полная поддержка </abbr></dt><dd> Полная поддержка</dd><dt> <abbr title="Deprecated. Not for use in new websites."> Устаревший. Не для использования на новых сайтах. <i/> </abbr></dt><dd> Устаревший. Не для использования на новых сайтах.</dd></dl><h3><span class="ez-toc-section" id="i-57"> См. Также </span></h3><ul><li> CSS-свойства, которые могут быть особенно полезны для стилизации элемента <code><table> </code>:</li></ul><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div><footer class="entry-footer"> <span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span></footer></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/otkryvayu-ya-otkryvayu-straniczu-s-pomoshhyu-prilozheniya-brauzer-huawei-no-ona-okazyvaetsya-pustoj.html" rel="prev">Открываю: Я открываю страницу с помощью приложения Браузер Huawei, но она оказывается пустой</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/kak-pridumat-psevdonim-iz-imeni-i-familii-kak-pridumat-krasivyj-psevdonim-niknejm.html" rel="next">Как придумать псевдоним из имени и фамилии – «Как придумать красивый псевдоним «никнейм»?»</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/html-kak-sdelat-tablicu-sozdaem-tablicu-na-html-stranice-webcodius.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='6209' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div></section><footer class="wrapper wrap-footer"><section class="wrapper footer-widget"><div class="container"><div class="row"></div></div></section><section id="colophon" class="wrapper site-footer" ><div class="container"><div class="row"><div class="xs-12 col-sm-6 col-md-6"><div class="site-info"><p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong> Использование материалов сайта разрешено и <br>всячески приветствуется при одном условии:<br> <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс!</p></div></div><div class="xs-12 col-sm-6 col-md-6"><div class="footer-menu"><nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu"><div class="menu-footer-menu-container"></div></nav></div></div></div></div></section></footer> <a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a></div><div style="display:none"></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://forjobathome.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://forjobathome.ru/wp-content/cache/autoptimize/js/autoptimize_a7d4feca2d89c58dac9237efbc34beb5.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="0d8adf3953bf89dc4d75dede-|49" defer></script>
- Теперь вы сделали одну строку и можете сделать еще одну или две — каждая строка должна быть обернута в дополнительный элемент
- Если нам нужен ряд из четырех ячеек, нам нужно скопировать эти теги три раза.Обновите содержимое таблицы так, чтобы оно выглядело так: