Таблицы в HTML. Управление размерами.

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

Теперь поговорим о том, как задать вполне конкретные числовые размеры ячейки. Для этого есть два свойства — ширина и высота; и два соответствующих этим свойствам параметра —  width и height.

width — параметр тегов <tr>, <td>, <table>, позволяющий регулировать ширину строки, ячейки или таблицы соответственно.

height — параметр тегов <tr>, <td>, <table>, позволяющий регулировать высоту строки, ячейки или таблицы соответственно.

Тут я сразу оговорюсь, что советую применять эти параметры только к тегам <td> и <table>. Что касается тега <tr>, то нет необходимости регулировать его параметры напрямую, так как то же самое можно сделать косвенно — через теги <td> и <table>. Например, если вам нужно задать высоту строки таблицы, просто задайте высоту одной из ячеек, входящих в эту строку. Если же вам нужно установить значение ширины строки, то нужно задать ширину каждой из ячеек, которые входят в эту строку. А есть способ еще проще: задайте ширину таблицы — и получите ширину строки. Вобщем, используйте параметры width и height только для ячеек и самих таблиц. Это поможет вам писать более простой код и избегать запутанных ситуаций. И еще один совет - прежде чем создавать таблицы на html-странице, рисуйте их от руки, на бумажных листах, желательно с будущими размерами.

Параметры width и height имеют числовое значение. Как правило — это пикселы или проценты. В первом случае размеры становятся абсолютными, а во втором —  относительными.

Абсолютные размеры таблиц

Сначала поговорим об абсолютных размерах. Наиболее распространенная единица измерения абсолютных размеров в HTML — пикселы. Один пиксел равен по размерам светящейся точке вашего монитора, из которых состоит весь дисплей. В HTML для пикселов применяется сокращение — px. Например, запись 100px в html-коде, переводится на русский как 100 пикселов. А теперь небольшой вопрос: 100 пикселов — это много или мало? Для ответа на такие вопросы я советую скачать электронную линейку , которая позволит измерить любой объект на экране, а также визуально оценить величину любого размера. Она очень проста в использовании, так что вы без труда с ней разберетесь. Теперь я приведу пример задания ячейки с абсолютными размерами. Предположим у вас есть ячейка и вы хотите, чтобы ее размеры составляли ни много ни мало, а 300х100 (в таких записях сначала пишется ширина, а затем высота). Чтобы осуществить задуманное, нужно написать такой код:

<td width="300px" height="100px">

А можно и так:

<td height="100px" width="300px">

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

<table border="1" rules="all">
  <tr>
    <td>Первая ячейка</td>
    <td>Вторая ячейка</td>
  </tr>

  <tr>
    <td>Третья ячейка</td>
    <td>Четвертая ячейка</td>
  </tr>
</table>

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

<table border="1" rules="all" width="360px" height="80px">
  <tr>
    <td width="180px" height="40px">Первая ячейка</td>
    <td width="180px" height="40px">Вторая ячейка</td>
  </tr>

  <tr>
    <td width="180px" height="40px">Третья ячейка</td>
    <td width="180px" height="40px">Четвертая ячейка</td>
  </tr>
</table>

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

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

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

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

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

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

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

<table border="1" rules="all" width="360px" height="80px">
  <tr>
    <td width="50%" height="50%">Первая ячейка</td>
    <td width="50%" height="50%">Вторая ячейка</td>
  </tr>

  <tr>
    <td width="50%" height="50%">Третья ячейка</td>
    <td width="50%" height="50%">Четвертая ячейка</td>
  </tr>
</table>

Заметьте, что таблица получилась совершенно идентичной той, что была задана абсолютными размерами. Так сложилось вследствие того, что размеры самой таблицы остались абсолютными. Если бы и они были относительными, таблица меняла бы свои размеры по мере растяжения или сжатия окна браузера. Попробуйте в предыдущем коде задать относительные размеры для тега <table>, а затем поэкспериментируйте с размерами окна вашего браузера. Если вы видите результат, то думаю, что вы уловили разницу между абсолютными и относительными размерами для таблиц и их ячеек. Кстати, такие же системы задания размеров действуют и для других элементов HTML. Например, для изображений. Работа с размерами — это, пожалуй, самое сложное при создании таблиц в HTML. Тут нужна внимательность и безошибочность. Именно поэтому я советую сначала прорисовывать ваши таблицы на листе бумаги. Так вы сократите вероятность ошибки в несколько раз. Не поленитесь и уделите время самостоятельным экспериментам с таблицами и их размерами, ведь реальные знания образуются только в процессе практики. После этого приступайте к изучению свойств таблиц, о которых я расскажу на следующей странице.