Основным элементом в таблице является тег table/table, он содержит в себе все остальные теги. Строки таблицы - (по-английски -row) обозначаются тегом tr/tr, в строке находятся ячейки td/td.

Уроки HTML

Тег table/table - таблица

Урок 9

Этот тег означает table data- данные таблицы.

<table>//таблица
<tr>//строка 1
<td>ячейка № 1</td><td>ячейка № 2</td><td>ячейка № 3</td>//ячейки первой строки
</tr>//конец первой строки
<tr>//строка 2
<td>ячейка № 1</td><td>ячейка № 2</td><td>ячейка № 3</td>//ячейки второй строки
</tr>//конец второй строки
</table>//конец таблицы

ячейка № 1 ячейка № 2 ячейка № 3
ячейка № 1 ячейка № 2 ячейка № 3

Если в тег table добавить атрибут border="1"(или 2,3,4....), то таблица приобретет рамку, толщина которой будет зависеть от значения атрибута.

<table border="1">//таблица с рамкой
<tr>//строка 1
<td>ячейка № 1</td><td>ячейка № 3</td><td>ячейка № 3</td>//ячейки первой строки
</tr>//конец первой строки
<tr>//строка 2
<td>ячейка № 1</td><td>ячейка № 3</td><td>ячейка № 3</td>//ячейки второй строки
</tr>//конец второй строки
</table>//конец таблицы

ячейка № 1 ячейка № 2 ячейка № 3
ячейка № 1 ячейка № 2 ячейка № 3

Можно добавить "шапку" для таблицы, дать названия ячеек: для этого применяют тег th/th-table header.

Этот тег нужно поместить в начале таблицы: после тега table и между тегамиtr/tr

<table border="1">//таблица с рамкой
<tr>
<th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th>
</tr>
<tr>//строка 1
<td>ячейка № 1</td><td>ячейка № 3</td><td>ячейка № 3</td>//ячейки первой строки
</tr>//конец первой строки
<tr>//строка 2
<td>ячейка № 1</td><td>ячейка № 3</td><td>ячейка № 3</td>//ячейки второй строки
</tr>//конец второй строки
</table>//конец таблицы

Заголовок 1Заголовок 2Заголовок 3
ячейка № 1ячейка № 2ячейка № 3
ячейка № 1ячейка № 2ячейка № 3

Как правило количество заголовков таблицы должно совпадать с количеством ячеек в строке.

С уважением, авторы сайта Компьютерапия


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok