Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Таблицы в html

Таблицы в языке 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>

В браузере видим следующее:

Простая html таблица

Итак, первое, что у нас добавилось это атрибут border, который отвечает за толщину стенок таблицы, значение задается в пикселях, значение должно быть 0 или 1 иначе вы не пройдете проверку на валидацию. Далее мы добавили новый тег <th>, это практически тот же тег что и <td> только он отличается тем, что текст внутри него будет жирным и будет выравниваться по центру, его используют в основном для заголовков таблицы. В итоге у нас получилась таблица, в три строки и четыре столбца.

Объединение ячеек в html таблице

Очень часто возникает необходимость в объединении нескольких ячеек в таблице в одну и для этого есть специальные атрибуты:

<!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>

В браузере видим следующее:

Простая html таблица

Давайте разбираться, атрибутом colspan мы объединяем горизонтальные ячейки и числом мы указываем количество ячеек, которые мы хотим объединить. Хотелось бы заметить как в примере, если мы объединяем ячейки, то соответственно нам необходимо удалить лишнюю пару <td></td> которую мы объединили, иначе получится лишняя ячейка, в примере как вы могли заметить, во второй строке у нас стало три пары ячеек место четырех. Атрибут rowspan объединяет ячейки по вертикали и как и в прошлом примере, необходимо удалить те лишние ячейки которые мы объединили.

По сути это все основные теги и атрибуты, которые используются при создании таблиц, но есть ещё несколько, о которых я еще не рассказал, так как они практически не применяются, но знать их нужно, возможно вы сами захотите их применить.

Тег <thead>…</thead> этот тег служит для логического разделения таблицы и для удобства её стилизации по средствам CSS и в него заключают заголовок таблицы, этот тег применяется внутри тега <table>.

Тег <tbody>…</tbody> этот тег так же как и предыдущий служит для логического формирования и имеет все те же свойства что и предыдущий, и его используют для обозначения основной части таблицы, так сказать тело.

Тег <tfoot>…</tfoot> это все из той же серии этот тег означает низ таблицы и в пределах самой таблицы разрешено его единичное использование.

Вот пожалуй и все основные html теги для создания таблиц, в следующем уроке мы углубимся в изучение таблиц, а именно будем настраивать таблицы с помощью CSS. Я думаю, данная тема очень интересная и будет вами применена не раз на практике, поскольку таблицы встречаются повсеместно.

Дата публикации:2014-05-15


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget