Як розтягнути таблицю

Як розтягнути таблицю

Необхідно розтягнути таблицю на весь простір вікна переглядача, наприклад, коли дизайн сторінки розміщений всередину таблиці. Вирішення цього завдання не потребує складного коду, але передбачає врахування деяких особливостей розмітки веб-сторінок.

Вам знадобиться

  • Початкові знання мови HTML

Інструкція

1. Спочатку вам треба уточнити сенс майбутньої операції. У HTML-коді сторінки таблиці представляють собою набір вкладених один в одного парних тегів (по одному відкриває і закриває). Теги комірок (< td > і </td >) вкладені в теги рядків (< tr > і </tr >), а ті в свою чергу - в теги таблиці (< table > і </table >). У таблиці, що відкривається, можна задавати її ширину та висоту як в абсолютних одиницях (пікселях), так і відносних (відсотках). При відносних розмірах за 100% приймається ширина і висота батьківського елемента таблиці. Якщо ви помістите таблицю безпосередньо в тіло сторінки (а не в шар, форму, іншу таблицю тощо), то розмірами її батьківського елемента є ширина та висота сторінки. Значить, щоб розтягнути таблицю на весь вільний простір, треба вказати їй 100% розміри по горизонталі і вертикалі.

2. Тепер можна зайнятися практичною реалізацією цього в HTML-коді. Ширина і висота таблиці визначаються атрибутами width і height. Значить код таблиці з вказанням 100% розмірів за всіма напрямками і, наприклад, з двома комірками в одному рядку, може виглядати так:< table width = "" 100% "" height = "" 100% "" > < tr align = "" center "" > < td bgcolor = "" # 808080 "" > ліва комірка таблиці </td > < td bgcolor = "" # color

3. Зазначення 100% ширини та висоти буде достатньо, щоб розтягнути таблицю, якщо ви правильно виберіть HTML-стандарт, за яким переглядач повинен читати код сторінки. Відповідний тег розміщується в першому рядку документа. Вам потрібен тег такого змісту:<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN"">

4. І ще один момент слід врахувати у вашому коді: за замовчуванням сторінка має відступи від країв вікна розміром у декілька пікселей, тому таблиця, навіть заповнивши всю сторінку, все ж не розтягнеться на все вікно. Щоб знищити ці непотрібні поля, можна задати нульові відступи у відповідних атрибутах, відкриваючи теги тіла сторінки (< body >).<body topmargin=""0"" leftmargin=""0"">

5. У збиранні весь код сторінки з розтягнутою на всю ширину і висоту екрану таблицею буде виглядати так:<! DOCTYPE HTML PUBLIC "" -//W3C//DTD HTML 4.0 Transitional//EN "" > < html > < head > &l