А можно и так:

Здесь, как и во всем языке HTML , не имеет значения порядок появления параметров тега, поэтому возможны оба варианта записи. Теперь создадим таблицу шириной в 360 пикселов и высотой в 80 пикселов. Таблица будет состоять из двух строк и двух столбцов (т.е. будет включать в себя 4 ячейки). Строки будут иметь равную высоту, а ячейки - равную ширину. Посчитайте самостоятельно размеры отдельно взятой ячейки, а затем нарисуйте и образмерьте будущую таблицу. Пишем код, пока не задавая конкретных размеров:

К слову,подобный код вы уже видели. Он был приведен в качестве примера на предыдущей странице, только там было три строки и три столбца, а здесь по 2 тех и других. Сейчас вы дополните этот несложный код размерными параметрами. Сначала попытайтесь сделать это самостоятельно, а уже затем смотрите на готовый код, приведенный ниже:

В результате помещения этого кода в браузер, вы увидите подобную картинку.

Относительные размеры таблиц

Теперь перейдем к относительной единице измерения - процентам. Система относительных размеров является более гибкой. Потому что в этом случае размеры ячейки, или таблицы подстраиваются под размеры того элемента, в котором эта ячейка или таблица находится. Такой внешний элемент, содержащий в себе рассматриваемую ячейку или таблицу, называют еще родительским элементом . Для ячейки родительским элементом всегда является таблица, включающая в себя эту ячейку. Для таблицы, расположенной в ячейке "cell" другой таблицы, родительским элементом будет ячейка "cell". Для таблицы, находящейся непосредственно в контейнере тега родительским элементом будет тело страницы . Итак, если для ячейки/таблицы задан размер в процентах, браузер посчитает эти проценты от размера родительского элемента . Если вы пока не поняли, о чем идет речь - не страшно: примеры помогут уловить суть.

Пример первый. Предположим, таблица находится непосредственно в теле страницы. И параметр ширины таблицы следующий: width="50%" . В такой ситуации ширина таблицы всегда будет равна половине ширины страницы . На каком бы мониторе эта страница не была открыта. И как бы не менялись размеры окна браузера.

Пример второй. Допустим задана таблица в 500 пикселов шириной. А ширина какой либо ячейки задана так: width="10%" . В этом случае ширина ячейки составит 10% от ширины таблицы, т.е. ширина ячейки будет равна 50 пикселам. Но вот вы решили изменить ширину таблицы на 700 пикселов. Как только вы это сделаете, ширина ячейки автоматически изменится на 70 пикселов.

Пример третий. Ширина таблицы составляет 70% от ширины страницы. А размер ячейки width="10%" . В этом случае ширина таблицы подстроится под ширину окна браузера, как в первом примере. А ширина ячейки подстроится под ширину таблицы. Т.е. при растяжении/сжатии окна браузера по ширине, автоматически меняется не только ширина таблицы, но и ширина ячейки.

А теперь создадим ту же самую таблицу, что была приведена чуть выше, но размеры ячеек сделаем относительными.

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

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

Однако возможности CSS позволяют изменить размер таблицы в HTML, указывая именно те значения ширины и высоты, которые необходимы. Справедливости ради следует отметить, что еще атрибуты таблицы позволяют задавать нужные размеры. Однако, в настоящий момент мы поговорим лишь о CSS.

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

Чтобы указать ширину таблицы необходимо использовать CSS-свойство width , а чтобы задать высоту необходимо применять свойство height .

На примере это выглядит следующим образом.

Table { width: 500px; height: 100px; }

Результат в браузере:

Полный код:

Значения ширины и высоты таблицы могут быть заданы, как абсолютной величиной (в пикселях), так и относительной – в процентах. Например, 20px и 20% соответственно.

Если вы используете проценты, чтобы задать размеры таблицы, то они будут высчитываться, отталкиваясь от размеров родительского элемента. Если говорить о нашем примере, то речь идет про окно браузера.

Существует еще одно значение – auto. И оно является особым, поскольку с его помощью вычисление ширины и высоты таблицы происходит автоматически, по умолчанию. На практике указание этого значения выглядит вот так.

Width: auto;

Height: auto;

Хотим акцентировать ваше внимание на еще таком важном моменте. Что высоту в процентах лучше не указывать, поскольку, как правило, в таком случае они работать не буду.

Указание размеров отдельных ячеек и столбцов

Если вы считаете, что браузер не корректно задал ширину колонок, отталкиваясь от содержимого ячеек, то вы вправе размеры ячеек и столбцов указать самостоятельно. И сейчас мы поговорим о том, как изменить размер ячейки в таблице HTML.

Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width и height .

Чтобы добавить стили ячейкам, можно использовать один из двух вариантов:

1. Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так: class="cell-50px"

   А после этого следует применить стили для данных классов.

2. Задействовать атрибут style , внутри которого прописать необходимый CSS-код.

На практике второй вариант будет выглядеть следующим образом: