При помощи языка HTML существует возможность представлять различные данные гипертекстов в виде таблиц. Для этого существуют специальные тэги и параметры, некоторые из которых имеют много общего с обычными текстовыми элементами.
Неопытным пользователям составление таблиц HTML может показаться весьма сложным. Но при неторопливом и последовательном изучении всё встанет на свои места. Теперь подробнее об основных тегах, их атрибутах.
Очень важно соблюсти порядок, нужно двигаться сверху вниз построчно.
Как было сказано чуть выше, чтобы создать таблицу HTML, нужно использовать тэги в определённой последовательности. Чтобы обозначить саму таблицу на странице, используется <table>. С этим тэгом может быть использовано более 10-ти уточняющих параметров, у каждого из которых своё значение, своя роль.
Параметр align задаёт горизонтальное положение таблице, может принимать два значения – right и left (то есть таблицу можно расположить правее или левее). А valign, напротив, определяет вертикальное положение таблицы и принимает значения верхнее, среднее, нижнее (top, middle, bottom соответственно).
Размер таблицы задаётся двумя атрибутами. Первый – width — показывает ширину таблицы, который может быть выражен либо в процентах от общей площади экрана, либо в пикселях. А длину показывает height в тех же единицах измерения, но в обоих случаях должно быть указано только целое число.
Чтобы использовать изображение в качестве фона таблицы, нужно применить background, указывая его url. Как и в любом текстовом документе, можно вполне применить параметр bgcolor, который способен задать определённый цвет фона, на котором расположится таблица. Значение цвета с bgcolor можно указать в формате RBG палитры, обычным названием на английском языке, rbg(^,^,^) в интервале значений от 0 до 255.
Около четырёх атрибутов посвящено рамке таблицы. Например, border (бордюр таблицы) – указывается ширина в пикселях, border color – её цвет, border colorlight и border colordark – цвет рамки с тенью, как в трёхмерной графике. Кроме этих, есть ещё frame, который определяет, как будут вырисовываться основные линии. Он может принять девять значений: void удаляет наружную рамку, above – отображает только верх, below – показывает низ рамки, hsides – отображает оба предыдущих варианта, lhs и rhs – левая и правая границы соответственно, а vsides – оба предыдущих варианта вместе, box – рамка таблицы со всеми сторонами, border показывает то же. Так будет выглядеть внешняя рамка таблицы. А параметры внутренних линий таблицы задаётся атрибутом rules, который имеет пять вариантов: none – внутренних линий нет, all – отображение абсолютно всех линий, groups – горизонтальное разделение групп таблицы (характерен для thead, tbody, tfoot, colgroup), rows – все горизонтальные линии, cols – вертикальные линии.
Текст, расположенный в каждой из ячеек, не должен прилегать плотно к границе, а находится на определённом расстоянии от неё. А его задаёт параметр cellpadding. Ячейки таблицы расположены на определённом расстоянии друг от друга, что регулируется параметром cellspacing. Всё выражено в пикселях, соответственно, принадлежит к множеству целых чисел.
Каждая таблица имеет своё название, которое может располагаться вверху или внизу; название определяет тэгом <caption>, за его расположение отвечает элемент align={top/bottom} (вверху или внизу таблицы соответственно, чаще используются по умолчанию). Употребляется этот контейнер только один раз сразу после открывающего тэга <table>.
Элементы таблицы (графы), как правило, должны быть озаглавлены (строки, столбцы), для чего и предназначен тэг <thead>. Здесь проводится аналогия с обычным текстом — <head> и <body>. Тогда <tbody> обозначает тело таблицы. К этому добавляется тег <tfoot>, обозначающий нижнюю заключительную часть таблицы.
Такие тэги, как <col> и <colgroup> используются в сочетании; первый задаёт свойства столбцов составляемой таблицы, второй – тоже задаёт определённые свойства, но воздействует на отображение линий, определённых параметром «rules=».
А тэг <td> предназначен для представления ячеек таблицы; тэг <th> указывает положение заголовка в таблице. Этим тэгам могут соответствовать около 13-ти вариантов атрибутов. Отметим, что background, bgcolor, border color, border color light, border color dark точно такие же, как для table.
Nowrap – подавление переноса текста в <td> или <tr>. Rowspan указывает количество строк, идущих от одной ячейки (ячейка объединяет строки), colspan – количество столбцов, идущих от одной ячейки (ячейка объединяет столбцы). Colspec – параметр, указывающий на ширину колонок, align – выравнивание данных в ячейке горизонтально (принимает пять значений – left, right, center, char, justify), выровнять вертикально позволит valign (принимает четыре значения – top, middle, bottom, baseline). Ширина и высота ячейки выражается в пикселях и задаётся параметрами width и height соответственно.
Описание каждой новой строки в HTML начинается с <tr> и заканчивается </tr>. Для него характерны атрибуты align и valign по аналогии с <td> и <th>.
Стоит упомянуть, что все тэги, представленные выше, имеют и закрывающий тэг. Это обязательно. Напомню, что он отличается от открывающего вертикальной чертой внутри угловых скобок перед названием тэга.
Из всех вышеперечисленных тэгов основными являются <table>, <tr>, <td>, <th>, остальные – дополнительные.
С описанием основных элементов и тэгов вопросов не должно возникнуть, их нужно хорошо запомнить.
Начинать составление таблицы всегда нужно с открывающего тэга <body>, с которым указываются расположение align, фон или фоновое изображение, бордюр таблицы border= с определённым значением в пикселях, ширину и длину таблицы, выраженные в пикселях. Также указывается расстояние между ячейками (cellspacing), расстояние между текстом в ячейках и границей (cellpadding), тоже в пикселях.
А дальше всё просто: открывающий тэг <tr>, перечисляются все ячейки в первой строке в обрамлении тэгов <td> или <th>, потом закрываем строку тэгом </tr>. И так описывается каждая новая строка, обязательно с тэгом <tr>. Когда описание заканчивается, ставится закрывающий тэг </table>. Это простейший вариант, ничем не осложнённый. Всё происходит по принципу матрёшки!
Если бы несколько строк таблицы объединялось одной ячейкой (одна ячейка, а от неё две строки), то в тэгах <td> и </td> использовался бы атрибут rowspan= «число объединяемых строк». То есть после <tr> ставится <td>, название объединяющей ячейки, </td>. Потом с новой строки между <td> и </td> описывается первая строка, потом </tr>. Начинаем новую строку, здесь уже описываем вторую объединяемую строку, без параметра rowspan=.
С объединёнными столбцами дело проще. Используем всё те же основные тэги по тем же правилам, описание идёт построчное, только когда дойдёт очередь до объединяющей ячейки, следует употребить colspan= «число объединённых столбцов».
Не стоит забывать о тэге <th>, которым можно указать выделенный заголовок в ячейке.
Но всё вышесказанное может для многих так и остаться набором слов, если не привести примеры составления таблиц.
Самый простой вариант – набор небольших ячеек без каких-либо объединений столбцов или строк. Как отмечалось выше, составление должно идти построчно сверху вниз в любом случае.
<table border> — начало, бордюра у таблицы не будет. <tr> —начали новую строку. <td>текст</td> <td>текст</td> …- в текущей строке описываются все ячейки, между тэгами вставляется их текст. </tr> — строка закончена, переходим к следующей. <tr> —начали новую строку. <td>текст</td> <td>текст</td> …- в текущей строке описываются все ячейки, между тэгами вставляется их текст. </tr> — строка закончена, переходим к следующей.
</table> — таблица закончена.
Если нужно объединить, допустим, три строки одной ячейкой, то схема имела бы вид:
<table border> <tr> <td rowspan=3>текст объединяющей ячейки</td> <td>текст</td> <td>текст</td> </tr> <tr> <td>текст</td> <td>текст</td> </tr> </table>
Аналогично поступаем в случае объединения столбцов:
<table border> <tr> <td colspan=3>текст</td> <td colspan=3>ntrcn</td> — две ячейки объединяют по три столбца. </tr> <tr> <td>текст</td> <td>текст</td> </tr> <tr> <td>текст</td> <td>текст</td> </tr> </table>
Видео по теме