Таблицы HTML легко создавать, если вы понимаете основы строк и столбцов, а также понимаете, когда можно использовать таблицу и когда вам следует избегать их.
История таблиц и веб-дизайн
Много лет назад, до принятия приемлемых CSS и веб-стандартов , веб-дизайнеры использовали элемент HTML <table> для создания макета страницы для сайтов. Дизайн веб-сайта будет «нарезан» на маленькие кусочки, похожие на пазлы, а затем объединен с таблицей HTML для отображения в браузере, как и предполагалось. Это был очень сложный процесс, который создал много дополнительной HTML-разметки и который никогда не будет применим сегодня в многоэкранном мире, в котором живут наши веб-сайты . Поскольку CSS стал общепринятым методом для визуальных элементов и макетов веб-страниц, использование таблиц для этого стало ненужным, и многие веб-дизайнеры ошибочно полагали, что «таблицы плохие». Это было и не соответствует действительности. Таблицы для разметки плохие, но они все еще имеют место в веб-дизайнеи HTML, а именно для отображения табличных данных, таких как календарь или расписание поездов. Для этого контента использование таблицы по-прежнему приемлемо и хорошо.
Так как вы накрываете стол? Давайте начнем с создания простой таблицы 2х2. Это будет иметь 2 столбца (это вертикальные блоки) и 2 строки (горизонтальные блоки). После создания таблицы 2×2 вы можете создать таблицу любого размера, просто добавив дополнительные строки или столбцы.
Создать таблицу 2х2
-
Сначала откройте стол:
<Таблица>
-
Откройте первую строку с тегом tr:
<TR>
-
Откройте первый столбец с тегом td:
<TD>
-
Напишите содержимое ячейки.
-
Закройте первую ячейку и откройте вторую:
</ TD> <TD>
-
Напишите содержимое второй ячейки.
-
Закройте вторую ячейку и закройте строку:
</ TD> </ TR>
-
Напишите второй ряд точно так же, как первый:
<tr> <td> </ td> <td> </ td> </ tr>
-
Затем закройте таблицу:
</ Table>
-
Это оно!
Вы также можете добавить заголовки таблицы в свою таблицу, используя элемент <th> . Эти заголовки таблиц заменят фрагменты «табличных данных» в первой строке таблицы, например:
<table>
<tr>
<th> Name </ th>
<th> Role </ th>
</ tr>
<tr>
<td> Jeremy </ td>
<td> Designer </ td>
</ tr>
< td> Дженнифер </ td>
<td> Разработчик </ td>
<tr>
</ tr>
</ table>
Когда эта страница будет отображаться в браузере, эта первая строка с заголовками таблицы будет по умолчанию отображаться жирным шрифтом, и они будут центрированы в ячейке таблицы, в которой они отображаются.
Итак, можно ли использовать таблицы в HTML?
Да, если вы не используете их для разметки, то можно использовать таблицы. Если вам нужно отобразить табличную информацию, лучший способ сделать это — таблица. На самом деле, избегать таблицы из-за некоторой ошибочной чистоты, чтобы избежать этого законного HTML-элемента, так же сложно, как использовать их для разметки в наши дни.
Автор Дженнифер Кирин. Под редакцией Джереми Жирар.