Пример таблицы 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 границы:
Не забудьте определить границы как для таблицы и ячеек таблицы.
HTML таблица с рухнувшей границ
Если вы хотите границы , чтобы свернуть в одну границу, добавить CSS border-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 свойства:
HTML таблица с границами Spacing
Расстояние между границами определяет пространство между клетками.
Для того, чтобы установить интервал границы для таблицы, используйте CSS border-spacing свойства:
Если таблица разрушилась границы, границы расстояние не имеет никакого эффекта.
Ячейки таблицы, которые охватывают много столбцов
Для того, чтобы промежуток ячейки более одного столбца, используйте 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> | Группы от содержания колонтитула в таблице |