Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

HTML таблицы


Пример таблицы HTML

Число Имя Фамилия Точки
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Определение HTML таблицы

пример

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Попробуй сам "

Объяснение примера:

Таблицы определяются с <table> тег.

Таблицы разделены на строки таблицы с <tr> тега.

Строки таблицы разделены на таблицы данных с <td> тега.

Строка таблицы также могут быть разделены на таблицы заголовков с <th> тега.

Таблица данных <td> являются контейнеры данных таблицы.
Они могут содержать все виды HTML элементов, таких как текст, изображения, списки, другие таблицы и т.д.


HTML Стол с пограничной Attribute

Если вы не указали границы для таблицы, она будет отображаться без границ.

Граница может быть добавлена с помощью border атрибута:

пример

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Попробуй сам "

border атрибут находится на пути из стандарта HTML! Лучше использовать CSS.

Для добавления границ, используйте свойство CSS границы:

пример

table, th, td {
    border: 1px solid black;
}
Попробуй сам "

Не забудьте определить границы как для таблицы и ячеек таблицы.


HTML таблица с рухнувшей границ

Если вы хотите границы , чтобы свернуть в одну границу, добавить CSS border-collapse :

пример

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
Попробуй сам "

HTML таблица с Cell Padding

Сотовая обивка определяет пространство между содержимым ячейки и ее границами.

Если вы не укажете отступы, то ячейки таблицы будут отображаться без заполнения.

Для того, чтобы установить отступы, используйте CSS padding свойства:

пример

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
Попробуй сам "

HTML Таблица заголовков

Таблица заголовков определяются с <th> тега.

По умолчанию, все основные браузеры отображают заголовки таблиц жирным шрифтом и по центру:

пример

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Попробуй сам "

Для выравнивания влево заголовки таблицы, используйте CSS text-align свойства:

пример

th {
    text-align: left;
}
Попробуй сам "

HTML таблица с границами Spacing

Расстояние между границами определяет пространство между клетками.

Для того, чтобы установить интервал границы для таблицы, используйте CSS border-spacing свойства:

пример

table {
    border-spacing: 5px;
}
Попробуй сам "

Если таблица разрушилась границы, границы расстояние не имеет никакого эффекта.


Ячейки таблицы, которые охватывают много столбцов

Для того, чтобы промежуток ячейки более одного столбца, используйте colspan атрибут:

пример

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
Попробуй сам "

Ячейки таблицы, которые охватывают большое количество строк

Для того, чтобы промежуток клеток более чем в одной строке, используйте rowspan атрибут:

пример

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
Попробуй сам "

HTML Таблица С пояснением

Чтобы добавить заголовок к таблице, используйте <caption> тег:

пример

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Попробуй сам "

<caption> тег должен быть вставлен сразу после <table> тега.


Специальный стиль для одной таблицы

Для того, чтобы определить специальный стиль для специальной таблицы, добавьте id атрибут в таблицу:

пример

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Теперь вы можете определить специальный стиль для этой таблицы:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
Попробуй сам "

И добавить больше типов:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
Попробуй сам "

Краткое содержание главы

  • Используйте HTML <table> элемент для определения таблицы
  • Используйте HTML <tr> элемент для определения строки таблицы
  • Используйте HTML <td> элемент для определения данных таблицы
  • Используйте HTML <th> элемент , чтобы определить заголовок таблицы
  • Используйте HTML <caption> элемент для определения заголовок таблицы
  • Используйте CSS border собственности , чтобы определить границы
  • Используйте CSS border-collapse свойство разрушаться границ ячеек
  • Используйте CSS padding свойство добавить отступы к клеткам
  • Используйте CSS text-align свойство выравнивания текста ячейки
  • Используйте CSS border-spacing свойство , чтобы установить расстояние между ячейками
  • Используйте colspan атрибут , чтобы сделать пролетные ячейки много столбцов
  • Используйте rowspan атрибут , чтобы сделать пролетные ячейки много строк
  • Используйте id атрибута , чтобы однозначно определить одну таблицу

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»


HTML Таблица Теги

Тег Описание
<table> Определяет таблицу
<th> Определяет ячейку заголовка в таблице
<tr> Определяет строку в таблице
<td> Определяет ячейку в таблице
<caption> Определяет заголовок таблицы
<colgroup> Определяет группу из одного или более столбцов в таблице для форматирования
<col> Задает свойства столбцов для каждого столбца в пределах <colgroup> элемента
<thead> Группы от содержания заголовка в таблице
<tbody> Группы содержимого тела в таблице
<tfoot> Группы от содержания колонтитула в таблице