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

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

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

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

Початкові знання мови 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=»#c0c0c0″> права комірка таблиці </ td>

     </ Tr>

    </ Table>
  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>

     <title> Розтягнута таблиця </ title>

    </ Head>

    <body topmargin=»0″ leftmargin=»0″>

    <table border=»1″ width=»100%» height=»100%»>

     <tr align=»center»>

      <td bgcolor=»#808080″> ліва клітинка таблиці </ td>

      <td bgcolor=»#c0c0c0″> права комірка таблиці </ td>

     </ Tr>

    </ Table>

    </ Body>

    </ Html>