Таблицы в языке html используются уже очень давно и нельзя ни как не отметить их важность, так как хоть и они стали уже менее востребованными чем раньше, но все же не утратил свою актуальность. Давайте посмотрим простую структуру таблицы на html:
<table>
<tr>
<td>Таблица с одним столбцом и строчкой</td>
</tr>
</table>
Давайте разбираться, любая таблица в html начинается с тега <table> и им же заканчивается, тег <tr> открывает новую строку в таблице и </tr> соответственно закрывает. В каждой строчке вы можете сделать сколько вам угодно столбцов благодаря тегу <td>. В примере у нас таблица в один столбец и одну строчку. Давайте теперь немного углубимся и соответственно усложним таблицу:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title> Создание таблицы в html</title>
</head>
<body>
<table border="1">
<tr>
<th>Четные</th>
<th>Не четные</th>
<th>Нули</th>
<th>Единицы</th>
</tr>
<tr>
<td>2</td>
<td>5</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>
В браузере видим следующее:
Итак, первое, что у нас добавилось это атрибут border, который отвечает за толщину стенок таблицы, значение задается в пикселях, значение должно быть 0 или 1 иначе вы не пройдете проверку на валидацию. Далее мы добавили новый тег <th>, это практически тот же тег что и <td> только он отличается тем, что текст внутри него будет жирным и будет выравниваться по центру, его используют в основном для заголовков таблицы. В итоге у нас получилась таблица, в три строки и четыре столбца.
Очень часто возникает необходимость в объединении нескольких ячеек в таблице в одну и для этого есть специальные атрибуты:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Создание таблицы</title>
</head>
<body>
<table border="1">
<tr>
<th>Четные</th>
<th>Не четные</th>
<th>Нули</th>
<th>Единицы</th>
</tr>
<tr>
<td colspan="2">2</td>
<td rowspan="2">0</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>1</td>
</tr>
</table>
</body>
</html>
В браузере видим следующее:
Давайте разбираться, атрибутом colspan мы объединяем горизонтальные ячейки и числом мы указываем количество ячеек, которые мы хотим объединить. Хотелось бы заметить как в примере, если мы объединяем ячейки, то соответственно нам необходимо удалить лишнюю пару <td></td> которую мы объединили, иначе получится лишняя ячейка, в примере как вы могли заметить, во второй строке у нас стало три пары ячеек место четырех. Атрибут rowspan объединяет ячейки по вертикали и как и в прошлом примере, необходимо удалить те лишние ячейки которые мы объединили.
По сути это все основные теги и атрибуты, которые используются при создании таблиц, но есть ещё несколько, о которых я еще не рассказал, так как они практически не применяются, но знать их нужно, возможно вы сами захотите их применить.
Тег <thead>…</thead> этот тег служит для логического разделения таблицы и для удобства её стилизации по средствам CSS и в него заключают заголовок таблицы, этот тег применяется внутри тега <table>.
Тег <tbody>…</tbody> этот тег так же как и предыдущий служит для логического формирования и имеет все те же свойства что и предыдущий, и его используют для обозначения основной части таблицы, так сказать тело.
Тег <tfoot>…</tfoot> это все из той же серии этот тег означает низ таблицы и в пределах самой таблицы разрешено его единичное использование.
Вот пожалуй и все основные html теги для создания таблиц, в следующем уроке мы углубимся в изучение таблиц, а именно будем настраивать таблицы с помощью CSS. Я думаю, данная тема очень интересная и будет вами применена не раз на практике, поскольку таблицы встречаются повсеместно.
Дата публикации:2014-05-15
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.
