Ширина столбцов в нашей таблице разная. Это происходит потому, что браузер распределяет место в таблице в зависимости от количества текста, которого в первом столбце оказалось больше.
Однако, если в теге первой ячейки указать <TD WIDTH="50%">, то оба столбца станут равными по ширине.
Таким образом, можно пользоваться атрибутом WIDTH= в теге <TD> так же, как и в теге <TABLE>, определяя ширину каждой ячейки либо в пикселах, либо в процентах от общей ширины окна броузера. Правда, строго говоря, нельзя задать ширину каждой ячейки, а лишь ширину каждого столбца, поскольку в большинстве браузеров все ячейки в столбце всегда имеют одинаковую ширину.
Самостоятельно примените одинаковую ширину к столбцам таблицы.
Объединение ячеек
Объединение ячеек — выполнятся путем установки атрибута COLSPAN= (для объединения соседних столбцов) или ROWSPAN= (для объединения соседних строк):
Например,
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<TR>
<TD WIDTH="33%">Этo первая ячейка</ТD>
<TD WIDTH="33%">Это вторая ячейка</ТD>
<TD ROWSPAN="3">A это три ячейки третьего столбца объединились в одну большую ячейку</ТD>
</TR> <TR>
<TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</ТD>
</TR>
<TR>
<TD>3ro первая ячейка третьей строки</ТD>
<TD>A это вторая ячейка третьей строки</ТD> </TR>
</TABLE>
Результат показан на рис. 5.3. Здесь, как видите, отображена таблица из трех строк по три ячейки. Однако третья ячейка первой строки с помощью атрибута ROWSPAN="3" объединена с остальными двумя ячейками третьего столбца. Поэтому в следующих строках мы можем спокойно забыть про третий столбец — место уже занято. Поэтому в третьей строке таблицы всего две ячейки. А во второй строке происходит следующее: мы с помощью атрибута COLSPAN="2" объединяем две оставшиеся ячейки этого ряда в одну.
Кстати, обратите внимание на то, что, хотя ширина первых двух столбцов таблицы задана равной 33%, то есть примерно треть ширины таблицы приходится на каждый столбец, правый столбец на самом деле занимает явно больше места. Это произошло потому, что иначе браузеру не удалось бы уместить в ширину этого столбца длинное слово “объединились”. В результате браузер самостоятельно чуть расширил этот столбец за счет двух остальных.
Мы с вами еще не рассмотрели такие элементы таблицы, как заголовок и заключение. В HTML 4.0можно все основное содержание таблицы обозначить тегом <TBODY>. Тогда заголовок таблицы обозначается тегом <THEAD>, а заключение — тегом <TFOOT>. Все три тега употребляются с закрывающими тегами и могут иметь различные атрибуты, например BGCOLOR=, ALIGN=, VALIGN=.
А для ячеек заголовка таблицы вместо тега <TD> обычно используют тег <ТН>. В принципе, это одно и то же, однако в ячейках <ТН> текст по умолчанию выравнивается по центру и отображается полужирным начертанием шрифта.
Для примера добавим в нашу учебную таблицу заголовок и заключение:
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"
BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<THEAD BGCOLOR="Aqua">
<TR>
<TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</ТН>
</ТR>
</THEAD>
<TBODY>
<TR>
<TD WIDTH="33%"> первая ячейка</ТD>
<TD WIDTH="33%"> вторая ячейка</ТD>
<TD ROWSPAN="3">A это три ячейки третьего столбца объединились в одну большую строки</ТD>
</TR>
<TR>
<TD COLSPAN="2">единственная ячейка второй строки, объединяющая оба столбца</ТD>
</TR>
<TR>
<TD>Это первая ячейка третьей строки</TD>
<TD>A это вторая ячейка третьей строки</ТD>
</TR>
</TBODY>
<TFOOT BGCOLOR="Yellow">
<TR>
<TD COLSPAN="3" ALIGN="center">
<SMALL>Понравилось делать?</Small>
</ТD>
</ТR>
<Small>Понравились таблицы</Small>
</TFOOT>
</TABLE>
Примените данный код. Осталось добавить, что использование обсуждавшегося выше атрибута RULES= со значением "groups" подразумевает именно эти “группы”: заголовок, основное содержание и заключение таблицы, обозначенные тегами <THEAD>, <TBODY> и <TFOOT>.
Самостоятельно, используя язык разметки html, создайте таблицу (см. рис. 5.4.).В качестве основного цвета таблицы примените серебристый (#Е4Е4Е4). Растяните таблицу на всю ширину окна браузера (WIDTH="100%"). Создайте заголовок таблицы с текстом «Таблица результатов». Примените особенный цвет и границу к заголовку.
Ширина первого столбца с номерами хоккейных команд примените равной 20 пикселам, а всех столбцов с результатами матчей — 40 пикселам. Ширина столбца с названиями команд укажите равной 20% от ширины окна. Ширину двух последних столбцов не задавайте вообще — им отводится все оставшееся место.
В таблице примените атрибут ALIGN="center" для ячеек, без которого выравнивание текста происходило бы по левому краю. Во всех ячейках с результатами встреч задайте светлый фон (например, BGCOLOR="white"), в ячейках с количеством очков и заброшенных/пропущенных шайб для лучшего визуального выделения используйте другой цвет фона.
Количество очков, как главная информация в каждой строке таблицы, выделите полужирным и увеличенным шрифтом (с помощью тегов <В> и <ВIG>).
Для лучшего “разнесения” в разные стороны количества заброшенных и пропущенных шайб между ними используйте длинное тире —символ —.
Зачерненные квадраты турнирной таблицы сделаны просто — с помощью ячеек с темным цветом фона (например, BGCOLOR="black")“
Для отображения рамки вокруг пустой ячейки (левой верхней) туда поместите неразрывный пробел – символ .