Создание HTML-таблиц с различными параметрами

В эпоху HTML до таблиц

Представьте себе создание расписания или ведомости успеваемости учащихся на веб-странице без использования тега таблицы HTML. Что ж, давным-давно, до того, как появился тег table, люди использовали код с тегами PRE (предварительно отформатированный текст) для достижения этой цели. Хотите узнать, как работает тег PRE ?.

Ниже приведен пример фрагмента кода вместе с результатами создания простой таблицы листа отметок с тегами PRE.

<PRE>
Let's make a mark sheet 
Sr.   Student ID        MATHS        PHYSICS           HISTORY
1        6859             A             B                 C
2        8412             B             C                 A
3        6985             C             B                 B
4        5474             D             C                 C
</PRE>

Обратите внимание, что приведенный ниже вывод в точности похож на исходный HTML-код, который представляет собой текст в предварительно отформатированном виде. Однако не рекомендуется использовать тег

, поскольку он не предназначен для создания таблиц в HTML.

Таблица, созданная с помощью тега HTML PRE

Что такое таблицы HTML?

Таблицы очень похожи на лист Excel или любой электронный табличный документ, и это отличный способ организовать данные в табличной форме, а в текущей среде веб-дизайна таблицы широко используются для сравнения и сопоставления различных типов данных в структурированном виде. Когда-то таблицы также использовались для позиционирования содержимого веб-страницы, такого как боковая панель, верхний или нижний колонтитул, в более структурированном виде. Теперь настоятельно рекомендуется использовать CSS, чтобы иметь точный контроль над дизайном макета, а не использовать таблицы.

Элементы тега таблицы

Давайте посмотрим на простую структуру таблицы HTML и разберемся с каждым элементом. Хотя это минимальный набор тегов, необходимых для создания простой таблицы, существует множество других атрибутов для настройки HTML-таблиц в соответствии с требованиями.

<TABLE> <!-- start of table -->
<CAPTION>Table Caption</CAPTION> <!-- caption for the table -->
<TR> <!-- start of header row -->
<TH> First Header Cell Content </TH> 
<TH> Second Header Cell Content </TH> 
</TR> <!-- end of header row -->
<TR> <!-- start of first row -->
<TD> First Row, First Cell Content </TD>
<TD> First Row, Last Cell Content </TD> 
</TR> <!-- end of first row -->
<TR> <!-- start of second row -->
<TD> Second Row, First Cell Content </TD>
<TD> Second Row, Second Cell Content </TD> 
</TR> <!-- end of second row -->
</TABLE> <!-- end of table -->

Таблица в браузере будет выглядеть так:

Стол без рамки

Добавление границы к таблице

преобразует текстовое содержимое в красивую таблицу:

Таблица с рамкой

Основные элементы показаны в формате графической таблицы, как показано ниже:

Структура таблицы HTML

Использование атрибутов с элементами таблицы

<ТАБЛИЦА>

Этот тег определяет начало таблицы и поддерживает следующие атрибуты:

Атрибут	Описание
ГРАНИЦА	Граница стола. Например, ГРАНИЦА = 1. Чтобы иметь полный контроль над сайтом, рекомендуется использовать таблицы стилей вместо управления HTML.
ШИРИНА	Ширина стола. Например, WIDTH = 100%. Он также может содержать абсолютные значения в пикселях, но предпочтительны проценты. И снова таблицы стилей могут справиться с этой задачей лучше!
ВЫРАВНИТЬ	Относительное выравнивание всей таблицы. Может принимать три значения LEFT, CENTER, RIGHT

Этот тег определяет заголовок таблицы, т.е. строку заголовка. По умолчанию текст в этой ячейке выделен полужирным шрифтом и центрирован. Остальные атрибуты аналогичны атрибутам таблицы и имеют приоритет над атрибутами таблицы! Дополнительный атрибут, не упомянутый выше:

Атрибут	Описание
ВАЛИНГ	Вертикальное выравнивание содержимого ячейки. Может принимать три значения TOP, MIDDLE, BOTTOM

Это определяет строку таблицы и имеет те же атрибуты, что и перечисленные выше. Убедитесь, что вы добавили закрывающий тег, как и все остальные теги !!

Определяет ячейку данных таблицы. Атрибуты этого тега включают ALIGN, VALIGN, WIDTH, а также что-то, называемое ROWSPAN и COLSPAN. Обратите внимание, что настройки здесь имеют приоритет над настройками таблицы и строки! ROWSPAN дает количество строк, которые покрывает эта ячейка, а COLSPAN — количество столбцов.

Образец таблицы

Теперь вы знаете структуру таблицы и пора провести эксперимент. Давайте рассмотрим несколько примеров и код, который можно использовать на веб-странице. Ниже приведен пример простых табличных данных с рамкой и цветом границы. Граница обеспечивает видимую границу для элемента таблицы, который можно настроить любого цвета для отображения с макетом страницы.

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

А вот и код!

<TABLE border=1 bordercolor=silver >
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD></TR>
<TR>
<TD>Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD></TR>
<TR>
<TD>Cell 7</TD>
<TD>Cell 8</TD>
<TD>Cell 9</TD>
</TR>
</TABLE>